《JavaScript框架设计》——1.6 无冲突处理

简介: 本节书摘来自异步社区《JavaScript框架设计》一书中的第1章,第1.6节,作者:司徒正美 更多章节内容可以访问云栖社区“异步社区”公众号查看。 1.6 无冲突处理 无冲突处理也叫多库共存。不得不说,$是最重要的函数名,这么多框架都爱用它做自己的命名空间。

本节书摘来自异步社区《JavaScript框架设计》一书中的第1章,第1.6节,作者:司徒正美 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.6 无冲突处理

无冲突处理也叫多库共存。不得不说,$是最重要的函数名,这么多框架都爱用它做自己的命名空间。在jQuery还比较弱小时,如何让人们试用它呢?当时Prototype是主流,jQuery于是发明了noConflict函数,下面是源代码:

var
        window = this,
        undefined,
        _jQuery = window.jQuery,
        _$ = window.$,
        //把window存入闭包中的同名变量,方便内部函数在调用window时不用费大力气查找它
        //_jQuery与_$用于以后重写
        jQuery = window.jQuery = window.$ = function(selector, context) {
    //用于返回一个jQuery对象
    return new jQuery.fn.init(selector, context);
}
jQuery.extend({
    noConflict: function(deep) {
        //引入jQuery类库后,闭包外面的window.$与window.jQuery都储存着一个函数
        //它是用来生成jQuery对象或在domReady后执行里面的函数的
        //回顾最上面的代码,在还没有把function赋给它们时,_jQuery与_$已经被赋值了
        //因此它们俩的值必然是undefined
        //因此这种放弃控制权的技术很简单,就是用undefined把window.$里面的jQuery系的函数清除掉
        //这时Prototype或mootools的$就可以“明媒正娶”了
        window.$ = _$;//相当于window.$ = undefined
        //如果连你的程序也有一个叫jQuery的东西,jQuery可以大方地连这个也让渡出去
        //这时就要为noConflict添加一个布尔值,为true
        if (deep)
            //但我们必须用一个东西接纳jQuery对象与jQuery的入口函数
            //闭包里面的东西除非被window等宿主对象引用,否则就是不可见的
            //因此我们把闭包里面的jQuery return出去,外面用一个变量接纳就可以
            window.jQuery = _jQuery;//相当window.jQuery = undefined
        return jQuery;
    }
});

使用时,先引入别人的库,然后引入jQuery,使用调用$.noConflict()进行改名,这样就不影响别人的$运作了。

mass Framework更进一步,在引入种子模块的script标签上定义一个nick属性,那么释放出来的命名空间就是你的那个属性值。里面也偷偷实现了jQuery那种机制。

<script nick="AAA" src="mass.js"></script>
<script>
AAA.log("xxxxx")
</script>

如果你不改,默认还是$——我说过了,大家都对它“垂涎三尺”。

相关文章
|
JavaScript 前端开发
《JavaScript框架设计》——第 2 章  模块加载系统 2.1AMD规范
AMD是“Asynchronous Module Definition”的缩写,意为“异步模块定义”。重点有两个。异步——有效避免了采用同步加载方式中导致的页面假死现象。模块定义——每个模块必须按照一定的格式编写。
1119 0
|
前端开发 JavaScript
《JavaScript框架设计》——1.6 无冲突处理
mass Framework更进一步,在引入种子模块的script标签上定义一个nick属性,那么释放出来的命名空间就是你的那个属性值。里面也偷偷实现了jQuery那种机制。
1227 0
|
前端开发 JavaScript
《JavaScript框架设计》——第 1 章 种子模块 1.1命名空间
IIFE是现代JavaScript框架最主要的基础设施,它像细胞膜一样包裹自身,防止变量污染。但我们总得在Windows里设置一个立足点,这个就是命名空间。基本上我们可以把命名空间等同于框架的名字,不过对于某些框架,它们是没有统一的命名空间,如Prototype.js , mootools。
1722 0
|
Web App开发 JavaScript 前端开发
《JavaScript框架设计》——导读
首先说明一下,本书虽是讲解框架设计,但写个框架不是很深奥的事情,重点是建立更为完整的前端知识树。只有自己尝试写个框架,才有机会接触像原型、作用域、事件代理、缓存系统、定时器等深层知识,也才有机会了解applyElement、swapNode、importNode、removeNode、replace
1471 0
|
Web App开发 机器学习/深度学习 JavaScript
|
人工智能 JavaScript 前端开发