// js调用
jsApi.callNative("js调用了android方法");

function createIframeCall(url) {
  setTimeout(function() {
    var iframe = document.createElement('iframe');
    iframe.style.width = '1px';
    iframe.style.height = '1px';
    iframe.style.display = 'none';
    iframe.src = url;
    document.body.appendChild(iframe);
    setTimeout(function() {
        document.body.removeChild(iframe);
    }, 100);
  }, 0);
}

function call(funcName, data, cb) {
  const callbackId = `callback_${uid}_${Date.now()}`;
  if (cb) {
    window[callbackId] = cb;
  }
  createIframeCall(`weixin://invoke?method=${funcName}&data=${data}&callbackId=${callbackId}`);
}

const data = encodeURIComponent(JSON.stringify({title:"我是标题"}));
call('openWebView', data, () => {});

window.JSBridge.showToast = function({ data }) {
  return new Promise(resolve => {
    window.JSBridge.invoke('showToast', data, resolve);
  });
};

window.JSBridge.showToast({
  data: { title: 1 },
}).then((data) => {
  console.log('调用toast', data);
})

// 类似这样
while (true) {
    宏任务队列.shift()
    微任务队列全部任务()
    UI render() // 这里不一定每次loop都会render
}

while (true) {
  loop.forEach((阶段) => {
    阶段全部任务()
    nextTick全部任务()
    microTask全部任务()
  })
  loop = loop.next
}

// timeout_vs_immediate.js
setTimeout(() => {
    console.log('timeout');
}, 0);

setImmediate(() => {
    console.log('immediate');
});

// terminal
$ node timeout_vs_immediate.js
timeout
immediate

$ node timeout_vs_immediate.js
immediate
timeout

// timeout_vs_immediate.js
const fs = require('fs');

fs.readFile(__filename, () => {
    setTimeout(() => {
        console.log('timeout');
    }, 0);
    setImmediate(() => {
        console.log('immediate');
    });
});

// terminal
$ node timeout_vs_immediate.js
immediate
timeout

$ node timeout_vs_immediate.js
immediate
timeout

function withRouter(Component) {
  const C = props => {
    const { wrappedComponentRef, ...remainingProps } = props;

    // 使用Route包裹，然后通过children属性肯定会调用的特性来把routeComponentProps传入给
    // 业务组件
    // wrappedComponentRef 用来接收ref函数
    return (
      <Route
        children={routeComponentProps => (
          <Component
            {...remainingProps}
            {...routeComponentProps}
            ref={wrappedComponentRef}
          />
        )}
      />
    );
  };

  // 用来不丢失静态属性和方法
  return hoistStatics(C, Component);
}

var a = [0, 1, 2]
a.length = 10
// 只是显示的给length赋值，索引3-9的对应的value也会赋值undefined
// 但是索引3-9的key都是没有值的
// 我们可以用for-in打印，只会打印0,1,2
for (var key in a) {
  console.log(key) // 0,1,2
}

Object.defineProperty(array, indexOfItem, {
  enumerable: true,
  configurable: true,
  get() { },
  set(newVal) { }
})

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

/**
 * Intercept mutating methods and emit events
 */
;[
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
.forEach(function (method) {
  // cache original method
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    // notify change
    ob.dep.notify()
    return result
  })
})

  if (inserted) ob.observeArray(inserted)

  ob.dep.notify()

// 流程
// chunk -> module -> loader -> dependency -> template
#!/usr/bin/env node
const fs = require('fs');
const path = require('path');
const ejs = require('ejs');
const entry = process.argv[2] || './index.js';
const output = './mywebpack-output.js';
const modules = [];

