对jQuery.extend()方法的分析
jQuery.extend方法是我们常用的方法,也是jQuery源码中的基础方法。它的主要作用是:将一个或多个“源对象”合并到一个“目标对象”中,并返回目标对象。它主要有三种表现形式:
a、jQuery.extend(destination, source1, source2, source3 ....)
b、jQuery.extend( source )
c、jQuery.extend(boolean, destination, source1, source2, source3 ....)
a方式第一个参数作为“目标对象”,其它参数作为“源对象”。
b方式只有一个参数,这里的这个参数变成了“源对象”,“目标对象”变成了jQuery。说白了就是"源对象"的属性,变成jQuery函数的静态方法或属性。
c方式的第一个参数是boolean类型的,第二个参数是"目标对象",剩下的参数是“源对象”。当第一个参数的值为true时,表示对象合并时支持“深拷贝”。
知道了函数的用法,我们肯定好奇jQuery是怎么实现的,想看看jQuery的源码。不过在看jQuery源码之前,我们不妨试着写写这个方法的功能,然后在回过头来看jQuery源码,感受可能更深,看到的东西可能越多。
我们先不要给自己压力,先从最简单的开始,要实现的方法就两个参数:第一个参数是:“目标对象”,第二个参数是:“源对象”。先实现把“源对象”合并到“目标对象”中。代码如下:
var Test = function(){}
Test.extend0 = function(destination, source){
for(var key in source){
destination[key] = source[key]
}
return destination
}
第二步实现可以传入多个参数,第一个参数是目标对象,其他参数是源对象。代码如下:
Test.extend1 = function(){
var destination = arguments[0]
var sourceArr = Array.prototype.slice.call(arguments,1)
for(var i = 0, len = sourceArr.length; i < len; i++){
var source = sourceArr[i]
for(var key in source){
destination[key] = source[key]
}
}
return destination
}
第三步实现只有一个参数时,将参数对象的属性附加给Test。代码如下:
Test.extend2 = function(){
var argumentsLen = arguments.length
if( argumentsLen === 1 ){
var source = arguments[0]
for(var key in source){
Test[key] = source[key]
}
}else{
var destination = arguments[0]
var sourceArr = Array.prototype.slice.call(arguments,1)
for(var i = 0, len = sourceArr.length; i < len; i++){
var source = sourceArr[i]
for(var key in source){
destination[key] = source[key]
}
}
return destination
}
}
第四步实现“深拷贝”,第一个参数是是否进行深拷贝的布尔判断,第二个参数是目标对象,其他参数是源对象。代码如下:
Test.extend3 = function(){
var argumentsLen = arguments.length
if( argumentsLen === 1 ){
var source = arguments[0]
for(var key in source){
Test[key] = source[key]
}
}else{
var firstItem = arguments[0]
var isBoolean = typeof firstItem === "boolean"
var destination = isBoolean ? arguments[1] : firstItem
var startNum = isBoolean ? 2 : 1
var sourceArr = Array.prototype.slice.call(arguments,startNum)
for(var i = 0, len = sourceArr.length; i < len; i++){
var source = sourceArr[i]
if( isBoolean ){
deepExtend( destination, source )
}else{
for(var key in source){
destination[key] = source[key]
}
}
}
return destination
}
} function deepExtend(destination, source){
for(var key in source){
var value = source[key]
if( value instanceof Array ){
destination[key] = arguments.callee.call( destination[key] || [], value )
}else if( value instanceof Object ){
destination[key] = arguments.callee.call( destination[key] || {}, value )
}else{
destination[key] = source[key]
}
}
return destination
}
好了,我们按照自己的思路,粗略的实现了自己的extend方法,现在就看下jQuery对extend的实现,对比学习一下。源码如下:
jQuery.extend = jQuery.fn.extend = function() {
var src, copyIsArray, copy, name, options, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false; // Handle a deep copy situation
if ( typeof target === "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
if ( target === copy ) {
continue;
} // 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;
}
}
}
} // Return the modified object
return target;
}
通过对比,我们发现:
a、jQuery在代码组织和实现上更加优雅。
b、jQuery考虑到了一些特殊情况。比如:
if ( target === copy ) {
continue;
}
这是为了避免无限循环,“源对象”的属性指向的是“目标对象”,当合并对象时,也就是将“自己”复制为“自己的属性”。这是不可取的。
c、jQuery在数组(jQuery.isArray)和“纯粹对象”(jQuery.isPlainObject)的判断上,考虑的更精细。
先自己想思路去实现,再反过来对比学习,这种学习方法感觉挺好的。a、加强了独立思考能力。b、发现新的学习内容。c、暴漏自己的不足。
对jQuery.extend()方法的分析的更多相关文章
- jQuery extend方法使用及实现
一.jQuery extend方法介绍 jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部代码实现的是相同的,只是功能却不太一样 ...
- jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究
终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...
- jquery.extend方法
jquery.extend()用来扩展jquery中方法,实现插件. 1.jQuery.extend函数详细用法! 扩展jQuery静态方法. 1$.extend({ 2test:function() ...
- jQuery.extend方法和开发中变量的复用
最近在用commonJS规范进行客户端开发,遇到如下问题: 一般一个模块内部可能会定义一系列变量或一系列相关变量,比如写了一个颜色选择弹框模块大概会有如下变量定义 var settings = { / ...
- jQuery extend方法介绍
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object);为扩展jQ ...
- jQuery extend 方法使用 (转)
方法介绍 jQuery 的 API 手册中,extend 方法挂载在 jQuery 和 jQuery.fn 两个不同的对象上,但在 jQuery 内部代码实现的是相同的,只是功能各不相同. 先看看官方 ...
- jQuery extend方法详解
先说个概念的东西: jQuery为开发插件提拱了两个方法,分别是: $.fn.extend(item):为每一个实例添加一个实例方法item.($("#btn1") 会生成一个 j ...
- 对jQuery.isArray方法的分析
jQuery.isArray方法应于判断是不是数组,是的话返回true,否则返回false.调用如:jQuery.isArray([]),返回true.其实现源码如下: isArray: Array. ...
- jQuery.extend()方法
定义和用法 jQuery.extend()函数用于将一个或多个对象的内容合并到目标对象. 注意: 1. 如果只为$.extend()指定了一个参数,则意味着参数target被省略.此时,target就 ...
随机推荐
- (转)实战Memcached缓存系统(1)Memcached基础及示例程序
1.Cache定义 (1)狭义概念:用于CPU的相对高速处理与主存(Main Memory)的相对低速处理的之间起到协调功能的硬件设备. (2)广义概念:用于速度相差较大的两种硬件之间,起到协调两者数 ...
- javascript笔记——JavaScript经典实例
转载自百度文库 http://wenku.baidu.com/view/9a703522bcd126fff7050bfa.html 1. oncontextmenu="window.even ...
- 坑爹系列:sizeof运算符
C语言里的sizeof关键字用于返回变量的类型宽度(变量所占的字节个数).例如: #include <stdio.h> int main() { int i = 0; int size = ...
- 【转】Windows Phone 调整屏幕亮度的简单实现
之前看到以及其它应用都有调节屏幕亮度的功能,还以为MS有相关的API,就去MSDN找了下,但是怎么都找不到.今天突然想到做自定义MessageBox时,由于要突出弹出框部分,所以会改变LayoutRo ...
- 删除vim-minimal导致sudo不可用
Ok, if anyone ends up in a similar situation, you can use pkexec yum install sudo. pkexec will let y ...
- Web前端新人笔记之了解Jquery
与javaScript相比,Jquery更简洁.浏览器的兼容性更强,语法更灵活,对xpath的支持更强大.一个$符就可以遍历文档中各级元素.例:在页面上有一个无序列表,我们需要将所有列表项中的文本内容 ...
- Android学习1
Activity学习(1) 只有一个Activity 进行Toast通知 Toast是一种短小的提醒,显示一段时间就会消失,试验学习,可以通过一个Button来实现. Button reg=(Butt ...
- ecshop 全站自定义title标题
对于SEO来说,能让标题自定义的将会大大增加SEO效果,提高独立商城的流量,今天小编就收集从网上弄来ecshop全站自定义代码,很全哦! 1.Ecshop商品分类页如何实现自定义Title 最近发现很 ...
- PySide 简易教程<一>-------Hello PySide
PySide 是一个python绑定的跨平台GUI Qt库.目前,支持Python的Qt库有两个PyQt和PySide.PySide是一个免费的软件,与PyQt不同之处在于使用了LGPL,允许PySi ...
- AVL树的python实现
AVL树是带有平衡条件的二叉查找树,一般要求每个节点的左子树和右子树的高度最多差1(空树的高度定义为-1). 在高度为h的AVL树中,最少的节点数S(h)由S(h)=S(h-1)+S(h-2)+1得出 ...