JQuery源码分析（四）

时间：2022-09-11 14:36:44

jQuery多库共存处理

多库共存换句话说可以叫无冲突处理。

总的来说会有2种情况会遇到：

1、$太火热，jQuery采用$作为命名空间，不免会与别的库框架或者插件相冲突。

2、jQuery版本更新太快，插件跟不上，导致不同版本对插件的支持度不一样。

出于以上的原因，jQuery给出了解决方案–– noConflict函数。

引入jQuery运行这个noConflict函数将变量$的控制权让给第一个实现它的那个库，确保jQuery不会与其他库的$对象发生冲突。

在运行这个函数后，就只能使用jQuery变量访问jQuery对象。例如，在要用到$("aaron")的地方，就必须换成jQuery("aaron")，因为$的控制权已经让出去了。

使用DEMO：

jQuery.noConflict();

// 使用 jQuery

jQuery("aaron").show();

// 使用其他库的 $()

$("aaron").style.display = ‘block’;

这个函数必须在你导入jQuery文件之后，并且在导入另一个导致冲突的库之前使用。当然也应当在其他冲突的库被使用之前，除非jQuery是最后一个导入的

由于比较简单，我们直接上代码解说：

Var _jQuery = window.jQuery,

    _$ = window.$;

jQuery.noConflict = function( deep ) {

    if ( window.$ === jQuery ) {

        window.$ = _$;

    }

if ( deep && window.jQuery === jQuery ) {

        window.jQuery = _jQuery;

    }

    return jQuery;

};

如果我们需要同时使用jQuery和其他JavaScript库，我们可以使用 $.noConflict()把$的控制权交给其他库。

旧引用的$ 被保存在jQuery的初始化; noConflict() 简单的恢复它们。
    通过类似swap交换的概念，先把之前的存在的命名空间给缓存起来，通过对比当前的命名空间达到交换的目的，

首先，我们先判断下当前的的$空间是不是被jQuery接管了，如果是则让出控制权给之前的_$引用的库，

如果传入deep为true的话等于是把jQuery的控制权也让出去了。
    如果不通过noConflict处理的话其后果可想而知，

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>

<title>多库共存</title>

</head>

<body>

<div id="aaron">测试noConflict效果</div>

<script type="text/javascript">

    $("#aaron").click(function() {

        $.noConflict(); //让出控制权

		if (!$) {

			show("使用noConflict后，$不存在")

		}

		if (jQuery) {

			show("使用noConflict后，jQuery存在")

		}

		//通过闭包隔离出$

		;(function($) {

			if ($) {

				show("通过闭包隔离后，转为局部变量$存在")

			}

		})(jQuery);

    })

    function show(data) {

    	jQuery("body").append('<li>' + data + '</li>')

    }

</script>

</body>

</html>

JQuery核心模块：

对象的构建

面向对象(OOP)的语言都有一个特点，它们都会有类的这一概念，通过类可以抽象出创建具体相同方法与属性的对象。

但是ECMAScript中是没有类的概念的，因此它的对象与基于类的语言如java的定义是有所不同的。

在JavaScript世界中函数作为“一等公民”，它不仅拥有一切传统函数的使用方式（声明和调用），

而且可以做到像简单值一样赋值、传参、返回，这样的函数也称之为第一级函数。不仅如此，而且还可以通过操作符new来充当类的构造器。

函数在充当类的构造器时，原型prototype是一个重要的概念。prototype是构造函数的一个属性, 该属性指向一个对象。

而这个对象将作为该构造函数所创建的所有实例的基引用(base reference), 可以把对象的基引用想像成一个自动创建的隐藏属性。

当访问对象的一个属性时, 首先查找对象本身, 找到则返回；若不, 则查找基引用指向的对象的属性(如果还找不到实际上还会沿着原型链向上查找,  直至到根)。

只要没有被覆盖的话, 对象原型的属性就能在所有的实例中找到。

类一：

