简述jq的实现原理

最新推荐文章于 2024-09-04 01:58:19 发布

Shaft_

最新推荐文章于 2024-09-04 01:58:19 发布

阅读量3k

点赞数 1

分类专栏： javascript 文章标签： jq

本文链接：https://blog.csdn.net/Shaft_/article/details/83345868

版权

该博客详细解析了jQuery（jq）的实现原理，包括沙箱机制，通过自执行函数封装实现细节并对外提供jQuery和$符号。讨论了无new化的jq对象创建过程，解释了链式调用如何通过返回this实现。此外，还区分了$.extend与$.fn.extend的不同用法，前者用于扩展全局函数，后者扩展实例方法。最后，介绍了$.extend()的深浅复制概念。

摘要由CSDN通过智能技术生成

简述jq的实现原理

1. 沙箱：

jq利用自执行函数，将所有的实现细节封装在自执行函数内，对外仅仅暴露jQuery和$符号：

    (function(w, u) {
    	"use strict";
    	w.jQuery = w.$ = jQuery;
    	var a;
    	if (a == u)
    		return;
    })(window);

2. 无new化

在jq中我们使用选择器，是直接使用$(selector)的，但是其实他返回的是一个jq对象，其中挂载了很多jq方法。

    (function(window, undefined){
        jQuery = function(selector, context){
            return new jQuery.fn.init(selector, context);
        },
        
        jQuery.fn = jQuery.prototype = {
            init: function(selector, context, rootjQuery){
                // ...
            }
        },
        
        
        jQuery.fn.init.prototype = jQuery.fn;
    })(window);

当我们传入一个选择器时，会返回new jQuery.fn.init(selector, context);而当我们传入空选择器时，在init中会