jquery源码学习之extend
jquery的extend方法现项目中经常使用,现在了解一下它的实现。
说起extend就要先了解一个jQuery的$.extend和$.fn.extend作用及区别
jQuery为开发插件提拱了两个方法,分别是:
1. jQuery.fn.extend();
2. jQuery.extend();
虽然 javascript没有明确的类的概念,但是可以构建类似类的定义。
jQuery便是一个封装得非常好的类,比如,$("#btn1") 会生成一个 jQuery类的实例,理解这一点很重要。
(1). jQuery.extend(object);
它是为jQuery类添加类方法,可以理解为添加静态方法。如:
a.jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // 2
jQuery.max(4,5); // 5
b. jQuery.extend(target, object1, [objectN])用一个或多个其他对象来扩展一个对象,返回被扩展的对象。var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
结果:settings == { validate: true, limit: 5, name: "bar" }
(2). jQuery.fn.extend(object);
$.fn是什么?
$.fn是指jQuery的命名空间,fn上的成员(方法function及属性property),会对jQuery实例每一个有效。
查看jQuery代码,就不难发现。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
};
原来 jQuery.fn = jQuery.prototype.
所以,它是对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:
$.fn.extend({
doAlertWhileClick:function() {
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").doAlertWhileClick(); // 页面上为:
$("#input1") 为一个jQuery实例,当它调用成员方法 doAlertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。
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" ) { //判断第一个参数是否为boolean
deep = target; //如果是,就证明目标对象是第二个参数,第一个参数是来判断是不是深拷贝的
// Skip the boolean and the target
target = arguments[ i ] || {};
i++;
} // 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 ( i === length ) {
target = this;
i--;
} for ( ; i < length; i++ ) { // Only deal with non-null/undefined values
if ( ( options = arguments[ i ] ) != null ) { // Extend the base object
for ( name in options ) {
src = target[ name ];
copy = options[ name ]; // Prevent never-ending loop
////解决循环引用的问题,比如:var a ={};$.extend( a , { name:a } ),如果不做这个处理,将会得到一个死循环的对象(a{name:{name:{name:{...}}}}),加了这个,就扩展不上,a还是{}
if ( target === copy ) {
continue;
} // Recurse if we're merging plain objects or arrays
// //如果是深拷贝,并且扩展对象的name属性值存在,并且扩展对象是一个对象自变量(或者是一个数组),就进入if语句
if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
( copyIsArray = jQuery.isArray( copy ) ) ) ) { if ( copyIsArray ) {// //如果扩展对象的name属性值是数组,进入if语句
copyIsArray = false;
clone = src && jQuery.isArray( src ) ? src : []; ////如果目标对象的name属性值是一个数组,就取这个数组,如果不是,就取[] } else {
clone = src && jQuery.isPlainObject( src ) ? src : {};////如果目标对象的name属性值是一个对象自变量,就取这个对象自变量,如果不是,就取{}
} // Never move original objects, clone them
target[ name ] = jQuery.extend( deep, clone, copy );
//递归调用extend,深拷贝扩展对象的name属性值(对象或者数组)到clone。
//递归结束后,返回clone,赋值给目标元素的name属性
//这就把扩展对象的所有属性都扩展到目标对象中了。
// Don't bring in undefined values
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
} // Return the modified object
return target;
};
引:http://www.cnblogs.com/Dlonghow/p/4142034.html
http://www.cnblogs.com/chaojidan/p/4145168.html
最新文章
- Kotlin的android扩展:对findViewById说再见(KAD 04)
- 上海有线通下载exe会302转发请求
- virt-manager管理整个云平台的instances
- wheel和staff分组
- Underscore.js 中 _.throttle 和 _.debounce 的差异
- RCF
- 劳动节BT5 aircrack-ng战记
- 深入理解最强桌面地图控件GMAP.NET ---离线地图
- 调用接口http封装
- python每天一个小练习-列表元素非唯一
- jacascript DOM节点——元素节点、属性节点、文本节点
- 查看centos系统位数和强制关闭yum
- Idea创建一个Springboot单模块项目
- 异步多线程 Task理解
- 前端开发笔记(2)css基础(上)
- JavaScript 获取地址栏参数
- qt——exec()的基本用法
- 物理内存不够用,临时增大Linux交换分区的方法
- 二:HTML基础
- 关于在windows server 2008 上部署wampserver2.5部署的问题
热门文章
- 三部曲一(数据结构)-1011-Sorting It All Out
- PAT (Basic Level) Practise:1026. 程序运行时间
- Java笔记3-for,switch循环,格式化输出,随机数
- bootstrap-8
- mac 下更新 .bash_profile 文件
- HTML5 history新特性pushState、replaceState,popstate
- [转]Windows系统中监控文件复制操作的几种方式
- HTML5外包
- Eclipse *下载
- VS2013添加解决方案内项目的引用,编译时提示找不到文件