jQuery中extend函数详解


Posted in Javascript onFebruary 13, 2015

在jQuery的API手册中,我们看到,extend实际上是挂载在jQuery和jQuery.fn上的两个不同方法,尽管在jQuery内部jQuery.extend()和jQuery.fn.extend()是用相同的代码实现的,但是它们的功能却不太一样。来看一下 官方API对extend 的解释:

代码如下:

jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中)

jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性,来扩展一个新的jQuery实例方法)

我们知道,jQuery有静态方法和实例方法之分, 那么jQuery.extend()和jQuery.fn.extend()的第一个区别就是一个用来扩展静态方法,一个用来扩展实例方法。用法如下:

jQuery.extend({

sayhello: function (){

console.log( "Hello,This is jQuery Library" );

}

})

$.sayhello(); //Hello, This is jQuery Library

jQuery.fn.extend({

check: function () {

return this .each( function () {

this .checked = true ;

});

},

uncheck: function () {

return this .each( function () {

this .checked = false ;

});

}

})

$( "input[type='checkbox']" ).check(); //所有的checkbox都会被选择

注意两种调用插件的方式,一种是直接用$调用,另外一种是用$()调用,另外jQuery.extend()接收多个对象作为参数,如果只有一个参数,则把这个对象的属性方法附加到jQuery上,如果含有多个参数,则把后面的对象的属性和方法附加到第一个对象上。jQuery extend的实现源码:

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;

}

if ( typeof target !== "object" && !jQuery.isFunction(target) ) {

target = {};

}

if ( length === i ) {

target = this ;

--i;

}

for ( ; i < length; i++ ) {

if ( (options = arguments[ i ]) != null ) {

// Extend the base object

for ( name in options ) {

src = target[ name ];

copy = options[ name ];

// Prevent never-ending loop

if ( target === copy ) {

continue ;

}

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 : {};

}

target[ name ] = jQuery.extend( deep, clone, copy );

// Don't bring in undefined values

} else if ( copy !== undefined ) {

target[ name ] = copy;

}

}

}

}

// Return the modified object

return target;

};

很大一堆代码,乍看起来难以理解,其实代码的大部分都是用来实现jQuery.extend()中有多个参数时的对象合并,深度拷贝问题,如果去掉这些功能,让extend只有扩展静态和实例方法的功能,那么代码如下:

jQuery.extend = jQuery.fn.extend = function (obj){

//obj是传递过来扩展到this上的对象

var target= this ;

for ( var name in obj){

//name为对象属性

//copy为属性值

copy=obj[name];

//防止循环调用

if (target === copy) continue ;

//防止附加未定义值

if ( typeof copy === 'undefined' ) continue ;

//赋值

target[name]=copy;

}

return target;

}

下面再来对extend方法进行注释解释:

jQuery.extend = jQuery.fn.extend = function () {

// 定义默认参数和变量

// 对象分为扩展对象和被扩展的对象

//options 代表扩展的对象中的方法

//name 代表扩展对象的方法名

//i 为扩展对象参数起始值

//deep 默认为浅复制

var options, name, src, copy, copyIsArray, clone,

target = arguments[0] || {},

i = 1,

length = arguments.length,

deep = false ;

//对接下来的参数进行处理

if ( typeof target === "boolean" ) {

deep = target;

target = arguments[1] || {};

i = 2;

}

if ( typeof target !== "object" && !jQuery.isFunction(target) ) {

target = {};

}

if ( length === i ) {

target = this ;

--i;

}

//对从i开始的多个参数进行遍历

for ( ; i < length; i++ ) {

// 只处理有定义的值

if ( (options = arguments[ i ]) != null ) {

// 展开扩展对象

for ( name in options ) {

src = target[ name ];

copy = options[ name ];

// 防止循环引用

if ( target === copy ) {

continue ;

}

// 递归处理深拷贝

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 : {};

}

target[ name ] = jQuery.extend( deep, clone, copy );

// 不处理未定义值

} else if ( copy !== undefined ) {

//给target增加属性或方法

target[ name ] = copy;

}

}

}

}

//返回

return target;

};

弄懂了jQuery扩展的原理,相信以后再也不用为编写jQuery插件而烦恼了。

Javascript 相关文章推荐
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
详解js类型判断
May 22 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 Javascript
使用js和canvas实现时钟效果
Sep 08 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 #Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 #Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 #Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 #Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 #Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 #Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 #Javascript
You might like
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
php生成无限栏目树
2017/03/16 PHP
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
Python标准异常和异常处理详解
2015/02/02 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
python与mysql数据库交互的实现
2020/01/06 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
金融行业职业生涯规划范文
2014/01/17 职场文书
工商干部先进事迹
2014/05/14 职场文书
五好关工委申报材料
2014/05/31 职场文书
学校督导评估方案
2014/06/10 职场文书
测绘工程专业求职信
2014/07/15 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
客房部经理岗位职责
2015/02/02 职场文书
升职自我推荐信范文
2015/03/25 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书