写在前面
因为zepto、jQuery2.x.x和Nuclear都是为现代浏览器而出现，不兼容IE8，适合现代浏览器的web开发或者移动web/hybrid开发。每个框架类库被大量用户大规模使用都说明其戳中了开发者的刚需。本文将对比zepto/jQuery到Nuclear的设计和演化的过程。
无框架时代
互联网的春风刚刮来的时候，人们当时利用三剑客制作网页。
|
1 2 3 4 5 6 7 |
<div onclick="showMsg()"></div> <script> function showMsg(){ alert("恭喜你实现第一个人机交互程序"); } </script> |
这里会发现showMsg必须是全局的，onclick触发才能访问，这样就会导致每绑一个事件就要污染一个全局变量。这点问题难不倒前端工程师，加个超级namespace，所有的事件挂在它下面:
|
1 2 3 4 5 6 7 8 9 |
<div onclick="SuperNamespce.showMsg1()"></div> <div onclick="SuperNamespce.showMsg2()"></div> <script> var SuperNamespce={}; SuperNamespce.showMsg1=function(){ } SuperNamespce.showMsg2=function(){ } </script> |
但是也有问题，比如这样的场景：
|
1 2 3 4 5 6 7 |
var SuperNamespce = {}; setTimeout(function () { SuperNamespce.showMsg1 = function () { } SuperNamespce.showMsg2 = function () { } }, 4000) |
或者更真实一点：
|
1 2 3 4 5 6 7 8 9 10 |
var SuperNamespce = {}; ajax({ url: "xxx", success: function () { SuperNamespce.showMsg1 = function () { } SuperNamespce.showMsg2 = function () { } } }) |
在定时器没执行完成或者AJAX没有success之前，用户的所有交互都会报：
|
1 2 |
Uncaught TypeError: SuperNamespce.showMsg1 is not a function Uncaught TypeError: SuperNamespce.showMsg2 is not a function |
然后，善于记录分析总结思考提炼的工程师们拿出本子记录下最佳实践：
- 不建议在dom元素上直接声明事件绑定调用
- 声明式事件绑定所调用的方法必定要污染全局某个变量
- 声明式事件绑定的相关js未执行完的情况下发生人机交互会报脚本错误，且严重影响用户体验
- 建议在js中先查找dom、再给dom绑定事件
想象一下：一个按钮5秒后才绑的事件，用户前4秒内一直点都没反应，然后5秒到了，但是用户已经放弃该网页了。
util库时代
开发者们按照上面总结的最佳实践，重构了上面的代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="myID1"></div> <div id="myID2"></div> <script> var myID1 = document.getElementById("myID1"); var myID2 = document.getElementById("myID2") 2 = document.getElementById("myID2") נ框架时代
互联网的春风刚刮来的时候，人们当时利用三剑客制作网页。
这里会发现showMsg必须是全局的，onclick触发才能访问，这样就会导致每绑一个事件就要污染一个全局变量。这点问题难不倒前端工程师，加个超级namespace，所有的事件挂在它下面:
但是也有问题，比如这样的场景：
或者更真实一点：
在定时器没执行完成或者AJAX没有success之前，用户的所有交互都会报：
然后，善于记录分析总结思考提炼的工程师们拿出本子记录下最佳实践：
想象一下：一个按钮5秒后才绑的事件，用户前4秒内一直点都没反应，然后5秒到了，但是用户已经放弃该网页了。 util库时代开发者们按照上面总结的最佳实践，重构了上面的代码：
|