function ajQuery() {

    this.name = 'jQuery';

    this.sayName = function(){

    return this.name

}

var a = new ajQuery()

var b = new ajQuery()

var c = new ajQuery()

类二:

function ajQuery() {

    this.name = 'jQuery'

}

ajQuery.prototype = {

    sayName: function() {

    return this.name

    }

}

var a = new ajQuery()

var b = new ajQuery()

var c = new ajQuery()

类一与类二产生的结构几乎是一样的，而本质区别就是：类二new产生的a、b、c三个实例对象共享了原型的sayName方法，

这样的好处节省了内存空间，类一则是要为每一个实例复制sayName方法，每个方法属性都占用一定的内存的空间，

所以如果把所有属性方法都声明在构造函数中，就会无形的增大很多开销，这些实例化的对象的属性一模一样，都是对this的引用来处理。

除此之外类一的所有方法都是拷贝到当前实例对象上。类二则是要通过scope连接到原型链上查找，这样就无形之中要多一层作用域链的查找了。

jQuery对象的构建如果在性能上考虑，所以就必须采用原型式的结构：

jQuery = function( selector, context ) {

    return new jQuery.fn.init( selector, context );

}

jQuery.fn = jQuery.prototype = {

    init：function(){

    return this

},

    jquery: version,

    constructor: jQuery,

    ………………

}

var a = $() ;

使用原型结构，性能上是得到了优化，但是ajQuery类这个结构与目标jQuery的结构的还是有很大不一致：

没有采用new操作符；

return返回的是一个通过new出来的的对象 。

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>

<script src="http://img.mukewang.com/down/541f6ff70001a0a500000000.js" type="text/javascript"></script>

<title></title>

</head>

<body>

<div id="aaron"></div>

<script type="text/javascript">

//类一：

function ajQuery() {

  this.name = 'jQuery';

  this.sayName = function() {

    return this.name

  }

}

var a = new ajQuery()

var b = new ajQuery()

var c = new ajQuery()

// 类二

function ajQuery() {

    this.name = 'jQuery'

}

ajQuery.prototype = {

    sayName: function() {

    return this.name

    }

}

var a = new ajQuery()

var b = new ajQuery()

var c = new ajQuery()

// jQuery的写法

var $jQuery = function(selector, context) {

  return new $jQuery.fn.init(selector, context);

}

$jQuery.fn = $jQuery.prototype = {

  init: function() {

    this.name = 'aaron'

    return this;

  },

  constructor: $jQuery

}

var $a = $jQuery();

show('$jQuery的调用')

show($a);

</script>

</body>

</html>

JQuery源码分析（四）的更多相关文章

  1. jQuery 源码分析&lpar;四&rpar; each函数 &dollar;&period;each和&dollar;&period;fn&period;each方法 详解

    $.each一般用来遍历一个数组或对象,$.fn.each()就是指jQuery实例可以执行的操作(因为$.fn是jQuery对象的原型) $.each用来遍历一个数组或对象,并依次执行回掉函数,最后 ...

  2. jquery源码分析&lpar;四&rpar;——回调对象 Callbacks

    借用百度百科来说明下回调函数: 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该 ...

  3. 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学&period;Net Core Web Api开发系列【4】：前端访问WebApi &lbrack;Abp 源码分析&rsqb;四、模块配置 &lbrack;Abp 源码分析&rsqb;三、依赖注入

    使用react全家桶制作博客后台管理系统   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...

  4. jQuery源码分析系列

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...

  5. &lbrack;转&rsqb; jQuery源码分析-如何做jQuery源码分析

    jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书> ...

  6. jQuery 源码分析 8： 回头看jQuery的构造器（jQuery&period;fn，jQury&period;prototype，jQuery&period;fn&period;init&period;prototype的分析）

    在第一篇jQuery源码分析中,简单分析了jQuery对象的构造过程,里面提到了jQuery.fn.jQuery.prototype.jQuery.fn.init.prototype的关系. 从代码中 ...

  7. &lbrack;转&rsqb;jQuery源码分析系列

    文章转自:jQuery源码分析系列-Aaron 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAaro ...

  8. jquery源码分析之一前言篇

    1.问:jquery源码分析的版本是什么? 答:v3.2.1 2.问:为什么要分析jquery源码? 答:javascript是一切js框架的基础,jquery.es6.vue.angular.rea ...

  9. jQuery源码分析-each函数

    本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuer ...

  10. jQuery源码分析系列&lpar;转载来源Aaron&period;&rpar;

    声明:非本文原创文章,转载来源原文链接Aaron. 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAa ...

随机推荐

  1. Python for Infomatics 第13章 网页服务四（译）

    这几天因为其他事务,打断了自己的学习计划,今天继续我的翻译,避免又中途而废. 注:文章原文为Dr. Charles Severance 的 <Python for Informatics> ...

  2. Android 滑动菜单框架--SwipeMenuListView框架完全解析

    SwipeMenuListView(滑动菜单) A swipe menu for ListView.--一个非常好的滑动菜单开源项目. Demo 一.简介 看了挺长时间的自定义View和事件分发,想找 ...

  3. 将十六进制色值转换成Color

    在给Background赋值时,除了自带的Red,Blue,Black等,可以通过以下方法赋予其他颜色. 主要是将Hex转换成ARGB(A:alpha,表示透明度.R:Red.G:Green.B:Bl ...

  4. Yii2 rules 添加时间比较功能

    php比较类文件:yiisoft\yii2\validators\CompareValidator.php JS比较类文件: yiisoft\yii2\assets\yii.validation.js ...

  5. Yii CModel中rules验证规则&lbrack;转&rsqb;

    array( array(‘username’, ‘required’), array(‘username’, ‘length’, ‘min’=>3, ‘max’=>12), array( ...

  6. Basic Virus&&num;39&semi;s Infection &amp&semi; Variation &lbrack;Python&rsqb;

    Learn from here Initial #!/usr/bin/python2.7 #MAGIC_STRING_skd83749872 import os import __main__ imp ...

  7. paper 111：图像分类物体目标检测 from RCNN to YOLO

    参考列表 Selective Search for Object Recognition Selective Search for Object Recognition(菜菜鸟小Q的专栏) Selec ...

  8. psql rank row

    rank() OVER (PARTITION BY f1 ORDER BY f2 DESC) ROW_NUMBER() () OVER (PARTITION BY f1 ORDER BY f2 DES ...

  9. Windows下MYSQL自动备份批处理

    windows下MYSQL自动备份批处理 2011-05-04 09:16:45|  分类: mysql|举报|字号 订阅     按系统时间进行备份 注意mysql安装路径中如果有空格.就要把,.b ...

  10. CString 转化成 const char&ast; 类型

    写程序的时候经常会遇到无法将“CString”转换为“const char *”的错误,这里我找到了一个解决办法,与大家分享下: CString cs = _T("); ) * ; char ...

相关文章