extend()是jQuery中一個重要的函數,作用是實現對物件的擴展, 它經常用於jQuery插件的開發,jQuery內部也使用它來擴展屬性方法,如上篇文章中講到的noConflict方法,就是用extend方法來擴充的。
在jQuery的API手冊中,我們看到,extend實際上是掛載在jQuery和jQuery.fn上的兩個不同方法,儘管在jQuery內部jQuery.extend()和jQuery.fn.extend()是用相同的程式碼實現的,但是它們的功能卻不太一樣。來看一下官方API對extend的解釋:
我們知道,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; } // 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 ) { 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; };
很大一堆程式碼,乍看起來難以理解,其實程式碼的大部分都是用來實現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 = {}; } // 当只含有一个参数时,被扩展的对象是jQuery或jQuery.fn 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外掛而煩惱了。