我所理解的jQuery(2)谈jQuery的整体设计,驳"侵入性太强"

在 拙作 我所理解的jQuery(1) 的留言中,我看到 一位朋友写下了"jquery 侵入性太强 去死",我不知道是否因为笔者的文章写得不好,得罪了他,让笔者"去死",还是让jQuery"去死". 如果针对笔者个人,这个倒没有什么,最多我就封笔好了,但是如果是说 "jquery 侵入性"而让jQuery"去死",笔者倒是需要说道说道.

首先jQuery不仅侵入性 不强,而且封装的很好,可以说非常好.此话何解?

1.我们看jQuery的整个代码,完全封装在一个 匿名函数中, 结构大体如下:

(function() {
            /*
            此处为jQuery的逻辑代码
            */
        })()

所有 的jQuery代码到封装在这一个匿名函数中了(怎么还能要求再要自行车呢?)! 为什么使用匿名函数呢? 这个也是为了保证封装,保证在这个函数之外,不能被调用.

匿名函数如何执行呢?其实这里使用了一个技巧,把一个JavaScript代码段,放入一个括号()中,然后再紧跟一个括号(),这样就能保证 第一括号内的代码段 立即执行了,其实我通常把这种结构称为"立即执行函数". 其实命名函数也可以通过这么去立即执行,如下:

<script type="text/javascript">
        (function() {
            /*
            此处为jQuery的逻辑代码
            */
        })();

        (function xieRan() {
            alert("my name is xieran.");
        })();
    </script>

那么如果你运行这段代码的话,他就会立即弹出一个alert提醒框.当然也可以给立即执行函数传参数,如下:

(function xieRan(形参A, 形参B) {
            alert("my name is " + 形参A + " and I live in " + 形参B);
        })("xieran", "qingdao");

立即执行函数是多么的优雅啊,回想我们原来为了执行一个函数--首先定义这个函数,然后在写一行代码去分步骤执行--是不是原来的写法有点"笨拙",如下:

function xieRan(userName) {
            alert("my name is " + userName);
        };

        xieRan("xieran");

命名函数是可以分步骤,但是匿名函数就只能通过立即执行的结构来运行了.

2.我们看jquery究竟给window这个顶级对象干了什么事.

通过上面第一个观点,我们知道整个jQuery就是一个大的匿名函数,同时我们一般都是通过如下的方式把jQuery加载到我们页面(其实就是加载到window这个对象中)中:

<script type="text/javascript" src="YOURPATH/jQuery.js"></script>

那么也就是说我们就立即执行了这个匿名函数.

在这个匿名函数内部究竟执行了什么呢? 我们可以概括的说,其创建了很多个对象,很多个方法,但是这些对象和方法都是作为jQuery这个对象的属性而存在. 其总共向外暴露一个对象就是jQuery,通过一下方式:

window.jQuery = window.$ = function(selector, context) {
        /*

       具体的构造逻辑

       */

    };

也就是说其仅仅使用了window这个对象的两个属性(怎么还能有侵入呢?)

比如我们通常写JavaScript的方式:

<script type="text/javascript">

        var myName = "xieran";
        var myNation = "China";
        var myLoacation = "qingdao";

    </script>

这一下就给window这个对象定义了3个属性,如果你不相信,你可以通过 如下的代码 看看结果:

alert(window.myName);
alert(window.myLoacation);
alert(window.myNation);

之所以这样,是因为缺省情况下,我们在页面中定义的变量等数据,都会作为顶级对象window的成员而存在.

jQuery为了避免跟其他库或者代码冲动,仅使用了少数的几个window属性,何谈"侵入"?

3.就是我则会观点2中谈到的,jQuery使用window的几个属性中的 “$”,其还是仅能算是半个,因为jQuery可以让出其使用权.

相信使用过jQuery的朋友都 知道jQuery有这么一个方法 noConflict(),(其目的就是当我们在一个页面中同时使用到了多个JavaScript库,而其他库又已经使用了$的时候,我们就可以让那个jQuery不再使用这个$),这个方法实现的 思路大体如下:

a.在jQuery内部定义了一个 私有的变量: _$;

b.将window.$对象(这个时候$内部可能保存了其他库的对象) 首先保存在 刚才定义的私有变量里面: _$ = window.$;

c.当我们调用noConflict()的时候,其再把 将保存有其他对象的 _$返回window: window.$ = _$;

d.让jQuery使用其他的符合.

呵呵,jQuery已经没有手表了,也别要他的自行车了.