20181130 前端开发日报-前端开发博客

平庸前端码农之蜕变：AST；ES6 完全使用手册；用 webpack 写个现代的 JavaScript 包；你可能需要的一本前端小册：Vue 项目构建与开发入门；理解JavaScript闭包——新手指南；写出优雅的js代码；纯静态HTML 与 C# Server 进行WebSocket 连接；为什么Proxy可以优化vue的数据监听机制

平庸前端码农之蜕变：AST 前言首先，先说明下该文章是译文，原文出自《AST for JavaScript developers》。很少花时间特地翻译一篇文章，咬文嚼字是件很累的事情，实在是这篇写的太棒了，所以忍不住想和大家一起分享。 OK，我们直接进入正题。为什么要谈AST（抽象语法树）? 如果你查看目前任何主流的项目中的devDepende…
ES6 完全使用手册前言这里的 “ES6” 泛指 ES5 之后的新语法这里的 “完全” 是指本文会不断更新这里的 “使用” 是指本文会展示很多 ES6 的使用场景这里的 “手册” 是指你可以参照本文将项目更多的重构为 ES6 语法此外还要注意这里…
用 webpack 写个现代的 JavaScript 包 webpack 作为目前主流的构建工具，其较快的版本迭代和复杂的配置方式，使得每次开发前不得不规划相当部分时间来调试。这里将记录整个环境的搭建过程，为新手提供基础思路。就像我在开发vue-sitemap时一样，构建工具往往需要达到下面几个需求：构建生成 CommonJS/UMD/ES Modules 三种模式的代码提供给…
你可能需要的一本前端小册：Vue 项目构建与开发入门
理解JavaScript闭包——新手指南
写出优雅的js代码 var a=1; // 错误："var"定义的"常量"是可变的，在声明一个常量时，该常量在整个程序中都应该是不可变的。正解： const a=1 2.给常量赋值 let lastName = fullName ; // 错误：如果fullName= =undefined let propertyValue = Object.attr…
纯静态HTML 与 C# Server 进行WebSocket 连接 TODO: 这篇文章只是写了一个DEMO，告诉你如何使用C#构建一个WebSocket服务器，以便HTML网页可以通过WebSocket与之进行交互。将会使用到的 Package： websocket-sharp Newtonsoft.JSON 这个DEMO主要完成的工作是： HTML 连接 WebSocket 并传送一个Json，Json包含两个数字a和b。服务器监听 WebSo…
为什么Proxy可以优化vue的数据监听机制我们首先来看vue2.x中的实现，为简单起见，我们这里不考虑多级嵌套，也不考虑数组 vue2.x中的实现其本质是 new Watcher(data, key, callback) 的方式，而在调用之前是先将data中的所有属性转化成可监听的对象, 其主要就是利用 Object.defineProperty ，。 class Watcher{ constructor(data, key, cb…
JavaScript异步之从回调函数到Promise 【51CTO.com原创稿件】 JavaScript的异步处理是前端工程师必须接触的一块内容。ES6在JavaScript异步的处理上引入了新的特性，使得程序员能够更加优雅地处理异步问题。若您想通过本教程直接上手Promise，那么请按顺序阅读。若您只是想了解Promise概念，那么请直接阅读每章的第一小节，等需要的时候，再回过头来看具…
JS中的双向数据绑定及Object.defineProperty方法缘起前几天在看一些流行的迷你mvvm框架（比如avalon.js、vue.js 这种较轻的框架，而非Angularjs、Emberjs这种较重的框架）的实现。现代流行的mvvm框架一般都会将数据双向绑定（two-ways data binding）做掉，作为框架自身的一个卖点（Ember.js 貌似是不支持数据双向绑定的。），而且每种框架双向数据绑定的实现方式…
WebRTC基础实践 – 7. 配置信令服务本节内容在本节课程中, 我们将学习以下内容: 通过 npm 安装 package.json 文件中指定的项目依赖运行Node.js服务器, 通过 node-static 提供静态文件服务。用Socket.IO创建消息传递服务创建聊天室以及发送聊天消息。本节的完整版代码位于 step-04 文件夹中。基…
【You Dont Know JS 中文版】You Dont Know JS 中文版，你不懂JS，在Github很火的一本JS电子书，可以免费看，很多人不知道。
前端构建：13种热门工具的选型参考在前端项目的规模和复杂性不断提升的情况下，各类构建思想和相应工具层出不穷。本文竭己所能对比了当下13个构建工具，包括Browserify、Webpack、Rollup、Grunt、Gulp和Yeoman6个流行度最广的工具，FIS、Athena、W…
细解JavaScript ES7 ES8 ES9 新特性导言：ECMAScript的演化不会停止，但是我们完全没必要害怕。除了ES6这个史无前例的版本带来了海量的信息和知识点以外，之后每年一发的版本都仅仅带有少量的增量更新，一年更新的东西花半个小时就能搞懂了，完全没…
babel升级7.xx总结 npx babel-upgrade –write –install 二、手动升级 2.1 安装依赖 // Babel-loader 8.x "babel-loader" // Babel-core 7.x "@babel/core" // Env "@babel/preset-env" // Runtime "@babel/runtime" "@babel/plugin-transform-runtime&q…
webpack – babel 篇基于我的上篇文章， webpack4.0 入门篇 – 构建前端开发的基本环境，补充对 babel 进行的一次探究。上篇文章讲叙到的 webpack babel 时几乎一笔带过，所以这篇文章将进行补充说明. Babel 是一个让我们能够使用 ES 新特性的 JS 编译工具，我们可以在 webpack 中配置 Babel ，以便使用 ES6、ES7 标准…
月下载量千万的 npm 包被黑客篡改，Vue 开发者可能正在遭受攻击今天早起看手机，结果发现我的微信群炸了，未读消息 999+，大家都在讨论 event-stream 事件。打开 twitter 也是被这个刷屏了。于是翻看了一下 GitHub issue，大概知道了事情的原委。用户 @FallingSnow 在 GitHub 上为 event-stream 仓库创建了一个 issue，标题为：”I don’t know what to say.”，翻…
JS—-this指向（一）平时用this有些混乱，所以写个总结。没有箭头函数之前，我们说this就是函数运行时所在的环境对象，但是在箭头函数中this就是定义时所在的对象，先说大家熟知的：函数运行时所在的环境对象。 1、作为函数调用，this指向全局对象 var q = ‘window’ var func = functio { console.log(this.q) } func() …
setTimeout&Promise&Async直接的爱恨情仇定义：setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。复制代码语法： setTimeout(code, milliseconds, param1, param2, …) setTimeout(function, milliseconds, param1, param2, …) 复制代码参数描述 code/function …
基于vue-cli理解render函数下面的方法都是基于vue-cli来阐述的，首先要理解如何通过props来进行父子组件之间传值，参考https://segmentfault.com/a/1190000010913794。更多详情查看官网： cn.vuejs.org/v2/guide/re… 父组件 <template> <div> <component :my-data="items" :is="currentView">&l…
React Hooks 深入不浅出这个标题可能不太好，但此文章确实不是一篇使用教程，而且也不会覆盖太多点，建议时间充裕的还是应该完整地看下官网文档。
较常用的Math方法及ES6中的扩展记录下与Math有关的常用方法，如：求最大值、最小值等，或者是保留几位数啥的 1.数据 {代码…} 2.求最大值、最小值 {代码…} 3.取整 {代码…} 4.求绝对值 {代码…} 5.次幂 {代码…} 6.去平方根 {代码…} 7….
帮你理清React的生命周期这是一个从印记中文 | react官方文档提取总结的，算是帮自己理清并且强化记忆React的生命周期，以便以后编写组件的时候能够有更清晰的思路。本文如有纰漏，欢迎指正
【20181129 前端开发日报】Vue一次性简洁明了引入所有公共组件；做一个好前端必须要知道的事——浏览器的线程与进程；从 0 到 1 再到 100, 搭建、编写、构建一个前端项目；webpack4 一点通；在2018年…详情→