function styleLoader(source) {
  const styleTemplate = `const style = document.createElement('style');
  style.innerHTML = ${JSON.stringify(source).replace(/\\n/g, '')};
  document.head.appendChild(style);`
  return styleTemplate;
}
function getDep(result) {
  result.replace(/require\(['"](.+?)['"]\)/g, (...args) => {
    if (!args) return;
    const script = args[1];
    let content = fs.readFileSync(path.join('./src', script), 'utf-8');
    if (/\.css$/.test(script)) {
      content = styleLoader(content);
    }
    if (modules.find((d) => d.script === script)) {
      return;
    }
    modules.push({
      script,
      content,
    });
    getDep(content);
  });
}

const result = fs.readFileSync(path.join('./src', entry), 'utf-8');
getDep(result);

const template = `(function(modules) {
	function require(moduleId) {
		var module = {
			exports: {}
		};
		modules[moduleId](module, module.exports, require);
		return module.exports;
	}
	return require(\`<%-entry%>\`);
})
({
  "<%-entry%>":
  (function(module, exports, require) {
    eval(\`<%-result%>\`);
    }),
  <%for(let i = 0; i < modules.length; i += 1) {
    let { script, content } = modules[i];%>
    "<%-script%>": 
    (function(module, exports, require) {
      eval(\`<%-content%>\`);
    }),
  <%}%>
});`;

const outContent = ejs.render(template, {
  entry,
  result,
  modules,
});

// console.log(outContent);

fs.writeFileSync(path.join('./dist', output), outContent);

// 首先读取入口文件，然后对入口文件进行依赖解析，如果解析到有require函数的话，再次进行文件读取，返回内容，放入modules数组中备用，
// 然后把主入口文件首先用模板渲染完成以后，再去对modules数组，进行循环渲染
// 其中匹配文件的时候如果遇到了css文件，那么使用style loader进行处理




// (function main(modules) {
//   function require(moduleId) {
//     var module = {
// 			exports: {}
// 		};
//     modules[moduleId].call(module.exports, module, module.exports, require);
//     return module.exports;
//   }
//   require('./index.js');
// })({
//   './index.js': (() => {
//     eval("alert(1)")
//   })
// })

const tmpError = window.onerror;
window.onerror = function (...args) {
  // 如果有业务事件
  if (tmpError) tmpError.call(args);
  console.log('error is catch');
  // 需要return false，不能return true; 会让错误出现在浏览器控制台
  return false
}

window.addEventListener('error', (e) => {
  // JS语法报错这里也会被捕获，需要过滤掉
  const { type, target } = e;
  if (target === window) return;
  // some-code
}, true);

const observer = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    if (mutation.type === 'childList') {
      mutation.addedNodes.forEach((target) => {
        if (target.nodeName !== 'IMG') return;
          on(target);
          waitMap[target.src] = {
            start: Date.now(),
          };
      });
    }
  });
});
observer.observe(document.querySelector('body'), { subtree: true, childList: true });
function on(el) {
  el.addEventListener('load', handleSuccess);
}
function handleSuccess({ target }) {
  if (!waitMap[target.src]) return;
  successs.push({
    src: target.src,
    end: Date.now(),
    start: waitMap[target.src].start,
    duration: Date.now() - waitMap[target.src].start,
  });
  console.log(waitMap, successs);
  this.removeEventListener('load', handleSuccess);
}

document.querySelectorAll('img').forEach((img) => {
  waitMap[img.src] = {
    start: Date.now(),
  };
  on(img);
});

function hookfun(fun) {
  return function () {
    var args = [].slice.call(arguments)
    if (funs[fun] && funs[fun].call(this, args, this.xhr)) {
      return;
    }
    return this.xhr[fun].apply(this.xhr, args);
  }
}

if (!window.fetch) return;
// 保留原先的fetch
const tmpFetch = fetch;
window.fetch = function rewriteFetch(...args) {
    // some code
    return tmpFetch.apply(this, args)
      .then(res => res)
      .catch(err => err);
  };

async function f1(ctx, next) {
  console.log(1);
  await next();
  console.log(6);
}

async function f2(ctx, next) {
  console.log(2);
  await next();
  console.log(5);
}

async function f3(ctx, next) {
  console.log(3);
  await next();
  console.log(4);
}

function compose(mids) {
  return function(ctx, next) {
    let index = -1;
    return dispatch(0);
    function dispatch(i) {
      index = i;
      let fn = mids[i];
      if (!fn) return Promise.resolve();
      const result = fn(ctx, dispatch.bind(null, i + 1));
      return Promise.resolve(result);
    }
  }
}

compose([f1, f2, f3])(); // 1 2 3 4 5 6

// h函数
var VNode = require('./vnode');
module.exports = function h(sel, b, c) {
  var data = {}, children, text, i;
  if (is.array(children)) {
    for (i = 0; i < children.length; ++i) {
      if (is.primitive(children[i])) children[i] = VNode(undefined, undefined, undefined, children[i]);
    }
  }
  return VNode(sel, data, children, text, undefined);
};
// vnode函数
module.exports = function(sel, data, children, text, elm) {
  var key = data === undefined ? undefined : data.key;
  return {sel: sel, data: data, children: children,
          text: text, elm: elm, key: key};
};
// 简化版updateChildren函数
function updateChildren(vnode, newVnode) {
  const children = vnode.children;
  const newChildren = newVnode.children;

  children.forEach((child, index) => {
    const newChild = newChildren[index];
    if (!newChild) return;
    if (child.tag === newChild.tag) {
      updateChildren(child, newChild);
    } else {
      replaceNode(child, newChild);
    }
  })
}

