jQuery之所以击败Prototype.js,是因为它自一开始就了解这三大问题,并提出完善的解决方案。
第一个问题,DOM什么时候可用。JS不像C那样有一个main函数,里面的逻辑不分主次。但JS是这样玩,并不意味着DOM也是这样。被JS自由惯了的人,于是傻眼了。 这涉及一个时间的概念。牛顿与爱因斯坦的差别,也是在于这个时间的引入。我们的脚本并不是一下子就引入,页面也不是一下加载完毕。前者引发脚本加载管理问题,后者就是DOMReady这个概念的导入。页面是从上到下生成,除了样式或图片在浏览器的主导下会另开线程,不阻塞外,其他都是一步步往下走。每个标签最后都解析成DOM,放在DOM树上。只有待到这DOM树建成,我们做开发才算是最安全的。没有这概念的人,总是遇到“此方法不存在”的问题——因为你这时得到的元素其实是null。浏览器还是很nice的,统一提供了一个onload事件,高级一点还有DOMContentLoaded事件(俗称ready事件)。当jQuery为了让页面尽快进入可用状态而发掘出这宝贝时,世界进入了一场竞赛,各种hack层出不穷。最后各大类库框架都加上这东西。
下面是avalon的实现
var ready = W3C ? "DOMContentLoaded" : "readystatechange" function fireReady() { if (DOC.body) { // 在IE8 iframe中doScrollCheck可能不正确 modules["ready!"].state = 2 innerRequire.checkDeps() fireReady = noop //隋性函数,防止IE9二次调用_checkDeps } } function doScrollCheck() { try { //IE下通过doScrollCheck检测DOM树是否建完 root.doScroll("left") fireReady() } catch (e) { setTimeout(doScrollCheck) } } if (DOC.readyState === "complete") { setTimeout(fireReady) //如果在domReady之外加载 } else if (W3C) { DOC.addEventListener(ready, fireReady) window.addEventListener("load", fireReady) } else { DOC.attachEvent("onreadystatechange", function() { if (DOC.readyState === "complete") { fireReady() } }) window.attachEvent("onload", fireReady) if (root.doScroll) { doScrollCheck() } }
用法是avalon.ready(fn),只传入一个回调就行了。
jQuery的用法,尤其是第二种,让人眼前一亮:
$(document).ready(function(){ }) $(function(){ })
第二个问题,如何找到这个元素。这个Prototype很早就注意这问题了,提供了两个方法$与$$,但它只是getElementById,getElementsByTagName的简单封装。其实90%是在用getElementById,于是引发满屏ID,也引发了CSS文件里是否用ID还是类名的讨论。正如我在开篇里说的那样,远古巨神总是被遗忘的,早在Prototype.js诞生前,就有高人想到选择器引擎这东西。在《javascript框架设计》一书里,我考究出两个比较早期的引擎,2003年Simon Willison的getElementsBySelector,2004年Dean Edwards的cssQuery。来自Ruby界的Sam Stephenson醉心于把Ruby的方法移植到javascript中,全然不觉选择器引擎这神器的存在。与Dean Edwards关系非常亲近的John Resig知道这东西的重要性,选择器的行数占全库的一半。待1.3之时,Sizzle放出,江山到手。选择器的发明与普及,改写了前端操作DOM的习惯,所有操作都是围绕CSS选择符展开,并且很多时候我们是一下子得到一大堆节点,因此批量化处理也是jQuery的一大特性。
第三个问题,如何操作元素。这个jQuery与Prototype也是天壤之别。jQuery是将找到的元素存放在类数组结构的jQuery实例上,Prototype则是设法在元素节点的原型上扩展,对于旧式IE,原型没有暴露出来,只能逐个元素上加这些方法了。于是有一问题了,如果这个元素中途被删掉或置换,我们再对它进行操作就出问题了。对于jQuery是做了许多代码防御的,每一步操作都会对它的存在进行判定。而Prototype.js就对不起了,这个只能让用户自己做。易用性立判高下。其次,所有DOM操作API,勿庸置疑,需要做一层厚厚的封装,搞定各种兼容性问题。而DOM的封装一直是jQuery的拿手好戏,现在其他库也一直以抄袭jQuery为荣。虽然比起抄袭工具函数来说,这个有点难度,并还是可以拆出来的。
这是围绕DOM产生的三个问题,其实DOM操作并不是我们想要的,后端只是想让我们把收集的为数据提交上来。后来为了用户体验,出现了弹出一个层,让用户专注在这个区域填写东西;为了防止用户误填需要多少重写,于是需要数据验证,出于tooltip什么东西。再后来,这些辅助性的交互越来越多了,我们真正要做的事情其实很少,并且深陷在复杂的DOM操作里面。
但显然我们也不能开倒车,于是问题的重点变成如何分离这两种逻辑——分层架构引进来了。最初是MVC,但经过jQuery洗礼的人受不了为一点点操作要写这么多代码。不过两层,另一个更NB的东西MVVM终于也登场了。其中angular与knockout功不可没。它们的思路都很相似,就是把一些待操作的DOM,就HTML里就把它们标出来,具体做法是定义一些冗余的绑定属性。然后在JS代码搞一个能偷偷操作它们的特殊对象,我们只要操作它,页面就会发生改变。在这里,你用不到选择元素,操作元素的任何逻辑,一切都这么魔术奇幻。
对于第一个问题,几乎所有MVVM框架的做法都一致,拥有这接口,但一般的示例是没有它的展示。
<!DOCTYPE html> <html> <head> <title>ms-css</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script src="../avalon.js" ></script> <script> avalon.define("test", function(vm) { vm.first = { aaa: 111 } }) </script> </head> <body> <div ms-controller="test"> <p><input ms-duplex="first.aaa" /></p> {{first.aaa}} </div> </body> </html>
你看不到window.onload ,ready这样的方法,但它的确是正确将数据填空到页面没有报错。缘由是它们在框架内部偷偷调用DOMReady的逻辑。
avalon.ready = function(fn) { innerRequire("ready!", fn) } avalon.ready(function() { avalon.scan(DOC.body) })
对于第二个问题,如何找到待操作的元素节点。avalon, angular, knockout都是通过扫描机制实现。在avalon是通过带有ms-*属性的元素节点或{{}}的文本节点, angular是带有ng-*属性的元素节点,或属性里面有{{}}的元素节点,或存在{{}}的 文本节点,knockout是带有data-bind的元素节点。这些绑定属性与文本绑定一经扫描,就会移除掉(可能也有不移除的),转换为一个刷新函数,与VM的属性关联在一起,因此当VM中的属性发生改变时,那些属性的状态,样式什么都会同步。这是魔术的其中一个端倪。
这个魔法让我们省掉大量查找元素的代码,对于框架来说,扫描机制,就是一个递归遍历节点的过程,比编写一个千行以上的选择器引擎轻松多了。这个是双赢的局面,皆大欢喜。
对于第三个问题,如何操作DOM,上面说过就是将绑定属性转换为视图刷新函数,比如说ms-css-background="color",当VM中的color变成red,那么元素也就变红。底层的代码可以简单的理解为data.element.style[background] = data.value。事实上,这修改样式,还是需要像avalon.css这样高度封装的API。jQuery提出的一系列兼容性处理方案,始终发扬光大。而avalon的实现其实与jQuery的差不了多远。angular就内置了实现了jQuery一系列接口的jqLite对象,并且它与jQuery混用时,干脆用jQuery的。至于当用户修改了VM的某一属性,如何通知视图呢,这又是另一个黑魔法,并且是一个非常高级的魔法,一般的大魔导士是施展不出来了。因此MVVM框架的数量才这么少。只有护国法师 ,创世魔法师才有这能耐。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="avalon.js"></script> <script> var model = avalon.define("test", function(vm) { vm.color = "green" vm.clickfn = function(){ vm.color = '#'+(Math.random()*0xffffff<<0).toString(16); } }) </script> </head> <body> <div ms-controller="test"> <div style="width:200px;height:200px" ms-css-background="color"></div> <button type="button" ms-click="clickfn">每点我一次都改变颜色</button> </div> </body> </html>
总体来说,这魔法有三种实现。第一种就是将VM的属性全部转换为函数,这个是knockout的实现,是最笨拙的做法。第二种是将定义VM的函数取toString进行重新编译,然后所有操作都受限于各种服务,通过服务对VM函数的属性进行改动。这是angular的做法,还美曰其名为注赖注入。这种魔法对创建魔法的人与施法者都是沉重的负担。当然angular官网上也有一些小清新的例子,用来迷惑人它们是多少简单,但实际用在项目时又是另一回事。当项目的用法是另一样。第三种是使用Object.defineProperty(ecma262 v5新增的API),但此方法在IE8下有问题,它只能用于元素节点,想用于Object还需IE9+浏览器。这是其他语言都有setter, getter魔法。我们可以把所有操作都列为五大操作,读值,赋值,遍历,删除,方法调用。setter,getter只是把普通的取值语句与赋值语句变成一个方法调用的形式,我们可以hack这个方法,从而实现跟视图的同步。对于IE6-8,就惨了。幸好avalon的作者还会一点VBScript,通过VBscript类的set, get, let语句也能实现类似的效果。这正是avalon的NB之处,通过VBScript与Object.defineProperty,就能用4000行的代码达到angular 16000行的效果,并且性能更好,也不用记这么多概念,这么多API。
//Object.defineProperty带来的魔法 var obj = { a: 1, _b: 2 } Object.defineProperty(obj, "b", { set: function(_b) {//重写b的setter, getter this._b = _b }, get: function() { return this._b + 10 } }) console.log(obj.a)//1 console.log(obj._b)//2 console.log(obj.b)//12 obj.a = 10 obj.b = 20 console.log(obj.a)//10 console.log(obj._b)//20 console.log(obj.b)//30
正因为有了扫描机制,有了ecma262v5的setter, getter,我们就不用管如何查找元素,如果操作元素。元素在第一次内部扫描时已经就绪,想什么操作,就在目标元素上定义不同的绑定属性。绑定属性与普通的style,class,id那样学习成本很低,它们还类似模板的用途。因此有关页面的构成完成交由专门的HTML制作人员就行了,我们只负责javascript里的VM定义。
重复一次,我们用avalon做前端开发,现在只有两步工作。在JS中定义VM,VM有一个名字,对应页面上某个元素的ms-controller的值,然后VM里面有许多方法与属性名,对应这个区域里面绑定属性的值。第二步,编写页面,通过绑定属性实现原来用jQuery搞的各种效果,如ms-attr对应jQuery的attr方法, ms-css对应jQuery的css方法,ms-visible对应jQuery的show, hide方法, ms-if对应jQuery的append, remove方法, ms-repeat相当于循环实现一整块HTML页面, {{prop}}就是在对应位置将值打印出来……
我们来一个hello world吧
jquery
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="jquery.js"></script> <script> $(function(){ $("h3").text("Hello World") }) </script> </head> <body> <div> <h3></h3> </div> </body> </html>
avalon
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="avalon.js"></script> <script> avalon.define("helloworld", function(vm) { vm.text = "Hello World" }) </script> </head> <body> <div ms-controller="helloworld"> <h3>{{text}}</h3> </div> </body> </html>
貌似jQuery更干净,来点交互怎么样!
jquery
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="jquery.js"></script> <script> $(function(){ $("h3").text("He say Hello World !!!").click(function(){ $(this).text("He say Good Bye !!!") }) }) </script> </head> <body> <div> <h3></h3> </div> </body> </html>
有点麻烦了吧,因为jQuery的选择器引擎是基于元素节点,因此我们无法把Hello World变成一个变量,重复使用。看avalon!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="avalon.js"></script> <script> avalon.define("helloworld", function(vm) { vm.text = "Hello World" vm.alert = function(){ vm.text = "Good Bye" } }) </script> </head> <body> <div ms-controller="helloworld"> <h3 ms-click="alert">He say {{text}} !!!</h3> </div> </body> </html>
再复杂一点
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="avalon.js"></script> <script> var model = avalon.define("test", function(vm) { vm.w = 100; vm.h = 100; vm.click = function() { vm.w = parseFloat(vm.w) + 10; vm.h = parseFloat(vm.h) + 10; } vm.arr = ["aaa", 'bbb', "ccc", "ddd"] vm.selected = ["bbb", "ccc"] vm.checkAllbool = vm.arr.length === vm.selected.length vm.checkAll = function() { if (this.checked) { vm.selected = vm.arr } else { vm.selected.clear() } } }) model.selected.$watch("length", function(n) { model.checkAllbool = n === model.arr.size() }) </script> </head> <body> <div ms-controller="test"> <div style=" background: #a9ea00;" ms-css-width="w" ms-css-height="h" ms-click="click"></div> <p>{{ w }} x {{ h }}</p> <p>W: <input type="text" ms-duplex="w" data-duplex-event="change"/></p> <p>H: <input type="text" ms-duplex="h" /></p> <ul> <li><input type="checkbox" ms-click="checkAll" ms-checked="checkAllbool"/>全选</li> <li ms-repeat="arr" ><input type="checkbox" ms-value="el" ms-duplex="selected"/>{{el}}</li> </ul> </div> </body> </html>
光是那个全选非全选就够你受的,你们自己思惦一下如何用jQuery实现吧。反正在avalon里,没有了DOM操作,上述说的三大问题都没有了。你可以像后端的JAVAer那样转致于领域建模与业务逻辑的构思。一旦你用上它,你就进入一个更高的台阶。之前你一直疲于亡命、剪不断、理还乱的 DOM操作,交由avalon这个框架在水底下更精细准确地运作着,比你自己写更安全高效。