Js

正则

/^(xx)$/
xx 匹配添加首尾,作用是限制全局,相当于用 xx 从头到尾匹配。

[^xyz]
image.png
反向与范围一起使用的语法比较反常理,估计是反向会与头符号有冲突,所以这样设计了,会容易带来理解混淆,需要注意。

异步拉平

有这样一个异步流程:

  1. let $ = {
  2. get(url, callback) {
  3. setTimeout(() => {
  4. callback(url.substring(5));
  5. }, 500);
  6. }
  7. };
  8. $.get(url, callback)

thunk法

generator形成回调平行结构,柯里化拆分异步传参,递归控制执行(generator自执行)。
一个像 $.get(url, callback) 这样的异步流程结构,构成部分就是 fn 操作本身,url等外围参数,callback回调函数,可以进行坷里化,分离开外围参数与回调的传递,延迟callback的传递

  1. // fn(arg1, arg2, arg3, ..., callback)
  2. const thunk = function(fn) {
  3. return function (...args) {
  4. return function (callback) {
  5. return fn.call(this, ...args, callback);
  6. }
  7. };
  8. };
  9. // 先接受fn返回坷里化后的流程
  10. let getThunk = thunk($.get);

创造平行结构(同步化),用于描述流程:

  1. // generator 异步逻辑同步化
  2. function* asyncAsSync() {
  3. let result1 = yield getThunk('step/1'); // 传参,
  4. let result2 = yield getThunk(`step/2/${result1}`);
  5. let result3 = yield getThunk(`step/3/${result2}`);
  6. }

自执行的递归结构,第一次执行没有回值,通过递归调用生成器具next来完成执行:
image.png

  1. function co(fn) {
  2. var gen = fn();
  3. function nextCallBack(data) {
  4. var result = gen.next(data); // 传参获取完成,result.value 为坷里最后一层,等待传入回调,data为 上一次回调 传入的值,也就是上一次异步执行后承接给下一步的值
  5. if (result.done) return;
  6. result.value(nextCallBack); // 回调传入异步执行,异步执行完会执行传入的当前函数,nextCallBack(breforeCallback(beforeRes)),递归进入下一行,继续上述操作
  7. }
  8. nextCallBack();
  9. }
  10. co(asyncAsSync);

Promise

古老的写法,较难懂,配合 Promise 的结构就好懂很多
因为 Promise 的 resolve,天生提供了 callback,只要将异步结果传递给 resolve 就可以进入 then,也就是下一步操作。之前需要将异步坷里化,现在只需要 传递外围参数,构造 Promise 结构就行了。

  1. function promiseGet(url) {
  2. return new Promise((resolve, _) => {
  3. $.get(url, resolve);
  4. });
  5. }
  6. function * asyncAsSync() {
  7. let result1 = yield promiseGet('step/1');
  8. let result2 = yield promiseGet(`step/2/${result1}`);
  9. let result3 = yield promiseGet(`step/3/${result2}`);
  10. }
  11. function co(fn) {
  12. var g = fn();
  13. function nextCallBack(data){
  14. // result的值为Promise对象
  15. var result = g.next(data);
  16. if (result.done) return result.value;
  17. result.value.then(function(data){
  18. // Promise的then回调中,递归执行nextCallBack(data),传递回调及执行结果
  19. nextCallBack(data);
  20. });
  21. }
  22. co(asyncAsSync)