jQuery.noConflict方法解析

RobinTang 发布于2019-08-21 17:39 / 2778人阅读

摘要：功能文档中对方法的描述是释放对变量的控制权。不是很明确，慢慢解释下。类似的手法方法也实现了对变量的释放控制主要用于同时引入多个版本的。这里只对全局变量的处理进行解析，变量的处理方式类似。所以其他占用全局变量的库要先于引用，方法才能正确工作。

功能

jQuery API文档中对noConflict方法的描述是："释放jQuery对变量$的控制权"。( ′◔ ‸◔`)不是很明确，慢慢解释下。
我们都知道jQuery库占用了全局变量$(是变量jQuery的别名), 但是其他JS库也可以使用该变量了（比如zeptoJS, prototypejs）。当项目中同时引用了jQuery和其他占用全局变量$的库时，可能会导致变量$冲突。所以jQuery在给全局变量$赋值的时候先保存当时全局变量$已经存在的值，然后通过jQuery.noConflict方法把原来保存的值重新赋值给全局变量$。

类似的手法noConflict方法也实现了对jQuery变量的释放控制（主要用于同时引入多个版本的jQuery）。
这里只对全局变量$的处理进行解析，jQuery变量的处理方式类似。

实现

jQuery v3.2.1中noConflict方法的完整实现（解释见注释）：

var

    // 保存此时全局变量jQuery的值，可能其他版本的jQuery已经加载了
    _jQuery = window.jQuery,

    // 保存此时全局变量$的值，可能其JS库已经占用了全局变量$
    _$ = window.$;

jQuery.noConflict = function( deep ) {
    // 如果此时全局变量$还属于jQuery，则把全局变量$在jQuery初始化时的值_$重新赋值给$。
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }
    // 如果参数deep为true且此时全局变量jQuery还属于当前版本的jQuery，则把全局变量jQuery在当前版本jQuery初始化时的值_jQuery重新赋值给jQuery。
    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery;
    }
    // 返回当前版本的jQuery变量
    return jQuery;
};

通过实现发现jQuery库在且只在初始化的时候会保存当时全局变量$和jQuery的值，保存的值会在方法noConflict调用的时候复原。所以其他占用全局变量$的库要先于jQuery引用，noConflit方法才能正确工作。

举例

假设有个js文件glib.js也占用了全局变量$:

;(function() {
    var glib = function() {
        console.log("I am from glib js");
    };

    window.$ = window.glib = glib;
})()

index.html 内容:




    jQuery


hi jQuery noConflit

注意一定在jQuery前引用glib.js文件。这样当jQuery初始化时，全局变量已经被glib占用了。

其他

调用noConflict方法释放全局变量$的控制权后，可以使用变量jQuery使用代替，或者给jQuery另其一个别名（$也只是一个别名啊）

怎么还可以使用变量$呢？一般通过立即执行函数方式继续使用全局变量$

参考

jQuery API noConflict

GPU云服务器云服务器万网域名解析方法 json解析方法二级域名解析方法 dns域名解析方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89832.html

jQuery源码分析之noConflict()

摘要：将或者的控制权让给第一个实现它的那个库，确保不会与其它库的对象发生冲突。 noConflict() noConflict()将$或者jQuery的控制权让给第一个实现它的那个库，确保jQuery不会与其它库的$对象发生冲突。 jQuery中源码如下： var _jQuery = window.jQuery, _$ = window.$; jQuery.noConflict =...

Yuanf 2019-08-20 15:42 评论0 收藏0
jQuery（一）-- 初步了解

摘要：一初步了解介绍由创建于年一月的开源项目，凭借着跨平台的兼容性，简洁的语法，极大的简化了人员遍历文档，操作，处理事件，执行动画，和开发的操作。只建立一个名为的对象。对发生在同一个对象上的一组动作，可以直接连写无需重复获取对象。 jQuery（一）-- 初步了解 jQuery介绍由John Resig创建于2006年一月的开源项目，jQuery凭借着跨平台的兼容性，简洁的语法，极大的简...

quietin 2019-08-26 10:43 评论0 收藏0
浅析jQuery整体框架与实现（上）

摘要：通常的做法是，为它们指定回调函数。请求返回请求返回请求返回异步队列解耦异步任务和回调函数为模块队列模块事件提供基础功能。前言 jQuery整体框架甚是复杂，也不易读懂，这几日一直在研究这个笨重而强大的框架。jQuery的总体架构可以分为：入口模块、底层模块和功能模块。这里，我们以jquery-1.7.1为例进行分析。 jquery的总体架构 16 (function( window,...

VEIGHTZ 2019-08-21 10:20 评论0 收藏0
「jQuery插件开发日记」（一）如何建立一个基础的插件 - [翻译]

摘要：，翻译自官方网站。如何建立一个基础的插件有时，你想要在你的代码里面实现一个可复用的功能。译者注建立一个基础的插件假设我们现在要建立一个让元素里的文字变绿的插件。链式操作最大的特点之一就是支持链式操作。例如译者注的作用是返还的控制权。 _How to Create a Basic Plugin_，翻译自 jQuery 官方网站。如何建立一个基础的插件有时，你想要在你的代码里面实现一...

Sunxb 2019-08-21 10:39 评论0 收藏0
jQuery学习笔记

摘要：第二个参数是表示请求状态的字符串，，，第三个参数是当错误发生时，具体的错误描述，等请求结束无论成功或失败时的一个回调函数。一个参数名，默认是，一般用于指明回调函数名。的回调函数的执行顺序与它们的添加顺序一致。 jQuery学习笔记 jQuery大部分功能需要根据文档的DOM模型来工作，首先需要正确地解析到整个文档的DOM模型结构。使用jQuery需要在整个文档被浏览器完全加载后才开始进...

qc1iu 2019-08-22 17:08 评论0 收藏0