jQuery源码分析

淩亂°似流年 2022-05-19 05:56 273阅读 0赞

一、jQuery如何做到不污染变量名并暴露出 $ 供用户使用

jQuery将变量和代码写进立即执行函数，通过函数来包裹所有的变量和方法，再在这个立即执行函数上将 jQuery方法绑定到window上，就可以让用户使用到jq方法了。

二、jQuery是如何做到 jQuery == $ 的？

(function (){
        var a = 123;
        function jQuery(sizzle){
            //...
        }
        
        window.jQuery = window.$ = jQuery;
    })()

三、jquery的构造

jq在内部 new 一个自己的init函数，这个initial的函数的原型又指向jq，这样用户每次使用 $('selector') 都会返回一个新new出来的jq对象；

将初始化函数init挂到jq原型上，这个初始化函数init的原型又指向jq的原型。

//模拟
    function jQuery(some) {
        return new jQuery.prototype.init(str);
    }
    jQuery.fn = jQuery.prototype = {
        init: function (some){
            // dosome
            return this;
        },
        func1: function() {
            //...
            return this;
        }
    }
    
    jQuery.prototype.init.prototype = jQuery.prototype;
    
    //实际
    jQuery = function (selector, context) {
    	return new jQuery.fn.init(selector, context);
    },
    jQuery.fn = jQuery.prototype
    init = jQuery.fn.init
    init.prototype = jQuery.fn;

![70][]

[70]: /images/20220519/d3be422378244bc39f160816c207f902.png

发表评论取消回复

表情：

评论列表（有 0 条评论，273人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery源码分析（一）

jQuery源码分析（一） > 我们知道在jQuery中在使用选择器或者给元素绑定事件的时候都是通过$来操作的。那么基于JavaScript面向对象的思想，我们可以把jQ

- 日理万妓/ 2022年12月29日 14:15/ 0 赞/ 213 阅读

相关 JQuery 源码分析 -1

jQuery的整体代码都是放在一个匿名函数里面的. (function(window, undefined) \{ //declare the reference of $/

清疚/ 2022年09月30日 14:54/ 0 赞/ 223 阅读

相关 jquery源码

jquery源码地址: [http://genius.it/ejohn.org/files/jquery-original.html?from=timeline&isappi

你的名字/ 2022年08月04日 16:53/ 0 赞/ 245 阅读

相关 jQuery源码分析之init方法

jQuery函数源码如下： \[javascript\] [view plain][] [copy][view plain] 1. jQuery = functio

曾经终败给现在/ 2022年05月23日 07:42/ 0 赞/ 256 阅读

相关 jQuery源码分析

一、jQuery如何做到不污染变量名并暴露出 $ 供用户使用 jQuery将变量和代码写进立即执行函数，通过函数来包裹所有的变量和方法，再在这个立即执行函数上将 jQuery

淩亂°似流年/ 2022年05月19日 05:56/ 0 赞/ 274 阅读

相关 jQuery源码分析系列：Callback深入

[jQuery源码分析系列：Callback深入][jQuery_Callback] 关于Callbacks [http://www.cnblogs.com/aaronj

àì夳堔傛蜴生んèń/ 2022年05月10日 23:20/ 0 赞/ 260 阅读

相关 jQuery EasyUI源码结构分析

memo 两个`jQuery`的静态成员(插件) `$.messager` `$.parser` 其调用方法的格式：`$.plu

淡淡的烟草味﹌/ 2022年02月19日 17:57/ 0 赞/ 664 阅读

相关 jQuery源码结构分析

sum 官网介绍 jQuery is a fast, small, and feature-rich JavaScript library. I

╰+哭是因爲堅強的太久メ/ 2022年02月19日 17:53/ 0 赞/ 378 阅读

相关浅析jQuery源码特性的分析

`jQuery`的总体架构可以分为：入口模块、底层模块和功能模块。这里，我们以`jquery-1.7`为例进行分析。一.jquery的总体架构 ![watermark

清疚/ 2021年09月18日 01:36/ 0 赞/ 419 阅读

相关 jQuery.lazyload使用及源码分析

前言：貌似以前自己也写过图片懒加载插件，但是新公司使用的是`jQuery.lazyload`插件，为了更好的运用，自己还是把源码看了遍，分别记录了如何使用，插件原理

朱雀/ 2021年06月26日 16:06/ 0 赞/ 652 阅读