前端每周学习分享--第6期
1.项目相关
1.1.gulp实现微信小程序项目工程化
这周主要就做了这一件事，上周分享里有gulp的基础知识，实际用的时候主要是要搭配配置各种gulp插件，而且在已有的一个小程序项目上验证，过程中也有许多出乎意料的坑点，各种被插件和环境折腾的配置工程师（😂）。
这块单独拎出来写了文章，项目也在github上。
项目地址：https://github.com/bluehat999/weapp-gulp
文章地址：https://www.cnblogs.com/mthz/p/weapp-gulp.html
2.ES6、ES7、ES8特性一锅炖
文章地址 ： https://juejin.im/post/5b9cb3336fb9a05d290ee47e#heading-26
这篇文章整理的比较全，有些东西忘记的时候可以照着目录翻一翻。
3.异步处理 promise async await
参考文章：https://segmentfault.com/a/1190000016788484#articleHeader14
文章讲解很详细。
先总结一下我知道的几种异步编程的方式：
- 回调函数
- 事件监听
- 发布订阅
- Promise
- async/await
Promise本身是一个状态机，存储三个状态（pending，resolved，rejected），一旦发出请求了，必须闭环，无法取消。
async/await是缺一不可的一对，是Promise的‘升级版’。
async必须声明的是一个function，await必须在这个async声明的异步函数内部使用，否则就会报错。await是在等待一个Promise的异步返回。
4.微信小程序运行流程看这篇就够了
文章地址 : https://juejin.im/post/5afd136551882542682e6ad7
微信小程序运行与渲染
IOS - JSCore 由 WKWebView 渲染
Android - X5 JSscore chrome53/57内核
DevTool - nwjs Chrome 内核
架构特点
WebView视图层与App Service逻辑层分处于两个线程，通过系统层的WeixinJsBridage进行通信。
编译特点
WXML被编译成JS的virtual dom，可局部更新dom
WXSS会编译成JS执行（WXSS相比于CSS支持@import）
打包时小程序根目录下所有文件都会被打包，记得清理其中无用文件。
小程序为何快
安装包缓存、分包加载、独立渲染线程、webview预加载、native组件
5.可迭代对象、迭代器与生成器
🌰可迭代对象
可迭代对象实现了@@iterator方法，即这个对象原型上有Symbol.iterator属性。这个属性是一个function。这是由可迭代协议约定的。
String、Array、TypedArray、Map 和 Set 都是内置可迭代对象，因为它们的原型对象都拥有一个 Symbol.iterator 方法。
自定义可迭代对象：
var myIterable = {
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
}
}
[...myIterable]; // [1, 2, 3]
用于可迭代对象的语法：
- for-of循环
- ...展开语法，如
[...'abc']; // ["a", "b", "c"] - yield* [可迭代对象]
- 解构赋值
🌰迭代器
迭代器协议定义一个迭代器对象要有一个next()方法，该方法返回一个含有value和done属性的对象。（形如{value:11,done:false}）
通常一个需要迭代的对象会同时实现迭代器协议和可迭代协议。
var myIterator = {
next: function() {
return {value}
},
[Symbol.iterator]: function() { return this }
}
🌰生成器
生成器对象是由一个 generator function 返回的,并且它符合可迭代协议和迭代器协议。
function* gen() {
yield 1;
yield 2;
yield 3;
}
let g = gen();
生成器的方法：
- Generator.prototype.next() ： 返回一个由 yield表达式生成的值。
- Generator.prototype.return() : 返回给定的值并结束生成器。
- Generator.prototype.throw() : 向生成器抛出一个错误。
🌰yield和yield*
yield 关键字用来暂停和恢复一个生成器函数。
语法：[rv] = yield [expression];
yield后面表达式的值会被设置为迭代器协议next()函数返回对象的value值。
yield* 表达式用于委托给另一个generator 或可迭代对象。
比如：
function* g1() {
yield 2;
yield 3;
yield 4;
}
function* g2() {
yield 1;
yield* g1();
yield 5;
}
