0

0

深度解析jquery中的核心功能

零下一度

零下一度

发布时间:2017-06-17 17:49:09

|

1733人浏览过

|

来源于php中文网

原创

核心功能包括:

jquery是如何定义的,如何调用的,如何扩展的。掌握核心方法是如何实现的,是理解jQuery源码的关键。这里理解了一切豁然开朗。

1,如何定义,即入口

// Define a local copy of jQuery

var jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor ‘enhanced’

    return new jQuery.fn.init( selector, context, rootjQuery );//jQuery对象仅仅是构造函数jQuery.prototype.init加强版

}

2,jQuery的原型,及与jQuery.fn.init的关系

//定义对象方法,也即只有通过$(“xx”).的方式才能调用。

jQuery.fn = jQuery.prototype = {

    init:function( selector, context, rootjQuery ) {

        return jQuery.makeArray( selector, this );

    }

    其他还有很多属性和方法

    属性有:jquery,constructor, selector, length

    方法有:toArray,get, pushStack,each, ready,slice, first,last,eq, map,end, push, sort, splice

}

WebShop开源网上购物系统
WebShop开源网上购物系统

WebShop网上商店系统专注中小企业、个人的网上购物电子商务解决方案,淘宝商城系统用户/个人首选开店的购物系统!综合5500多用户的意见或建议,从功能上,界面美观上,安全性,易用性上等对网店系统进行了深度的优化,功能更加强大,界面模板可直接后台选择。WebShop网上商店系统特点:1 对于中小企业、个体、个人、店主和淘宝易趣等卖家,可利用WebShop快速建立购物网。2 源代码开放,利用WebS

下载

//把jQuery.prototype赋给jQuery.prototype.init.prototype,是为了后面的实例化

// Give the init function the jQuery prototype for later instantiation

jQuery.fn.init.prototype = jQuery.fn;

也即是,$(“xx”)拥有了实例方法,可以调用。(调用jQuery.prototype下定义的方法)

为什么jQuery要返回jQuery.fn.init对象?

jQuery = function( selector, context ) {

// The jQuery object is actually just the init constructor ‘enhanced’

return new jQuery.fn.init( selector, context, rootjQuery );

}

jQuery.fn = jQuery.prototype = {

    ……

}

jQuery.fn.init.prototype = jQuery.fn;

在 stackoverflow 上找到类似问题:

http://stackoverflow.com/questions/4754560/help-understanding-jquerys-jquery-fn-init-why-is-init-in-fn

还有这个

http://stackoverflow.com/questions/1856890/why-does-jquery-use-new-jquery-fn-init-for-creating-jquery-object-but-i-can/1858537#1858537

I believe the code is written in this fashion so that the new keyword is not required each time you instantiate a new jQuery object and also to delegate the logic behind the object construction to the prototype. The former I believe is to make the library cleaner to use and the latter to keep the initialisation logic cleanly in one place and allow init to be recursively called to construct and return an object that correctly matches the passed arguments.

3,extend扩展对象方法和静态方法原理

jQuery.extend = jQuery.fn.extend = function() {

    var target = arguments[0] || {};

    return target;

}

使用extend就方便了,无非就是$.extend({});和$.fn.extend({});如果你能在看到fn时理解联想到是jQuery.prototype就好了。

再通过this作用域看一下:

$.extend ->this是$-> this.aa()

$.fn.extend->this是$.fn-> this.aa()

附extend实现细节:

使用场景:

1,扩展一些函数

只有一个参数。例如:$.extend({f1:function(){},f2:function(){},f3:function(){}})

2,合并多个对象到第一个对象

(1)浅copy,第一个参数是目标对象。例如

var a = {name:”hello”}

var b = {age:30}

$.extend(a,b);//a={name:”hello”,age:30}

(2)深copy,第一个参数是TRUE,第二个参数是目标对象。例如

var a = {name:{job:”it”}};

var b = {name:{age: 30 }};

//$.extend(a,b);

$.extend(true,a,b);

console.log(a);

jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[0] || {},
        i = 1,
        length = arguments.length,
        deep = false;

    // 是不是深复制  Handle a deep copy situation
    if ( typeof target === "boolean" ) {
        deep = target;
        target = arguments[1] || {};
        // skip the boolean and the target
        i = 2;
    }

    // 不是对象类型  Handle case when target is a string or something (possible in deep copy)
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
        target = {};
    }

    // 扩展插件的情况  extend jQuery itself if only one argument is passed
    if ( length === i ) {//$.extend({f1:function(){},f2:function(){},f3:function(){}})
        target = this;//this是$,或是$.fn
        --i;
    }

    for ( ; i < length; i++ ) {//可能有多个对象扩展到第一个对象上
        // Only deal with non-null/undefined values
        if ( (options = arguments[ i ]) != null ) {//options是一个对象
            // Extend the base object
            for ( name in options ) {
                src = target[ name ];  //src是target里已经存在的value(也可能不存在)
                copy = options[ name ];//copy是待合入的一个value

                // 防止循环引用  Prevent never-ending loop
                if ( target === copy ) {//例如:var a={};$.extend(a,{name:a});//可能导致循环引用
                    continue;
                }

                // if是深复制else是浅复制  Recurse if we're merging plain objects or arrays
                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && jQuery.isArray(src) ? src : [];

                    } else {
                        clone = src && jQuery.isPlainObject(src) ? src : {};
                    }

                    // 亮了,直至剥离至最深一层非对象类型,而且是逐个。Never move original objects, clone them
                    target[ name ] = jQuery.extend( deep, clone, copy );

                // Don't bring in undefined values
                } else if ( copy !== undefined ) {
                    target[ name ] = copy;//target[ name ] = options[ name ];
                }
            }
        }
    }

    // Return the modified object
    return target;
};

jQuery.extend({…})分析

看一下是如何写的

jQuery.extend({

prop:””

method:function(){}

});

可以看出,这些方法是jQuery的静态属性和方法(也即是工具方法),将来既可以直接提供给用户使用,也可以在内部使用。

具体实现的工具属性和方法有(同时也标注了哪些在内部使用)

jQuery.extend({

        expando  :  生成唯一JQ字符串(内部)

        noConflict()  :  防止冲突

        isReady  :  DOM是否加载完(内部)

        readyWait  :  等待多少文件的计数器(内部)

        holdReady()  :  推迟DOM触发

        ready()  :  准备DOM触发

        isFunction()  :  是否为函数

        isArray()  :  是否为数组

        isWindow()  :  是否为window

        isNumeric()  :  是否为数字

        type()  :  判断数据类型

        isPlainObject()  :  是否为对象自变量

        isEmptyObject()  :  是否为空的对象

        error()  :  抛出异常

        parseHTML()  :  解析节点

        parseJSON()  :  解析JSON

        parseXML()  :  解析XML

        noop()  :  空函数

        globalEval()  :  全局解析JS

        camelCase()  :  转驼峰

        nodeName()  :  是否为指定节点名(内部)

        each()  :  遍历集合

        trim()  :  去前后空格

        makeArray()  :  类数组转真数组

        inArray()  :  数组版indexOf

        merge()  :  合并数组

        grep()  :  过滤新数组

        map()  :  映射新数组

        guid  :  唯一标识符(内部)

        proxy()  :  改this指向

        access()  :  多功能值操作(内部)

        now()  :  当前时间

        swap()  :  CSS交换(内部)

});

jQuery.ready.promise = function(){};  监测DOM的异步操作(内部)

function isArraylike(){}  类似数组的判断(内部)

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 5.1万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.9万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号