前端每周学习分享--第6期

it2022-05-05  80

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

文章讲解很详细。

先总结一下我知道的几种异步编程的方式:

回调函数事件监听发布订阅Promiseasync/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; }

转载于:https://www.cnblogs.com/mthz/p/week6.html


最新回复(0)