/**
  * 比较新旧 children 并更新
  * @param  {Element} parentElm          父 dom，children 对应的 dom 将要挂载的
  * @param  {Array} oldCh              旧 children，vnode 数组
  * @param  {Array} newCh              新 children，vnode 数组
  * @param  {Array} insertedVnodeQueue 用于存储将要插入的 dom 节点
  * @return {Undefined}
  */
function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) {
  let oldStartIdx = 0, newStartIdx = 0
  let oldEndIdx = oldCh.length - 1
  let oldStartVnode = oldCh[0]
  let oldEndVnode = oldCh[oldEndIdx]
  let newEndIdx = newCh.length - 1
  let newStartVnode = newCh[0]
  let newEndVnode = newCh[newEndIdx]
  let oldKeyToIdx
  let idxInOld
  let elmToMove
  let before

  // 遍历 oldCh 和 newCh 来比较和更新
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    // 1⃣️ 首先检查 4 种情况，保证 oldStart/oldEnd/newStart/newEnd
    // 这 4 个 vnode 非空，左侧的 vnode 为空就右移下标，右侧的 vnode 为空就左移 下标。
    if (oldStartVnode == null) {
      oldStartVnode = oldCh[++oldStartIdx]
    } else if (oldEndVnode == null) {
      oldEndVnode = oldCh[--oldEndIdx]
    } else if (newStartVnode == null) {
      newStartVnode = newCh[++newStartIdx]
    } else if (newEndVnode == null) {
      newEndVnode = newCh[--newEndIdx]
    }
    /**
      * 2⃣️ 然后 oldStartVnode/oldEndVnode/newStartVnode/newEndVnode 两两比较，
      * 对有相同 vnode 的 4 种情况执行对应的 patch 逻辑。
      * - 如果同 start 或同 end 的两个 vnode 是相同的（情况 1 和 2），
      *   说明不用移动实际 dom，直接更新 dom 属性／children 即可；
      * - 如果 start 和 end 两个 vnode 相同（情况 3 和 4），
      *   那说明发生了 vnode 的移动，同理我们也要移动 dom。
      */
    // 1. 如果 oldStartVnode 和 newStartVnode 相同（key相同），执行 patch
    else if (isSameVnode(oldStartVnode, newStartVnode)) {
      // 不需要移动 dom
      patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
      oldStartVnode = oldCh[++oldStartIdx]
      newStartVnode = newCh[++newStartIdx]
    }
    // 2. 如果 oldEndVnode 和 newEndVnode 相同，执行 patch
    else if (isSameVnode(oldEndVnode, newEndVnode)) {
      // 不需要移动 dom
      patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    }
    // 3. 如果 oldStartVnode 和 newEndVnode 相同，执行 patch
    else if (isSameVnode(oldStartVnode, newEndVnode)) {
      patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
      // 把获得更新后的 (oldStartVnode/newEndVnode) 的 dom 右移，移动到
      // oldEndVnode 对应的 dom 的右边。为什么这么右移？
      // （1）oldStartVnode 和 newEndVnode 相同，显然是 vnode 右移了。
      // （2）若 while 循环刚开始，那移到 oldEndVnode.elm 右边就是最右边，是合理的；
      // （3）若循环不是刚开始，因为比较过程是两头向中间，那么两头的 dom 的位置已经是
      //     合理的了，移动到 oldEndVnode.elm 右边是正确的位置；
      // （4）记住，oldVnode 和 vnode 是相同的才 patch，且 oldVnode 自己对应的 dom
      //     总是已经存在的，vnode 的 dom 是不存在的，直接复用 oldVnode 对应的 dom。
      api.insertBefore(parentElm, oldStartVnode.elm, api.nextSibling(oldEndVnode.elm))
      oldStartVnode = oldCh[++oldStartIdx]
      newEndVnode = newCh[--newEndIdx]
    }
    // 4. 如果 oldEndVnode 和 newStartVnode 相同，执行 patch
    else if (isSameVnode(oldEndVnode, newStartVnode)) {
      patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
      // 这里是左移更新后的 dom，原因参考上面的右移。
      api.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
      oldEndVnode = oldCh[--oldEndIdx]
      newStartVnode = newCh[++newStartIdx]
    }

    // 3⃣️ 最后一种情况：4 个 vnode 都不相同，那么我们就要
    // 1. 从 oldCh 数组建立 key --> index 的 map。
    // 2. 只处理 newStartVnode （简化逻辑，有循环我们最终还是会处理到所有 vnode），
    //    以它的 key 从上面的 map 里拿到 index；
    // 3. 如果 index 存在，那么说明有对应的 old vnode，patch 就好了；
    // 4. 如果 index 不存在，那么说明 newStartVnode 是全新的 vnode，直接
    //    创建对应的 dom 并插入。
    else {
      // 如果 oldKeyToIdx 不存在，创建 old children 中 vnode 的 key 到 index 的
      // 映射，方便我们之后通过 key 去拿下标。
      if (oldKeyToIdx === undefined) {
        oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
      }
      // 尝试通过 newStartVnode 的 key 去拿下标
      idxInOld = oldKeyToIdx[newStartVnode.key]
      // 下标不存在，说明 newStartVnode 是全新的 vnode。
      if (idxInOld == null) {
        // 那么为 newStartVnode 创建 dom 并插入到 oldStartVnode.elm 的前面。
        api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm)
        newStartVnode = newCh[++newStartIdx]
      }
      // 下标存在，说明 old children 中有相同 key 的 vnode，
      else {
        elmToMove = oldCh[idxInOld]
        // 如果 type 不同，没办法，只能创建新 dom；
        if (elmToMove.type !== newStartVnode.type) {
          api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm)
        }
        // type 相同（且key相同），那么说明是相同的 vnode，执行 patch。
        else {
          patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)
          oldCh[idxInOld] = undefined
          api.insertBefore(parentElm, elmToMove.elm, oldStartVnode.elm)
        }
        newStartVnode = newCh[++newStartIdx]
      }
    }
  }

  // 上面的循环结束后（循环条件有两个），处理可能的未处理到的 vnode。
  // 如果是 new vnodes 里有未处理的（oldStartIdx > oldEndIdx
  // 说明 old vnodes 先处理完毕）
  if (oldStartIdx > oldEndIdx) {
    before = newCh[newEndIdx+1] == null ? null : newCh[newEndIdx+1].elm
    addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
  }
  // 相反，如果 old vnodes 有未处理的，删除 （为处理 vnodes 对应的） 多余的 dom。
  else if (newStartIdx > newEndIdx) {
    removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
  }
}

