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插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jquery实现抽奖功能
Oct 22 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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
PHP读取大文件的多种方法介绍
2016/04/04 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
python中的闭包用法实例详解
2015/05/05 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
python numpy数组复制使用实例解析
2020/01/10 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
基于python实现复制文件并重命名
2020/09/16 Python
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
技术人员面试提纲
2013/11/28 职场文书
化学工程专业求职信
2014/08/10 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL