jQuery中的编程范式详解(2)

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

复制代码 代码如下:

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


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

复制代码 代码如下:

require.def("my/shirt",
    ["my/cart", "my/inventory"],
    function(cart, inventory) {
        // 这里使用module pattern来返回my/shirt模块对外暴露的API
        return {
            color: "blue",
            size: "large"
            addToCart: function() {
                // decrement是my/inventory对外暴露的API
                inventory.decrement(this);
                cart.add(this);
            }
        }
    }
);

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[i];
        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>")....

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgxsgf.html