function bucketSort(arr, n) {
    const bucket = Array.from(new Array(n)).map(() => 0);
    for (let i = 0; i <= arr.length; i += 1) {
      bucket[arr[i]] += 1;
    }
    const reslut = bucket.map((item, index) => item ? index : 0).filter(item => item);
    return reslut;
  }

  /* 基准是6
     i                           j
     6, 1, 2, 7, 9, 3, 4, 5, 10, 8
     i                    j
     6, 1, 2, 7, 9, 3, 4, 5, 10, 8
              i           j
     6, 1, 2, 7, 9, 3, 4, 5, 10, 8
              i           j
     6, 1, 2, 5, 9, 3, 4, 7, 10, 8
                 i     j   
     6, 1, 2, 5, 9, 3, 4, 7, 10, 8
                 i     j   
     6, 1, 2, 5, 4, 3, 9, 7, 10, 8
                    ij  
     6, 1, 2, 5, 4, 3, 9, 7, 10, 8
                    ij
     3, 1, 2, 5, 4, 6, 9, 7, 10, 8

     left, i - 1
     i           j
     3, 1, 2, 5, 4
           ij   
     3, 1, 2, 5, 4
           ij     
     2, 5, 3, 1, 4

     left, i - 1
     i  j
     2, 5
     
     right, i + 1
     i  j   
     1, 4

  */
  
  function quickSort(left, right, arr) {
    let i, j, t, temp;
    if (left > right) {
      return;
    }
    temp = arr[left];
    i = left;
    j = right;
    // i 往右边移动 j往左边移动 直到两个碰头
    while(i !== j) {
      // j往右移动，寻找比基准值temp小的值 并且ij两个不能相遇
      while(arr[j] >= temp && i < j) {
        j--;
      }
      // i往做移动，寻找比基准值temp大的值 并且ij两个不能相遇
      while(arr[i] <= temp && i < j) {
        i++;
      }
      // 如果两位哨兵还没相遇，那么进行相互交换值
      if (i < j) {
        t = arr[i];
        arr[i] = arr[j];
        arr[j] = t;
      }
    }
    // 相遇了以后把基准值和当前ij所在的位置的值交换
    arr[left] = arr[i];
    arr[i] = temp;

    // 然后根据这个基准值分成两个数据 分别进行之前的操作
    quickSort(left, i - 1, arr);
    quickSort(i + 1, right, arr);
  }
  var arr = [6, 1, 2, 7, 9, 3, 4, 5, 10, 8];
  
  quickSort(0, arr.length - 1, arr);

  console.log(arr);

function bubbleSort(arr) {
    const n = arr.length;
    for (var i = 0; i <= n - 1; i++) {
      for (let j = 0; j <= n - i; j++) {
        if (arr[j] < arr[j + 1]) {
          var t = arr[j];
          arr[j] = arr[j + 1];
          arr[j + 1] = t;
        }
      }
    }
    console.log(arr);
  }

