0

0

解析jquery中的核心功能实例

零下一度

零下一度

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

|

1197人浏览过

|

来源于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

}

贞龙网店商城电子商务系统java版
贞龙网店商城电子商务系统java版

BIZOSS-B2C是脱胎于贞龙B2B大型平台的网上商城系统、网上商店系统、网上购物系统的企业级B2C电子商务解决方案。系统设置:这里包含了网店的常用功能和全局配置的开关。包括 商店设置 、支付方式和配送方式 、邮件服务器设置、地区列表、友情链接、自定义导航栏、站点地图。商品管理:网店展示商品的核心。其中包括了 商品分类、商品类型、商品品牌、商品回收站、商品上下架等一些设置。促销管理:这个是我们网

下载

//把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不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

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

精品课程

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

共42课时 | 5.2万人学习

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

共132课时 | 10万人学习

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号