作者:zccst

核心功能包括:

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

...

}

//把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下定义的方法)

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核心功能分析的更多相关文章

  1. Jquery核心函数

    在Jquery中,所有的DOM对象都将封装成Jquery对象,而且只有Jquery对象才能使用Jquery方法或者属性来执行相应的操作. 所以Jquery提供了一个可以将DOM对象封装成Jquery对 ...

  2. jquery 核心

    1.jquery核心函数    1.1 jQuery([selector,[context]]);        $("#id"),$(document.body),$(" ...

  3. JQuery --- 第一期 (初识jQuery, JQuery核心函数和工具方法)

    个人学习笔记  初识jQuery 1.我的第一个JQuery <!DOCTYPE html> <html lang="en"> <head> & ...

  4. Jq_DOM元素方法跟JQuery 核心函数跟JQuery 事件方法

    JQuery DOM 元素 函数                            描述 .get()                           从队列中删除所有未运行的项目. .ind ...

  5. 13.11.20 jquery 核心 siblings() 获得同类(不包含自己)循环所有,

    jquery 核心1.选择器,2. 创建dom 元素 3. jquery 执行时 4. 延迟执行 5. 循环 6. 计算长度.7.8 获得选择器和所在节点 9. 获得下标 10. 元素存放数据  11 ...

  6. jQuery笔记: 基本概念与jQuery核心

    目录 初识jQuery 为什么要使用jQuery? 如何使用jQuery? jQuery与js加载模式不同 jQuery入口函数的四种写法 jQuery的访问符冲突问题 jQuery核心函数和jQue ...

  7. jQuery核心函数和静态方法

    jQuery核心函数 从jQuery文档中可以看出,jQuery核心函数一共3大类4小类 jQuery(callback) 当DOM加载完成后执行传入的回调函数 <script> $(fu ...

  8. 浅谈 jQuery 核心架构设计

    jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...

  9. 谈一谈jQuery核心架构设计(转)

    jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...

随机推荐

  1. div.2/Bellovin<最长上升子序列>

    题意: 序列arr[i--n];输出以a[i]为结尾的最长上升子序列.1<=n<=100000; 思路: O(n*log(n)),求最长上升子序列. #include<cstdio& ...

  2. ueditor 文本编辑器

    百度编辑器       压缩包在文件里 百度UEditor编辑器使用教程与使用方法 发布时间:2014-08-23 14:23:34.0 作者:青岛做网站 我们在做网站的时候,网站后台系统一般都会用到 ...

  3. ALAssetsLibrary 照片相关 浅析

    ALAssetsLibrary 提供了访问iOS设备下”照片”应用下所有照片和视频的接口: 从 ALAssetsLibrary 中可读取所有的相册数据,即 ALAssetsGroup 对象列表: 从每 ...

  4. 在写一个iOS应用之前必须做的7件事

    转载自:http://www.cocoachina.com/ios/20160316/15685.html 原文:https://medium.com/ios-os-x-development/7-t ...

  5. c语言判断打开文件是否为空的方法

    void writeReslut2(char* caseName,double averageTime,double max, double min,int loops,int size){ fpos ...

  6. css 7.30

    1.外提到内联元素,我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界(float时margin)问题 2.一般来说,可以为所有块级元素应用 te ...

  7. Hrbustoj 2266 Legendary Weights(辗转相除求最大公约数)

    题意:这个题目的意思是给出一些砝码,问我们能不能根据这些砝码称量出任意重量的物品,最大公约数并不难求,难的在于如何建立这个模型. 思路:根据数论的基础知识,两个数a,b的最大公约数是a*x + b*y ...

  8. Python -- lambda, map, filter

    lambda f = lambda x : x * 2 f(5) f = lambda x,y,z : x+y+z f(2,1,3) map list(map(lambda x:x[0].upper( ...

  9. 3398: [Usaco2009 Feb]Bullcow 牡牛和牝牛

    3398: [Usaco2009 Feb]Bullcow 牡牛和牝牛 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 243  Solved: 167[S ...

  10. EnglishWords----1

    upon在...上面 upright垂直的,直立的 upward向上的 outward外面的,向外的 downward向下的 vertical垂直的 parallel平行的 sow播种 cut切 ch ...