function sort(array) {
  for (let i = array.length - 1; i > 0; i -= 1) {
    let exchange = false;
    for (let j = 0; j < i; j++) {
      if (array[j] > array[j + 1]) {
        swap(array, j, j + 1);
        exchange = true;
      }
    }
    if (!exchange) return;
  }
}

const array = [9, 1, 4, 6, 7];

sort(array);
console.log(array);

function swap(array, i, j) {
  const tmp = array[i];
  array[i] = array[j];
  array[j] = tmp;
}

export function handleError (err: Error, vm: any, info: string) {
/**生命周期错误，暂时忽略**/
  if (vm) {
    let cur = vm
    while ((cur = cur.$parent)) {
      const hooks = cur.$options.errorCaptured
      if (hooks) {
        for (let i = 0; i < hooks.length; i++) {
          try {
            const capture = hooks[i].call(cur, err, vm, info) === false
            if (capture) return
          } catch (e) {
            globalHandleError(e, cur, 'errorCaptured hook')
          }
        }
      }
    }
  }
/**生命周期错误，暂时忽略**/
  globalHandleError(err, vm, info)
}

function globalHandleError (err, vm, info) {
 // 根据用户是否定义了errorHandler函数。
  if (config.errorHandler) {
    try {
      return config.errorHandler.call(null, err, vm, info)
    } catch (e) {
      logError(e, null, 'config.errorHandler')
    }
  }
  // 这里就是如果有conosle对象就调用，否则就抛出error
  logError(err, vm, info)
}

/* 这里通过不停的寻找父级和是否有errorCaptured方法来进行调用，
如果errorCaptured返回false那么停止往上查找，
如果这里报错，直接调用全局的errorHandler函数。
**注意**：如果这里停止向上了，那么全局函数errorHandler无法被调用 */
 if (vm) {
    let cur = vm
    while ((cur = cur.$parent)) {
      const hooks = cur.$options.errorCaptured
      if (hooks) {
        for (let i = 0; i < hooks.length; i++) {
          try {
            const capture = hooks[i].call(cur, err, vm, info) === false
            if (capture) return
          } catch (e) {
            globalHandleError(e, cur, 'errorCaptured hook')
          }
        }
      }
    }
  }

module.exports = postcss.plugin(PLUGIN_NAME, (opts = {}) => {
  // 传入用户的write json方法或者使用默认的json方法，默认为在当前css的目录下写入一个同名的json文件
  const getJSON = opts.getJSON || saveJSON;
  return async (css, result) => {
    // 传入的源css文件地址
    const inputFile     = css.source.input.file;
    // 过滤掉本身插件
    const resultPlugins = result.processor.plugins.filter(isResultPlugin);
    /**
     * 返回一个插件列表
     * 有两种情况local 和 GLOBAL
     * 如下
     * const plugins = {
        [behaviours.LOCAL]: [
          postcss-modules-values
          postcss-modules-local-by-default,
          postcss-modules-extract-imports,
          postcss-modules-scope,
        ],
        [behaviours.GLOBAL]: [
          postcss-modules-values
          postcss-modules-extract-imports,
          postcss-modules-scope,
        ],
      };
      具体功能后面讲
     */
    const pluginList    = getDefaultPluginsList(opts, inputFile);
    // 组成一个plugin列表, 顺序从前往后
    // postcss-modules-values
    // postcss-modules-local-by-default,
    // postcss-modules-extract-imports,
    // postcss-modules-scope,
    // 传入给postcss的其他plugin
    // 以上顺序
    const plugins       = [...pluginList, ...resultPlugins];
    // 使用用户传入的loader或者默认的FileSystemLoader，生成loader实例
    // 这个loader需要去读取到源css文件的内容
    const loader        = getLoader(opts, plugins);
    // Parser内置了三个pulgin fetchAllImports， linkImportedSymbols， extractExports
    const parser        = new Parser(loader.fetch.bind(loader));
    // 这里一共有7 + N个plugin, 进行一系列的语法处理
    await postcss([...plugins, parser.plugin]).process(css, { from: inputFile });

    // finalSource是一个计算属性，可以从缓存的loader获取处理完毕的css代码
    const out = loader.finalSource;
    // 插入到css中
    if (out) css.prepend(out);

    // getJSON may return a promise
    // exportTokens 为一个json，内容是css处理完成以后的映射内容
    return getJSON(css.source.input.file, parser.exportTokens, result.opts.to);
  };
});

let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();

iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }

let iterable = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3,
  [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
  console.log(item); // 'a', 'b', 'c'
}

