jQuery源码研究——解决命名冲突
在项目中难免不去使用多个插件,如此一来这些插件就有可能出现一样的名称,当出现同名变量时后一个将会覆盖上一个,这样的话我们就无法同时使用多个插件了。
当遇到这种情况我们可以手动去修改插件源码把它的名字改了,但这种方式是不明智的,假如说你使用的某个插件它的版本更新了,那么你还得再次去修改它的源码,再则随意去修改插件源码对团队来说是混乱不堪的,因此最好的方式应该是由插件自身来解决命名冲突,在jQuery中有一个noConflict方法,这个方法就是用来解决命名冲突的。
jQuery.noConflict
var _jQuery = window.jQuery,
_$ = window.$;
jQuery.noConflict = function( deep ) {
if ( window.$ === jQuery ) {
window.$ = _$;
}
if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
}
return jQuery;
};
if ( !noGlobal ) {
window.jQuery = window.$ = jQuery;
}
return jQuery;
代码中的window是全局的,jQuery是局部的,window.jQuery把全局中的jQuery保存下来,window.$的作用同上,将全局中的jQuery和$保存下来是为了当我们使用jQuery.noConflict方法时好将$和jQuery还原成之前的,因为在没有使用jQuery.noConflict方法前,全局的$和jQuery已经被咱们强大的jQuery给覆盖了,因此如果你不使用jQuery.noConflict方法将无法使用之前的那个插件,那么当我们使用jQuery.noConflict方法后jQuery不就被其他插件给覆盖了吗,插件确实会把jQuery给覆盖,不过在jQuery.noConflict方法中,它最后又将jQuery返回了,因此我们只需要将这个返回的jQuery取一个新的名字就好了。
因此我们可以看出jQuery在解决命名冲突上它是先将插件保存下来,然后使用自己的jQuery将插件覆盖,当调用jQuery.noConflict方法时再将插件放出并将自己返回。
需要注意的是此方法只能解决在jQuery之前导入的插件,因为如果在jQuery之后导入,那么jQuery就已经被覆盖了,自然也就无法使用noConflict方法。
在解决命名冲突方面,当jQuery检查到我们有使用CommonJS时,$和jQuery将不会暴露到window中,具体代码就是下面这句了
if ( !noGlobal ) {
window.jQuery = window.$ = jQuery;
}
这个noGlobal是从这里传过去的
( function( global, factory ) {
"use strict";
// 判断是否有使用CommonJS
if ( typeof module === "object" && typeof module.exports === "object" ) {
module.exports = global.document ?
// true:不在window上暴露$和jQuery,因此使用CommonJS后你将无法在全局调用jQuery
factory( global, true ) :
function( w ) {
if ( !w.document ) {
throw new Error( "jQuery requires a window with a document" );
}
return factory( w );
};
} else {
factory( global );
}
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ){
// 省略
});
jQuery.noConflict注释版
var
// 将全局jQuery保存起来
_jQuery = window.jQuery,
// 将全局$保存起来
_$ = window.$;
// 解决命名冲突 当传递一个true值则会将$和jQuery命名权限都交出
jQuery.noConflict = function( deep ) {
// 如果现在使用的是jQuery则将$权限交出,给其他插件使用
if ( window.$ === jQuery ) {
window.$ = _$;
}
// 如果deep为true并且使用的是jQuery则将jQuery命名权限交出,给其他插件使用
if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
}
// 返回jQuery,我们可以去重新命名
return jQuery;
};
// 暴露jQuery和$标识符
// 关于在全局暴露jQuery的相关讨论:https://github.com/jquery/jquery/pull/557
if ( !noGlobal ) {
window.jQuery = window.$ = jQuery;
}
return jQuery;
} );
jQuery源码研究——解决命名冲突的更多相关文章
- jQuery源码研究——怎么看源码
废话 这几天有想看源码的想法,于是就开始了源码的研究,经过几天的摸索发现看源码还是有点技巧在里面的,想着把这些东东写下来作为一个小总结. 在一个多月前我对Vue源码进行了一次研究,那时看源码的方式基本 ...
- jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理
jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理 最近在看jquery源码分析的视频教学,希望将视频中学到的知识用博客记录下来,更希望对有同样对jquery源码有困惑 ...
- 原生JS研究:学习jquery源码,收集整理常用JS函数
原生JS研究:学习jquery源码,收集整理常用JS函数: 1. JS获取原生class(getElementsByClass) 转自:http://blog.csdn.net/kongjiea/ar ...
- 【菜鸟学习jquery源码】数据缓存与data()
前言 最近比较烦,深圳的工作还没着落,论文不想弄,烦.....今天看了下jquery的数据缓存的代码,参考着Aaron的源码分析,自己有点理解了,和大家分享下.以后也打算把自己的jquery的学习心得 ...
- Jquery源码分析与简单模拟实现
前言 最近学习了一下jQuery源码,顺便总结一下,版本:v2.0.3 主要是通过简单模拟实现jQuery的封装/调用.选择器.类级别扩展等.加深对js/Jquery的理解. 正文 先来说问题: 1. ...
- jQuery源码逐行分析学习02(第一部分:jQuery的一些变量和函数)
第一次尝试使用Office Word,方便程度大大超过网页在线编辑,不过初次使用,一些内容不甚熟悉,望各位大神见谅~ 在上次的文章中,把整个jQuery的结构进行了梳理,得到了整个jQuery的简化结 ...
- 从jquery源码中看类型判断和数组的一些操作
在深入看jquery源码中,大家会发现源码写的相当巧妙.那我今天也通过几个源码中用到的技巧来抛砖引玉,希望大家能共同研究源码之精华,不要囫囵吞枣. 1.将类数组转化成数组 我想大家首先想到的方法是fo ...
- jQuery源码笔记(一):jQuery的整体结构
jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类库相比,它剑走偏锋,从 web 开发的实用角度出发,抛除了其它 Lib 中一些中看但不实用 ...
- jQuery 源码解析一:jQuery 类库整体架构设计解析
如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.get ...
随机推荐
- js判断是否为ie浏览器
之前在开发时遇到浏览器的兼容性问题,涉及到对ie浏览器的判断.现在此做个笔记. 这里我以函数的形式来判断,在用的时候直接调用即可. var isIE = !!window.ActiveXObject ...
- HDU 1213 How Many Tables(模板——并查集)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1213 Problem Description Today is Ignatius' birthday ...
- Unity LayerMask
Unity用int32的每一位表示32个层,int32用二进制有32位,Layers通常被摄像机用来渲染部分场景,和灯光照射部分场景使用.但是它们也可以用来做射线检测时忽略一些collder或Coll ...
- 用CSS实现“表格布局”
当我们进行浮动布局时,会发现存在着非浮动元素与浮动元素的底部难以对齐的情况,这就是浮动布局的缺陷.因此,过去的前端工作者曾利用<table>以实现"表格布局".因为表格 ...
- ubuntu 修复 could not open file '/etc/apt/sources.list'
问题描述:could not open file '/etc/apt/sources.list' 问题分析:软件源被清空了,也就是 /etc/apt/sources.list 被删除了 解决问题:1. ...
- 【js 笔记】读阮一峰老师 es6 入门笔记 —— 第二章
第二章:变量的解构赋值 在es6 版本前,如果要为多个变量赋不同值,我想是件比较麻烦的事情.但es6 版本新推出了一个新技术那就是今天的主角变量的解构赋值. 变量解构赋值分为两种方法:数组解构赋值 和 ...
- 解决前端页面a标签嵌套a标签bug
在前端页面中,一般二级导航栏会出现a嵌套a标签出现重复的父元素a标签bug 比如: <nav class="nav"> <ul> <li> &l ...
- Linux指令--more,less
文章出处:http://www.cnblogs.com/peida/archive/2012/11/05/2754477.html,感谢原作者无私的分享. more命令,功能类似 cat ,cat命令 ...
- Windows 产品激活状态、密钥等信息查看
目前,大多PC都是预装了微软家的桌面级系统 Windows ,这也算是微软一大得意之作.可是 Windows 产品可不是免费的,是要 $ 的.可能在中国,大多数系统可能是盗版过来的,像当年的雨林木风( ...
- Web Application和Web Site两个模板的比较
Scenario Web Application Project Web Site Project 项目定义 跟 Visual Studio .NET 2003 类似,由于项目文件的存在,只有被项目文 ...