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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jquery实现图片放大镜效果
Dec 23 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中几种常见的超时处理全面总结
2012/09/11 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
Angular实现响应式表单
2017/08/04 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
python基础教程之获取本机ip数据包示例
2014/02/10 Python
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
python nmap实现端口扫描器教程
2020/05/28 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
python中property和setter装饰器用法
2019/12/19 Python
python三引号如何输入
2020/07/06 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
如何手工释放资源
2013/12/15 面试题
linux面试题参考答案(8)
2015/08/11 面试题
医学专业大学生求职的自我评价
2013/11/27 职场文书
工作自荐信
2013/12/11 职场文书
入党自我评价范文
2014/02/02 职场文书
公司职员入党自传书
2015/06/26 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js