jQuery 源码学习 - 01 - 简洁的 $('...')
首先贴上学习参考资料:【深入浅出jQuery】源码浅析--整体架构,备用地址:chokcoco/jQuery-。
jQuery 库,js 开发的一个里程碑,它的出现,让网页开发者们告别荒蛮的上古时代,初步解放生产力,正式进入黄铜时代。
虽然如今 Angular/React/Vue 三驾马车驰骋畋猎,jQuery的时代渐行渐远,但是它的思想它的设计都有着里程碑式的作用。当然,我是拿它来补基础的,逃...
1.自执行函数
(function(params) {
// ...
})(Variable)
好处很多,就不介绍,感兴趣的请移步 google/baidu。
2.为什么没有 new ?
js 与 java 很像,都是面向对象的语言,因此,这意味这在 js 中我们需要通过 new 运算符来新建一个对象。当年面试的时候有一个问题是 jQuery 对象与普通的 dom 对象有什么不同,jQuery 对象不需要显式地 new 出来也是一个答案。
为什么不需要 new 呢?
var jQuery = function(selector, context) {
// 这里是为什么使用时无须 new 的原因
return new jQuery.fn.init(selector, context, rootjQuery);
},
因为在内部已经帮我们 new 了。
我们通常是 $('xxx') 来获取一个 jQuery 对象,其实内部执行的就是 jQuery() 函数,这个函数返回一个对象,即 new jQuery.fn.init(selector, context, rootjQuery) 。
var jQuery.fn = jQuery.prototype = {
// 实例化方法,也是所有 jQuery 对象的构造器
init: function(selector, context, rootjQuery) {
// ....
}
}
这一句,手动指定 jQuery 的 prototype(关于 js 函数的 prototype,请移步 google/baidu, 或者 JS 中的原型 -- prototype、__proto__ 以及原型链),同时,声明一个jQuery.fn 对象,缓存也好,定义也好,以待后用。
jQuery.fn.init.prototype = jQuery.fn;
这一句很关键,也很重要,作用是传递原型,确保 jQuery 对象中的 this 指向正确。接下来一步一步分析思想。
在分析之前我们先进行一下扩写,方便理解:
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype;
这里手动指定 jQuery.fn.init 函数的原型是 jQuery.fn,而因为上一句 jQuery.fn = jQuery.prototype ,所以,就确保了 jQuery.fn.init 函数的原型就是 jQuery 的原型,这意味着, jQuery.fn.init 与 jQuery 是等价的,因此,先不管具体实现,通过 new jQuery.fn.init(selector, context, rootjQuery) 出来的对象本质上就是 jQuery 对象,这样,就能够通过 this 访问到 jQuery.fn(或者 jQuery 原型)上的所有方法和属性。
套用大佬的总结:
(1)首先要明确,使用 $('xxx') 这种实例化方式,其内部调用的是 return new jQuery.fn.init(selector, context, rootjQuery) 这一句话,也就是构造实例是交给了 jQuery.fn.init() 方法去完成。(2)将 jQuery.fn.init 的 prototype 属性设置为 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 挂到 window 上:
window.jQuery = window.$ = jQuery;
贴一个简单的实践:
(function(window, undefined) {
var jQuery = function() {
return new jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
init: function() { console.log('init', this); return this;},
add: function() { console.log('add'); },
remove: function() { console.log('remove'); }
}
jQuery.fn.init.prototype = jQuery.prototype; window.jQuery = window.$ = jQuery; })(window)
最新文章
- MFC获取系统当前时间的几种方法
- (26)odoo中的序列运用
- Python输出内容的三种方式:print输出 python脚本执行 linux直接执行
- cocos2dx lua中继承与覆盖C++方法
- Load a script file in sencha, supports both asynchronous and synchronous approaches
- 关于发布中报“未能加载文件或程序集“Newtonsoft.Json”或它的某一个依赖项”的问题解决方法
- 【HNOI2011】数学作业
- SharePoint 查找字段内部名称的小方法
- dataTable tab栏切换时错位解决办法
- SpringBoot 添加mybatis generator 自动生成代码插件
- python制作词云
- robotframework接口测试(一)—Get request json
- [Mockito] Mock List interface
- MyBatis的核心配置、动态sql、关联映射(快速总结)
- (转)类(class)和结构(struct)的区别是什么?它们对性能有影响吗?.NET BCL里有哪些是类(结构),为什么它们不是结构(类)?在自定义类型时,您如何选择是类还是结构?
- 软件测试_APP测试_主要测试内容
- dede 添加自定义函数
- xlrd模块学习
- python3打印26个英文字母
- 深入浅出Docker(二):Docker命令行探秘
热门文章
- API接口通讯参数规范
- 如何在已有项目中引入FineUIMvc
- es6基础知识
- 基于.net EF6 MVC5+WEB Api 的Web系统框架总结(1)-Web前端页面
- MIUI12系统怎么样开启Root超级权限的流程
- 网站注册与登录使用 bcrypt与 passport 双重验证 解释
- python中os模块和sys模块的常见用法
- Unity切换到安卓平台Shader丢失(opengl)
- springboot整合shiro应用
- Spring JPA 使用@CreatedDate、@CreatedBy、@LastModifiedDate、@LastModifiedBy 自动生成时间和修改者