let obj = {
  data: [ 'hello', 'world' ],
  [Symbol.iterator]() {
    const self = this;
    let index = 0;
    return {
      next() {
        if (index < self.data.length) {
          return {
            value: self.data[index++],
            done: false
          };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};
console.log(...obj); // hello, world

for (var key of Object.keys(someObject)) {
   console.log(key + ': ' + someObject[key]);
 }

function* entries(obj) {
   for (let key of Object.keys(obj)) {
     yield [key, obj[key]];
   }
 }

 for (let [key, value] of entries(obj)) {
   console.log(key, '->', value);
 }

const computed = '9+(3-1)*3+10/2/2/2+2*6+(7*7)'
  .replace(/\s*/g, '')
  .replace(/(\d+)/g, '$1 ')
  .replace(/(\+|\(|\)|\*|\-|\/)/g, '$1 ')
  .trim();

const weightMap = {
  '+': 1,
  '-': 1,
  '*': 2,
  '(': 1,
  '/': 2,
};
const computedArray = computed.split(' ');

/**
 * 规则：从左到右遍历中缀表达式的每个数字和符号，
 * 若是数字就输出，即成为后缀表达式的一部分；
 * 若是符号，则判断其与栈顶符号的优先级，
 * 是右括号或优先级低于找顶符号（乘除优先加减）则栈顶元素依次出找并输出，
 * 并将当前符号进栈，一直到最终输出后缀表达式为止。
**/
function postfix(computedArray) {
    const S1 = [];
    const S2 = [];
    for (let index = 0; index < computedArray.length; index++) {
      const value = computedArray[index];
      // 如果是右括号那么去匹配左括号之间的符号
      if (value === ')') {
        // 对S2进行出栈,直到碰见"("
        let element;
        while (element !== '(') {
          element = S2.shift();
          S1.push(element)
        }
      }
      const symbolWeight = weightMap[value];
      if (symbolWeight) {
        // 如果入栈的符号比栈顶的符号的权重要低的话，那么把这个栈清空放入主栈里，并且把这个符号放入符号栈内
        while(
          symbolWeight <= weightMap[S2[0]] &&
          S2[0] !== '(' &&
          value !== '('
        ) {
          S1.push(S2.shift());
        }
        S2.unshift(value);
      } else {
        S1.push(value);
      }
    }
    return [...S1, ...S2].filter((item) => item !== ')' && item !== '(');
  }


/**
* 从左至右扫描表达式，遇到数字时，将数字压入堆栈，遇到运算符时，弹出栈顶的两个数，
* 用运算符对它们做相应的计算（次栈顶元素 op 栈顶元素），并将结果入栈；
* 重复上述过程直到表达式最右端，最后运算得出的值即为表达式的结果。
**/
function calc(array) {
  const stack = [];
  for (let index = 0; index < array.length; index++) {
    const value = array[index];
    const symbolWeight = weightMap[value];
    // 如果栈里面有两个以上包括两个的数字，那么把他们取出来，进行运算，然后放回去
    if (symbolWeight && stack.length >= 2) {
      const right = stack.shift();
      const left = stack.shift();
      stack.unshift(Function(`return ${left} ${value} ${right}`)());
    } else {
      stack.unshift(+value);
    }
  }
  return stack[0];
}

console.log(calc(postfix(computedArray))) // 77.25
console.log(Function(`return ${computed}`)()); // 77.25

<child @select="handleSelect($event)" @click.native.prevent="handleNativeClick($event)"/>

"{on:{"select":function($event){handleSelect($event)}},nativeOn:{"click":function($event){$event.preventDefault();handleNativeClick($event)}},"

const modifierCode: { [key: string]: string } = {
  stop: '$event.stopPropagation();',
  prevent: '$event.preventDefault();',
  self: genGuard(`$event.target !== $event.currentTarget`),
  ctrl: genGuard(`!$event.ctrlKey`),
  shift: genGuard(`!$event.shiftKey`),
  alt: genGuard(`!$event.altKey`),
  meta: genGuard(`!$event.metaKey`),
  left: genGuard(`'button' in $event && $event.button !== 0`),
  middle: genGuard(`'button' in $event && $event.button !== 1`),
  right: genGuard(`'button' in $event && $event.button !== 2`)
}

if (isDef(data)) {
  invokeCreateHooks(vnode, insertedVnodeQueue)
}

export function updateListeners (on, oldOn, add, remove, vm) {
  let name, cur, old, event
  for (name in on) {
    cur = on[name]
    old = oldOn[name]
    // 新添加事件
    if (isUndef(old)) {
      if (isUndef(cur.fns)) {
        cur = on[name] = createFnInvoker(cur)
      }
      add(event.name, cur, event.once, event.capture, event.passive)
    } else if (cur !== old) {
      // 对老事件进行更新
      old.fns = cur
      on[name] = old
    }
  }
  // 删除已经被去掉的事件
  for (name in oldOn) {
    if (isUndef(on[name])) {
      remove(event.name, oldOn[name], event.capture)
    }
  }
}

function add (event, handler, once, capture, passive) {
  if (once) {
    const oldHandler = handler
    const _target = target
    // 如果是once那么调用完毕以后，调用remove来删除事件
    handler = function () {
      oldHandler.apply(null, arguments)
      remove(event, handler, capture, _target)
    }
  }
  target.addEventListener(
    event,
    handler,
    supportsPassive
      ? { capture, passive }
      : capture
  )
}

function remove (event, handler, capture, _target) {
  (_target || target).removeEventListener(event, handler, capture)
}

export function initEvents (vm: Component) {
  vm._events = Object.create(null)
  vm._hasHookEvent = false
  const listeners = vm.$options._parentListeners
  if (listeners) {
    updateListeners(listeners, oldListeners || {}, add, remove, vm)
  }
}

function add (event, fn, once) {
  if (once) {
    target.$once(event, fn)
  } else {
    target.$on(event, fn)
  }
}

function remove (event, fn) {
  target.$off(event, fn)
}

Vue.prototype.$on = function (event, fn) {
  const vm = this
  (vm._events[event] || (vm._events[event] = [])).push(fn)
  return vm
}

Vue.prototype.$once = function (event, fn) {
  const vm = this
  function on () {
    // 首先进行删除，然后执行函数
    vm.$off(event, on)
    fn.apply(vm, arguments)
  }
  // 这里的fn是在删除的时候会去进行对比
  on.fn = fn
  vm.$on(event, on)
  return vm
}

Vue.prototype.$off = function (event, fn) {
  const vm = this
  // 清空全部
  if (arguments.length === 1) {
    vm._events[event] = null
    return vm
  }
  // 去和所有的事件进行对比，找到了就删除
  const cbs = vm._events[event]
  if (fn) {
    // specific handler
    let cb
    let i = cbs.length
    while (i--) {
      cb = cbs[i]
      if (cb === fn || cb.fn === fn) {
        cbs.splice(i, 1)
        break
      }
    }
  }
  return vm
}

Vue.prototype.$emit = function (event) {
  const vm = this
  let cbs = vm._events[event]
  if (cbs) {
    const args = toArray(arguments, 1)
    for (let i = 0, l = cbs.length; i < l; i++) {
      try {
        // 这里是用户传入的函数，所有需要捕获错误
        cbs[i].apply(vm, args)
      } catch (e) {
        handleError(e, vm, `event handler for "${event}"`)
      }
    }
  }
  return vm
}

  if (options.changeOrigin) {
    outgoing.headers.host =
      required(outgoing.port, options[forward || 'target'].protocol) && !hasPort(outgoing.host)
        ? outgoing.host + ':' + outgoing.port
        : outgoing.host;
  }

  config.headers.host = this.ctx.request.header.host;
  responseData = await axios.request(config);

// 失效
"plugins": [
    "@babel/plugin-transform-modules-commonjs",
    ["import", {
      "libraryName": "antd",
      "style": "css"
    }],
  ],

// 有效
"plugins": [
    ["import", {
      "libraryName": "antd",
      "style": "css"
    }],
  "@babel/plugin-transform-modules-commonjs",
  ],

React. forwardRef((props, ref) => <p {...props} ref={ref} >jsx</p>)

customRequest={this.handleUpload}

  handleUpload = ({ file }) => {
    const { fileList } = this.state;
    upload(file)
      .then((url) => {
        this.setState({
          fileList: [...(fileList || []), {
            uid: Math.random(),
            url,
            name: file.name,
            type: file.type,
            size: file.size,
            lastModified: file.lastModified,
          }],
        }, this.handleSync);
      })
      .catch((error) => {
        message.error(isDev ? error.message : '上传图片失败，请稍后再试');
      });
  }

[{
 id: 1,
 children: [{
   id: 1-1
 }, {
   id: 1-2
 }]
}]

[{
 id: 1,
}, {
 id: 1-1,
}, {
 id: 1-2,
}]

import _ from 'lodash'
import isArray from 'lodash/isArray'
import { toString } from 'lodash'

isArray([])
_.add(1, 2)
toString(1)
_.add(1, 2)
isArray([1])

import isArray from 'lodash/isArray';
import toString from 'lodash/toString';

isArray([]);
import add from 'lodash/add';
add(1, 2)

toString(1);
add(1, 2)

isArray([1]);

import _ from 'lodash'
或
import loadsh from 'lodash'

import _ from 'lodash'

_.add(1, 2)

static/js/vendor.6b317cc799badf6ad864.js    71.1 kB       0  [emitted]  vendor

import add from 'lodash/add'
add(1, 2)

static/js/vendor.d9f1fb9269405aa51217.js    2.24 kB       0  [emitted]  vendor

npm i --save-dev babel-plugin-lodash-extract

  npm run test // unit test
  npm run debug // development debug
  npm run compile // development compile
  npm run example // run example

module.exports = ({ types: t }) => {
  return {
    visitor: {
      // ...some code
    },
  };
}

const a = 1 + 2;

const b = 2 - 3;

module.exports = ({ types: t }) => {
  return {
    visitor: {
      Identifier(path) {
        if (path.node.name === 'a') {
          path.replaceWith(t.Identifier('b'));
        }
      },
    },
  };
}

// 在package.json里面加入 "example": "babel --plugins ../example/index.js ./example/example.js"
// 运行 npm run example
// 输出 const b = 1 + 2;

module.exports = ({ types: t }) => {
  return {
    visitor: {
      Identifier(path) {
        ...
      },
      BinaryExpression(path) {
        if (path.node.operator === '+') {
          const left = t.numericLiteral(2);
          const right = t.numericLiteral(3);
          path.replaceWith(t.binaryExpression('-', left, right));
        }
      }
    },
  };
}
// 输出 const b = 2 - 3;
// 目标完成

module.exports = ({ types: t }) => {
  return {
    visitor: {
      Identifier(path) {
        if (path.node.name === 'a') {
          path.replaceWith(t.Identifier('b'));
        }
      },
      BinaryExpression(path) {
        if (path.node.operator === '+') {
          const left = t.numericLiteral(2);
          const right = t.numericLiteral(3);
          path.replaceWith(t.binaryExpression('-', left, right));
        }
      }
    },
  };
}

function binarySearch(target, total) {
  var left = 0,
    right = total - 1,
    mid;
  let i = 0;
  while(left <= right){
    i += 1;
    mid = Math.floor((left + right) / 2);
    if (target > mid) {
      left = mid + 1;
    }else if (target < mid){
      right = mid - 1;
    }else{
      console.log(`target is ${target}, use ${i} times`);
      return i;
    }
  }
  return -1;
}

binarySearch(80, 100); // 返回需要的次数

// 自定义new
function new1(func) {
  var o = Object.create(func.prototype);
  var k = func.call(o);
  if (typeof k === 'object') {
    return k;
  } else {
    return o;
  }
}

function foo() {
 this.age = 12
}
function foo1() {
 this.age = 12
 return {name: 66};
}
new1(foo); // { age: 12 }
new1(foo1); // { name: 66 }

workInProgress.effectTag |= Ref
(workInProgress.effectTag & DidCapture) !== NoEffect

// Don't change these two values. They're used by React Dev Tools.
export const NoEffect = /*              */ 0b00000000000;
export const PerformedWork = /*         */ 0b00000000001;

// You can change the rest (and add more).
export const Placement = /*             */ 0b00000000010;
export const Update = /*                */ 0b00000000100;
export const PlacementAndUpdate = /*    */ 0b00000000110;
export const Deletion = /*              */ 0b00000001000;
export const ContentReset = /*          */ 0b00000010000;
export const Callback = /*              */ 0b00000100000;
export const DidCapture = /*            */ 0b00001000000;
export const Ref = /*                   */ 0b00010000000;
export const Snapshot = /*              */ 0b00100000000;

// Union of all host effects
export const HostEffectMask = /*        */ 0b00111111111;

export const Incomplete = /*            */ 0b01000000000;
export const ShouldCapture = /*         */ 0b10000000000;

function reducer(action) {
  switch (action.type) {
    case 'UPDATE_TITLE_TEXT':
      appState.title.text = action.text
      break
    case 'UPDATE_TITLE_COLOR':
      appState.title.color = action.color
      break
    default:
      break
  }
}

function createStore (state, reducer) {
  const getState = () => state
  const dispatch = (action) => reducer(state, action)
  return { getState, dispatch }
}

renderTitle(store.getState())

function createStore (state, reducer) {
  const listeners = []
  const subscribe = (listener) => listeners.push(listener)
  const getState = () => state
  const dispatch = (action) => {
    state = reducer(state, action)
    listeners.forEach((listener) => listener())
  }
  return { getState, dispatch, subscribe }
}

// 定一个 reducer
function reducer (state, action) {
  /* 初始化 state 和 switch case */
}

// 生成 store
const store = createStore(state, reducer)

// 监听数据变化重新渲染页面
store.subscribe(() => renderTitle(store.getState()))

// 首次渲染页面
renderTitle(store.getState()) 

// 后面可以随意 dispatch 了，页面自动更新
store.dispatch(...)