jQuery中$原理实例分析


Posted in jQuery onAugust 13, 2018

本文实例讲述了jQuery中$原理。分享给大家供大家参考,具体如下:

1、外层沙箱及命名空间$

为了避免声明了一些全局变量而污染,把代码放在一个“沙箱执行”,jQuery具体的实现,都被包含在了一个立即执行函数构造的闭包里面,然后在暴露出命名空间(可以为API,函数,对象),如只暴露 $ 和 jQuery 这2个变量给外界:

(function(window, undefined) {
  // 用一个函数域包起来,就是所谓的沙箱
    // 在这里边var定义的变量,属于这个函数域内的局部变量,避免污染全局
  // 把当前沙箱需要的外部变量通过函数参数引入进来
    // 只要保证参数对内提供的接口的一致性,还可以随意替换传进来的这个参数
  "use strict";
  window.jQuery = window.$ = jQuery;
  ... // jQuery代码
}) (window);

jQuery有一个针对压缩优化细节,在代码压缩时,window和undefined都可以压缩为1个字母且确保它们就是window和undefined。外层函数只传了一个参数,因此沙箱执行时,u自然会undefined,把9个字母缩成1个字母,可以看出压缩后的代码减少一些字节数。

// 压缩策略
// w -> window , u -> undefined
(function(w, u) {
  "use strict";
  w.jQuery = w.$ = jQuery;
  var a;
  if (a == u)
    return;
})(window);

2、jQuery 无 new 构造

实例化一个jQuery对象的方法:

$('#text').text('myJQuery'); // 无 new 构造

等价于:

var text = new $('#text');
text.text('myJQuery');

使用jQuery时一般都使用无new的构造方式,直接$('')进行构造,这也是jQuery十分便捷的一个地方。当使用无new构造方式时,其本质是相当于new jQuery(),在jQuery内部的实现方式是:

(function(window, undefined) {
  // ...
  jQuery = function(selector, context) {
    // 实例化方法jQuery()实际上是调用了其拓展的原型方法 jQuery.fn.init
    return new jQuery.fn.init(selector, context, rootjQuery);
  },
  // jQuery.prototype是jQuery的原型,挂载在上面的方法,即可让所有生成的jQuery对象使用
  jQuery.fn = jQuery.prototype = {
    // 实例化方法,这个方法可以称作 jQuery 对象构造器
    init: function(selector, context, rootjQuery) {
          // ...
    }
  }
  // jQuery 没有使用 new 运算符将 jQuery 实例化,而是直接调用其函数
  // 要实现这样,那么 jQuery 就要看成一个类,且返回一个正确的实例,且实例还要能正确访问 jQuery 类原型上的属性与方法
  // jQuery 的方式是通过原型传递解决问题,把 jQuery 的原型传递给jQuery.prototype.init.prototype,所以通过这个方法生成的实例 this 所指向的仍然是 jQuery.fn,所以能正确访问 jQuery 类原型上的属性与方法
  jQuery.fn.init.prototype = jQuery.fn;
})(window);

1) 使用$('xxx')这种实例化方式,其内部调用的是 return new jQuery.fn.init(selector, context, rootjQuery) 这一句话,也就是构造实例是交给了 jQuery.fn.init() 方法去完成。

2) 将 jQuery.fn.initprototype 属性设置为 jQuery.fn,那么使用 new jQuery.fn.init() 生成的对象的原型对象就是 jQuery.fn ,所以挂载到 jQuery.fn 上面的函数就相当于挂载到 jQuery.fn.init() 生成的 jQuery 对象上,所有使用 new jQuery.fn.init() 生成的对象也能够访问到 jQuery.fn 上的所有原型方法。

3) 实例化方法存在这么一个关系链 :

① jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype ;

② new jQuery.fn.init() 相当于 new jQuery() ;

③ jQuery() 返回的是 new jQuery.fn.init(),而 var obj = new jQuery(),所以这 2 者是相当的,所以我们可以无 new 实例化 jQuery 对象。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 #jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 #jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 #jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 #jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 #jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 #jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 #jQuery
You might like
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
Smarty安装配置方法
2008/04/10 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
python 多线程应用介绍
2012/12/19 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
python os.rename实例用法详解
2020/12/06 Python
门诊挂号室室长岗位职责
2013/11/27 职场文书
小学师德师风整改措施
2014/10/27 职场文书
工作自我评价范文
2015/03/05 职场文书
倡议书范文大全
2015/04/28 职场文书
民间借贷被告代理词
2015/05/23 职场文书
在职证明书模板
2015/06/15 职场文书
小学体育教学随笔
2015/08/14 职场文书