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;
};
最新文章
- 【转】JSch - Java实现的SFTP(文件下载详解篇)
- 在不同的pyhon版本中切换
- 数据库逆向框架代码生成工具:MyBatis Generator的使用
- JVM GC (一)
- :first与:first-child的区别
- 自己编写基于MVC的轻量级PHP框架
- (转载)MatLab绘图
- PL/SQL developer export/import (转)
- 实现单实例多线程安全API问题
- C# 中关于接口实现、显示实现接口以及继承
- 关于:target与定位动画的奇怪现象
- 使用HttpUtils完成Http Basic 认证
- Units of CSS
- 自定义锁屏图片 win7
- 微信小程序填坑之旅一(接入)
- socket shutdown和close的区别
- [UE4]FString常用API
- csdn的blog可以直接导入内含图片的word文档吗?
- MySQL Cluster(MySQL 集群) 初试
- 【Hadoop】HA 场景下访问 HDFS JAVA API Client