合抱之木,生于毫末--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:★★★☆

你可能感兴趣的:(命名空间)