jquery核心功能分析
作者: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核心功能分析的更多相关文章
- Jquery核心函数
在Jquery中,所有的DOM对象都将封装成Jquery对象,而且只有Jquery对象才能使用Jquery方法或者属性来执行相应的操作. 所以Jquery提供了一个可以将DOM对象封装成Jquery对 ...
- jquery 核心
1.jquery核心函数 1.1 jQuery([selector,[context]]); $("#id"),$(document.body),$(" ...
- JQuery --- 第一期 (初识jQuery, JQuery核心函数和工具方法)
个人学习笔记 初识jQuery 1.我的第一个JQuery <!DOCTYPE html> <html lang="en"> <head> & ...
- Jq_DOM元素方法跟JQuery 核心函数跟JQuery 事件方法
JQuery DOM 元素 函数 描述 .get() 从队列中删除所有未运行的项目. .ind ...
- 13.11.20 jquery 核心 siblings() 获得同类(不包含自己)循环所有,
jquery 核心1.选择器,2. 创建dom 元素 3. jquery 执行时 4. 延迟执行 5. 循环 6. 计算长度.7.8 获得选择器和所在节点 9. 获得下标 10. 元素存放数据 11 ...
- jQuery笔记: 基本概念与jQuery核心
目录 初识jQuery 为什么要使用jQuery? 如何使用jQuery? jQuery与js加载模式不同 jQuery入口函数的四种写法 jQuery的访问符冲突问题 jQuery核心函数和jQue ...
- jQuery核心函数和静态方法
jQuery核心函数 从jQuery文档中可以看出,jQuery核心函数一共3大类4小类 jQuery(callback) 当DOM加载完成后执行传入的回调函数 <script> $(fu ...
- 浅谈 jQuery 核心架构设计
jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...
- 谈一谈jQuery核心架构设计(转)
jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...
随机推荐
- div.2/Bellovin<最长上升子序列>
题意: 序列arr[i--n];输出以a[i]为结尾的最长上升子序列.1<=n<=100000; 思路: O(n*log(n)),求最长上升子序列. #include<cstdio& ...
- ueditor 文本编辑器
百度编辑器 压缩包在文件里 百度UEditor编辑器使用教程与使用方法 发布时间:2014-08-23 14:23:34.0 作者:青岛做网站 我们在做网站的时候,网站后台系统一般都会用到 ...
- ALAssetsLibrary 照片相关 浅析
ALAssetsLibrary 提供了访问iOS设备下”照片”应用下所有照片和视频的接口: 从 ALAssetsLibrary 中可读取所有的相册数据,即 ALAssetsGroup 对象列表: 从每 ...
- 在写一个iOS应用之前必须做的7件事
转载自:http://www.cocoachina.com/ios/20160316/15685.html 原文:https://medium.com/ios-os-x-development/7-t ...
- c语言判断打开文件是否为空的方法
void writeReslut2(char* caseName,double averageTime,double max, double min,int loops,int size){ fpos ...
- css 7.30
1.外提到内联元素,我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界(float时margin)问题 2.一般来说,可以为所有块级元素应用 te ...
- Hrbustoj 2266 Legendary Weights(辗转相除求最大公约数)
题意:这个题目的意思是给出一些砝码,问我们能不能根据这些砝码称量出任意重量的物品,最大公约数并不难求,难的在于如何建立这个模型. 思路:根据数论的基础知识,两个数a,b的最大公约数是a*x + b*y ...
- 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( ...
- 3398: [Usaco2009 Feb]Bullcow 牡牛和牝牛
3398: [Usaco2009 Feb]Bullcow 牡牛和牝牛 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 243 Solved: 167[S ...
- EnglishWords----1
upon在...上面 upright垂直的,直立的 upward向上的 outward外面的,向外的 downward向下的 vertical垂直的 parallel平行的 sow播种 cut切 ch ...