整理一些优雅的代码tips

  1. // vue src\core\vdom\patch.js createComponent
  2. let i = vnode.data
  3. if (isDef(i)) {
  4.   // ...利用一个变量，免去逐层的判空并且最后取到目标值
  5.   if (isDef(i = i.hook) && isDef(i = i.init)) {
  6.     i(vnode, false /* hydrating */)
  7.     // ...
  8.   }
  9.   // ..
  10. }
  1. //koa的koa-compose
  2. function compose (middleware) {
  3.   if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
  4.   for (const fn of middleware) {
  5.     if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
  6.   }
  8.   /**
  9.    * @param {Object} context
  10.    * @return {Promise}
  11.    * @api public
  12.    */
  14.   return function (context, next) {
  15.     // last called middleware #
  16.     let index = -1
  17.     return dispatch(0)
  18.     function dispatch (i) {
  19.       if (i <= index) return Promise.reject(new Error('next() called multiple times'))
  20.       index = i
  21.       let fn = middleware[i]
  22.       if (i === middleware.length) fn = next
  23.       //执行到最外层的next为undefined，返回一个成功的promise。
  24.       if (!fn) return Promise.resolve()
  25.       try {
  26.         /*fn是middleware,大概格式为 
  27.         app.use(async(ctx,next)=>{
  28.             ...
  29.             await next();
  30.         如上async返回promise，被Promise.resolve包裹后立刻返回一个pending中的Promise，但是结果要一直执行到最后一个middleware
  31.         执行完，返回空Promise.resolve()之后，逐层返回到最外层的promise改变状态为resolved。
  33.         */
  34.        这里fn要使用返回thenable的写法，否则会出现链式调用返回普通方法，外层直接resolve的情况。
  35.         return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
  36.       } catch (err) {
  37.         return Promise.reject(err)
  38.       }
  39.     }
  40.   }
  41. }

十进制转二进制理解，除以2的阶是个十进制内最大的2次幂

image.png
1101里 12^3，即13以内最大的是8；第二个1代表着除以22的时候

Protocols 和 Extensions

弱化继承的替代方案，https://juejin.cn/post/6870781128632664071
https://www.jianshu.com/p/783df05a9b59

可视化数据结构

可视化数据结构，把它画出来，在你的脑海中可视化，可以更好地帮助你直观地理解它。（推荐两个数据结构可视化网站：Data Structure Visualization 和 VisuAlgo - visualising data structures and algorithms through animation）
节选来源：https://www.zhihu.com/question/36149122/answer/66366304