前端知识点回顾之重点篇——jQuery实现的原理
jQuery
jQuery的实现原理
参考:https://blog.csdn.net/zhouziyu2011/article/details/70256659
- 外层沙箱和命名空间$
为了避免声明了一些全局变量而污染,把代码放在一个“沙箱执行”。jQuery具体的实现,都被包含在了一个立即执行的匿名函数构造的闭包里面,然后只暴露 $ 和 jQuery 这2个变量给外界:
(function(window, undefined) {
// 用一个函数域包起来,就是所谓的沙箱
// 在这里边var定义的变量,属于这个函数域内的局部变量,避免污染全局
// 把当前沙箱需要的外部变量通过函数参数引入进来
// 只要保证参数对内提供的接口的一致性,还可以随意替换传进来的这个参数
"use strict";
window.jQuery = window.$ = jQuery;
... // jQuery代码
}) (window);
jQuery有一个针对压缩优化细节,在代码压缩时,window和undefined都可以压缩为1个字母且确保它们就是window和undefined。外层函数只传了一个参数,因此沙箱执行时,u自然会undefined,把9个字母缩成1个字母,可以看出压缩后的代码减少一些字节数。
- jQuery 无 new 构造
使用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);
讲白了就是调用jQuery时,返回它原型上的init方法new执行得到的实例对象,为了让这个实例对象能够调用jQuery原型上的方法需要让init的原型指向jQuery的原型,而jQuery.fn属性在其中作为一个中介存在。
简化如下:
(function(window, undefined) {
function $(select) {
return new $.prototype.init(select);
}
$.prototype = {
constructor : $,
init : function(select){
//用来包装对象
this.select = [];
return this;
},
add : function(){
//...
return this;
},
on : function(){
//...
return this;
},
};
$.prototype.init.prototype = $.prototype;
window.$ = $;
}(window));
要实现jQuery的链式操作,就必须在所有的方法最后面返回这个实例对象。
前端知识点回顾之重点篇——jQuery实现的原理的更多相关文章
- 前端知识点回顾之重点篇——ES6的Promise对象
Promise Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异 ...
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
- 前端知识点回顾之重点篇——CSS中flex布局
flex布局 来源: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 采用 Flex 布局的元素 ...
- 前端知识点回顾之重点篇——CORS
CORS(cross origin resource sharing)跨域资源共享 来源:http://www.ruanyifeng.com/blog/2016/04/cors.html 它允许浏览器 ...
- 前端知识点回顾之重点篇——AJAX
Ajax(Asynchronous JavaScript and XML) 这种技术就是无须刷新页面即可从服务器中取得数据,但不一定是XML数据.在原生方法上,Ajax技术的核心是XMLHttpReq ...
- 前端知识点回顾之重点篇——ES6的async函数和module
async函数 ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是 Generator 函数的语法糖 什么是语法糖? 意指那些没有给计算机语言添加新功能,而只是 ...
- 前端知识点回顾之重点篇——ES6的Iterator和Generator
Iterator 迭代器是一种接口.是一种机制. 为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). Iter ...
- 前端知识点回顾之重点篇——JavaScript异步机制
JavaScript异步机制 来源:https://www.cnblogs.com/zhaodongyu/p/3922961.html JavaScript是单线程异步执行的,单线程意味着代码在任务队 ...
- 前端知识点回顾之重点篇——CSS中的BFC
BFC布局(Block Formatting Contexts) 来源:https://www.cnblogs.com/lzbk/p/6057097.html 块级格式化上下文是页面中的一块渲染区域, ...
随机推荐
- try,except,finally的用法
try,except,finally try...except形式:指定一个或多个异常处理器(异常子句).. 当在try子句中没有异常发生时,,异常处理器将不被执行. 当在try子句中有异常发生时,首 ...
- 如何远程调试部署在CloudFoundry平台上的nodejs应用
网络上关于如何本地调试nodejs应用的教程已经很多了,工具有Chrome开发者工具,Visual Studio Code,和nodejs周边的一些小工具等等. 在实际情况中,我们可能遇到本地运行良好 ...
- react 预览pdf 转换
function getReader(response){ return new Promise(function(resolve,reject){ response.blob().then( blo ...
- Supervisor进程管理配置使用
Supervisor进程管理 在后台应用中,有时候程序进程会异常中止退出,如果没有一个守护进程去守护这个应用进程我们就需要及时发现并重启进程.如果每一个应用进程都写一个自己的守护进程难免会比较麻烦,而 ...
- swagger2注解使用方法
swagger注解整体说明: @Api:用在请求的类上,表示对类的说明 tags="说明该类的作用,可以在UI界面上看到的注解" value="该参数没什么意义,在UI界 ...
- JSON 对象和字符串
JSON 对象和字符串 粘贴自:https://www.cnblogs.com/cstao110/p/3762056.html Q:什么是"JSON字符串",什么是"JS ...
- springMVC的详解
一,springmvc注解特性 1.@Controller 控制器定义在 spring 3.0 中,通过@controller 标注即可将 class 定义为一个 controller 类.为使 sp ...
- bug-- java.lang.RuntimeException: Type “Klass*"
使用jinfo查看jvm进程id为27523的信息 [java@xftest0 ~]$ jinfo 27523 Attaching to process ID 27523, please wa ...
- Redis入门(一)——安装
1.下载地址,选择对应版本 https://github.com/dmajkic/redis/downloads 2.下载解压后,进入到文件夹,地址栏cmd,redis-server.exe redi ...
- LaTeX新人使用教程[转载]
LaTeX新人教程,30分钟从完全陌生到基本入门 by Nan 对于真心渴望迅速上手LaTeX的人,前言部分可以跳过不看. 本教程面向对LaTeX完全无认知无基础的新人.旨在让新人能够用最简单快捷的方 ...