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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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中抽象类和接口的概念以及区别
2013/06/27 PHP
学习php分页代码实例
2013/10/24 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
javascript解析json实例详解
2014/11/05 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
python列表操作实例
2015/01/14 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
深入理解NumPy简明教程---数组2
2016/12/17 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
1亿有多大教学反思
2014/05/01 职场文书
企业文化宣传标语
2014/06/09 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS