__
__ copied to clipboard
noneven
想到什么写什么
以前看jQuery源码的时候有看到在源码的注释中有些过call的性能会比apply好，在lodash的源码中也同样的发现有call比apply性能更好的注释，这里我在[jsperf](https://jsperf.com)上写了几个test case，验证了一下确实call比apply的性能更好。 - 0、lodash源码apply方法重写  - 1、无指向无参数对比:  - 2、有指向无参数对比:  - 3、无参数有指向:  - 4、有参数有指向对比:  总结: 在我们平时的开发中其实不必关注call和apply的性能问题，但是可以尽可能的去用call，特别是es6的reset解构的支持，call基本可以代替apply，可以看出lodash源码里面并没有直接用Function.prototype.apply，而是在参数较少(1-3)个时采用call的方式调用(因为lodash里面没有超过4个参数的方法，PS如果一个函数的设计超过4个入参，那么这个函数就要考虑重构了) 转载请注明出处
[如何评价 Webpack 2 新引入的 Tree-shaking 代码优化技术？](https://www.zhihu.com/question/41922432) [webpack2 的 tree-shaking 好用吗？](http://www.imweb.io/topic/58666d57b3ce6d8e3f9f99b0) [你的Tree-Shaking并没什么卵用](https://juejin.im/post/5a5652d8f265da3e497ff3de) [Tree-Shaking性能优化实践 - 原理篇](https://juejin.im/post/5a4dc842518825698e7279a9) [Tree-Shaking性能优化实践 - 实践篇](https://juejin.im/post/5a4dca1d518825128654fa78)
# webpack bundler 实现 ## 前言 Q: 为什么我们要做这件事？ A: 太多小伙伴对 webpack 的认识都在 `webpack.config.js` 上，对 webpack 的使用也都是黑盒的，对其打包、loader、plugin等实现原理知之甚少 Q: webpack 现在如此庞大，应该如何着手？ A: 我们可以从 webpack 的第一个提交版本着手研究，它主要实现了 bundler和 loader，代码量很小，并且可读性很高 [webpack 的第一个 commit](https://github.com/webpack/webpack/tree/2e1460036c5349951da86c582006c7787c56c543) ## bundler...
# Tapable API 文档及使用教程 ## Tapable（0.2.x） ### 使用 ``` import Tapable from 'tapable'; //var Tapable = require('tapable'); ``` Tapable 是一个用于事件发布订阅执行的插件架构。 在使用时你仅仅需要像这样继承它： ``` function MyClass() { Tapable.call(this); } MyClass.prototype = Object.create(Tapable.prototype);...
* 1、入口文件路径生成、配置文件解析 * 2、构建扁平依赖树 - 初始化依赖树 deepTree - 读取文件 => 跑一边所有的 loader - 生成 AST - 根据 AST 解析模块依赖 - 深度优先遍历将依赖的依赖 - 将依赖扁平化到 deepTree，包含自增 id 和模块绝对路径 * 3、plugin hook在整个主流程的各个操作 
```javascript let source = `require('a');console.log(123);require('b');` // source => AST => replaces let replaces = [{ from: 8, to: 11, name: 'a', value: 1 }, { from: 38, to: 41, name:...
* 查看 JS parser 后的 AST：[astexplorer](http://astexplorer.net/) * 可视化 AST：http://resources.jointjs.com/demos/javascript-ast * JS Parser 速度对比：http://esprima.org/test/compare.html - Esprima - UglifyJS2 - Traceur - Acorn(公认最快) - Shift * 文章： - [Abstract Syntax Tree 抽象语法树简介](http://div.io/topic/1994?utm_source=tuicool&utm_medium=referral)...
``` { /////////////// // 可能的错误 // //////////////// // 禁止条件表达式中出现赋值操作符 "no-cond-assign": 2, // 禁用 console "no-console": 0, // 禁止在条件中使用常量表达式 // if (false) { // doSomethingUnfinished(); // } //cuowu "no-constant-condition": 2, //...
## 异步流程控制器实现 ``` //最终效果： pjs.when(["A","B"],(val)=>{ console.log(val); }); pjs.when(["A","C"],(val)=>{ console.log(val); }); setTimeout(()=>{ pjs.trigger("A", "dataA"); },1000) setTimeout(()=>{ pjs.trigger("B", "dataB"); },2000) setTimeout(()=>{ pjs.trigger("C", "dataC"); },3000) ``` ### step1 简版实现 思路：调用when的时候将异步任务(A B)用数组存起来，并将异步回调用callback存储；然后当A/B异步任务完成时调用trigger方法把异步任务数组里面的A/B删除，并且检测异步任务队列是否为空，为空时调用callback。 ``` //...