虚度人生

导航

合抱之木,生于毫末--js命名空间

命名空间作用就不赘述了,大家应该也都很熟悉了。

我们先来看看各个框架是如何实现自己的命名空间的,都很有各自的特点,但总得来说大同小异,我们挨个来分析一下。

注:采用的框架版本:prototype-1.6.1, mootools-1.2.4, jquery-1.4.2, ext-3.2.0, yui-3.1.0, dojo-1.4.2

prototype:

var Prototype = {
    Version : '1.6.1',
    // ...
};
  1. 初始化全局对象,一般即window。
  2. 发现Prototype变量声明, 在window对象添加该属性。
  3. 给Prototype赋值。

mootools:

var MooTools = {
    'version' : '1.2.4',
    'build'   : '0d9113241a90b9cd5643b926795852a2026710d4'
};

同上,注意要符合规范,不要漏掉最后的引号。

jquery:

(function(window, undefined) {
    var jQuery = function(selector, context) {
        // ...
    }
    // ...
    window.jQuery = window.$ = jQuery;
})(window);
  1. 初始化window。
  2. 没有发现变量或函数声明,注意,function(window, undefined) 并不是函数声明。
  3. 发现(),改变表达式执行优先级,创建匿名函数对象并返回其引用。
  4. 执行该匿名函数,并传入window。
  5. 我们如果真正明白了这是个表达式,不是声明的话,就可以用不少别的手法,只要能执行这个表达式即可,如void function() {}()。
  6. 函数声明的jQuery在全局是不可见的,避免了命名污染,然后通过 window.jQuery = window.$ = jQuery实现外部可访问。
  7. 这里不得不提一下,jquery1.4这个新的写法很妙,首先,一般情况下全局变量是window,但如果你不想把jQuery放入window,则改变传入参数即可;其次,加了一个undefined参数,等价于在匿名函数内写var undefined = undefined,但是更加简洁明了。

ext:

Ext = {
    version : '3.2.0'
};

没啥可圈可点的,约等同于prototype的模式,唯一的区别是var 声明的是readable, writable,这种再加一个 deletable。

yui:

(function() {
    // ...
    if (typeof YUI === 'undefined' || !YUI) {
        YUI = function(o1, o2, o3, o4, o5) {
            var Y = this, a = arguments, i, l = a.length;
            if (!(Y instanceof YUI)) {
                return new YUI(o1, o2, o3, o4, o5);
            } else {
                // ...
                return Y;
            }
        };
    }
    // ...
})();
  1. (function() {...})()这个参考jquery的。
  2. 与jquery有所区别的是在函数内,没有用 var方式声明,而是直接YUI = ...
  3. 在函数作用域内查找,没有找到变量,循着作用域链往上,找到全局作用域,也没有,就在window下加入该变量并赋值。
  4. 比较精彩的是 YUI这个函数对象中的代码,效果就是var y1 = YUI()和var y2 = new YUI()都能获得YUI的一个实例。
  5. 判断this是否是YUI,如果是YUI,表示是用YUI()这种方式调用,则返回 new YUI()对象,否则表示是new 调用,则返回本身。
  6. 具体的一些细节可以参看奇妙的Function 和 prototype

dojo:

(function() {
    // ...
    if (typeof dojo == "undefined") {
        dojo = {
            _scopeName : "dojo",
            // ...
        };
    }
    // ...
})();
  1. 与1.4.0的版本相比,去掉了this.dojo的this。如果有this,那这个this到底指向谁呢,其实比较简单,谁调用这个函数,this就是指谁。

通过以上的代码,我们可以总结出以下几点:

  1. 相比于其它框架,prototype和mootools对全局的污染较多。
  2. 采用闭包函数,可以隐藏一些常用的内置变量及函数,如jquery般加入常用参数更妙。

通过对高手的代码学习解析,能从中提高一星半点对js的掌握。

个人评价:

prototype,mootools,ext:★

dojo:★★

yui:★★★

jquery:★★★☆

posted on 2010-03-17 10:39  nozer0  阅读(776)  评论(0编辑  收藏  举报