博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端知识点回顾之重点篇——jQuery实现的原理
阅读量:5088 次
发布时间:2019-06-13

本文共 2085 字,大约阅读时间需要 6 分钟。

jQuery

jQuery的实现原理

参考:

  1. 外层沙箱和命名空间$

为了避免声明了一些全局变量而污染,把代码放在一个“沙箱执行”。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个字母,可以看出压缩后的代码减少一些字节数。

  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的链式操作,就必须在所有的方法最后面返回这个实例对象。

转载于:https://www.cnblogs.com/simpul/p/11027151.html

你可能感兴趣的文章
Asp.Net Core 轻松学-从安装环境开始
查看>>
C# XML 去xmlns:xsd和xmlns:xsi属性
查看>>
在WPF中快速实现键盘钩子
查看>>
查看Windows服务器安装了那些SQL Server组件
查看>>
LeapMotion Demo1
查看>>
优雅实现INotifyPropertyChanged接口——利用Lambda表达式
查看>>
[UWP]涨姿势UWP源码——RSS feed的获取和解析
查看>>
WPF笔记(2.4 Grid)——Layout
查看>>
SQL Server调优系列基础篇
查看>>
SQL Server 2008性能故障排查(二)——CPU
查看>>
WebBrowser与IE的关系,如何设置WebBrowser工作在IE9模式下?
查看>>
快速构建Windows 8风格应用8-贴靠视图
查看>>
谨记给UpdatePanel中动态添加的控件赋ID
查看>>
Windows Phone开发(23):启动器与选择器之CameraCaptureTask和PhotoChooserTask
查看>>
Windows 8.1 新增控件之 MenuFlyout
查看>>
程序员养生 -- 心态
查看>>
关于csrss.exe和winlogon.exe进程多、占用CPU高的解决办法
查看>>
ftp服务器配置,及客户端访问
查看>>
juce viewport使用
查看>>
linux下升级npm以及node
查看>>