jQuery中的编程范式

核心提示：var feature =(function() {复制代码js本身缺乏包结构，不过经过多年的尝试之后业内已经逐渐统一了对包加载的认识，jQuery中的编程范式(2)，形成了RequireJs库这样得到一定共识的解决方案，jQuery可以与RequireJS库良好的集成在一起, 实现更完善的模块依赖管理，C. $返回的

var feature =(function() {
复制代码

js本身缺乏包结构，不过经过多年的尝试之后业内已经逐渐统一了对包加载的认识，形成了RequireJs库这样得到一定共识的解决方案。jQuery可以与RequireJS库良好的集成在一起, 实现更完善的模块依赖管理。http://requirejs.org/docs/jquery.html

require(["jquery", "jquery.my"], function() {
//当jquery.js和jquery.my.js都成功装载之后执行
$(function(){
$(‘#my’).myFunc();
});
});
复制代码

通过以下函数调用来定义模块my/shirt, 它依赖于my/cart和my/inventory模块，

require.def(“my/shirt”,
复制代码

3. 神奇的$：对象提升

当你第一眼看到$函数的时候，你想到了什么？传统的编程理论总是告诉我们函数命名应该准确，应该清晰无误的表达作者的意图，甚至声称长名字要优于短名字，因为减少了出现歧义的可能性。但是，$是什么？乱码？它所传递的信息实在是太隐晦，太暧昧了。$是由prototype.js库发明的，它真的是一个神奇的函数，因为它可以将一个原始的DOM节点提升(enhance)为一个具有复杂行为的对象。在prototype.js最初的实现中，$函数的定义为

var $ = function (id) {
return ”string” == typeof id ? document.getElementById(id) : id;
};
复制代码

这基本对应于如下公式

e = $(id)
复制代码

这绝不仅仅是提供了一个聪明的函数名称缩写，更重要的是在概念层面上建立了文本id与DOM element之间的一一对应。在未有$之前，id与对应的element之间的距离十分遥远，一般要将element缓存到变量中，例如

var ea = docuement.getElementById(‘a’);
var eb = docuement.getElementById(‘b’);
ea.style….
复制代码

但是使用$之后，却随处可见如下的写法

$(‘header_’+id).style…
$(‘body_’+id)….
复制代码

id与element之间的距离似乎被消除了，可以非常紧密的交织在一起。

prototype.js后来扩展了$的含义，

function $() {
var elements = new Array();

for (var i = 0; i < arguments.length; i++) {
var element = arguments;
if (typeof element == ’string’)
element = document.getElementById(element);

if (arguments.length == 1)
return element;

elements.push(element);
}

return elements;
}
复制代码

这对应于公式

[e,e] = $(id,id)
复制代码

很遗憾，这一步prototype.js走偏了，这一做法很少有实用的价值。

真正将$发扬光大的是jQuery, 它的$对应于公式

[o] = $(selector)
复制代码

这里有三个增强

A. selector不再是单一的节点定位符，而是复杂的集合选择符

B. 返回的元素不是原始的DOM节点，而是经过jQuery进一步增强的具有丰富行为的对象，可以启动复杂的函数调用链。

C. $返回的包装对象被造型为数组形式，将集合操作自然的整合到调用链中。

当然,以上仅仅是对神奇的$的一个过分简化的描述,它的实际功能要复杂得多. 特别是有一个非常常用的直接构造功能

$(“<table><tbody><tr><td>…</td></tr></tbody></table>”)….
复制代码

jQuery将根据传入的html文本直接构造出一系列的DOM节点,并将其包装为jQuery对象. 这在某种程度上可以看作是对selector的扩展: html内容描述本身就是一种唯一指定。