前端每周学习分享--第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;
}
posted @ 2019-07-18 16:34  鱼桑燕子梁  阅读(343)  评论(0编辑  收藏  举报