根據《jQuery高級編程》的描述，jQuery插件開發方式主要有三種： 1. 通過$.extend()來擴展jQuery 2. 通過$.fn 向jQuery添加新的方法 3. 通過$.widget()應用jQuery UI的部件工廠方式創建 通常我們使用第二種方法來進行簡單插件開發，說簡單是相對于第三種方式。第三種方式是用來開發更高級jQuery部件的，該模式開發出來的部件帶有很多jQuery內建的特性，比如插件的狀態信息自動保存，各種關于插件的常用方法等，非常貼心，這里不細說。 而第一種方式又太簡單，僅僅是在jQuery命名空間或者理解成jQuery身上添加了一個靜態方法而以。所以我們調用通過$.extend()添加的函數時直接通過$符號調用（$.myfunction()）而不需要選中DOM元素($('#example').myfunction())??這種方式無法利用jQuery強大的選擇器帶來的便利 重載原型： ## **jQuery.extend(\[deep\], target, object1, \[objectN\])**? ? ? ?? 用一個或多個其他對象來擴展一個對象，返回被擴展的對象 意思就是合并其他對象到目標對象來擴展對象。 **參數：第一個參數為布爾類型? 其他都是對象類型** ?? deep:?????? 可選。如果設為true，則遞歸合并（不支持false）。? boolean ?? target:???? 待修改（目標）對象。 ?? object1:?? 待合并到第一個對象的對象。? ? ? ? ?? objectN:?? 可選。待合并到第一個對象的對象。 * 如果第一個參數設置為true，則jQuery返回一個深層次的副本，遞歸地復制找到的任何對象（取target和object屬性的并集）。否則的話，object會完全的將屬性名相同的屬性的值替換掉。 * 未定義的屬性將不會被復制，然而從對象的原型繼承的屬性將會被復制。 舉例有第一個參數的區別： 第一個參數未設置：? ~~~ <div id="log"></div> <script> var target = { 蘋果: 0, 香蕉: { 重量: 52, 價格: 100 }, 櫻桃: 97 }; var object1 = { 香蕉: { 價格: 200 }, 榴蓮: 100 }; // 合并object1到target $.extend( target, object1 ); $( "#log" ).append( JSON.stringify( target) ); </script> 結果： ~~~ ~~~ { “蘋果”：0， “香蕉”：{ “價格”：200}， “櫻桃”：97 “榴蓮”：100} ~~~ 第一個參數設置為true ~~~ <div id="log"></div> <script> ~~~ ~~~ var target = { 蘋果: 0, 香蕉: { 重量: 52, 價格: 100 }, 櫻桃: 97 }; var object1 = { 香蕉: { 價格: 200 }, 榴蓮: 100 }; // 合并object1到target ~~~ ~~~ $.extend( true, target, object1 ); // $( "#log" ).append( JSON.stringify( object1 ) ); </script> 結果： ~~~ ~~~ { “蘋果”：0， “香蕉”：{ “重量”：52， “價格”：200}， “櫻桃”：97 “榴蓮”：100} ~~~ 合并默認值和選項，而不修改默認值。這是一個常見的插件開發模式? ? 即target參數搞成 {} 就 不會改變target的屬性 ~~~ <div id="log"></div> <script> var defaults = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; // 合并 默認值 和 options,無需修改默認值 var settings = $.extend( {}, defaults, options ); $( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" ); $( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" ); $( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" ); </script> 結果： ~~~ **defaults --**?{“validate”：false，“limit”：5，“name”：“foo”} **options --**?{“validate”：true，“name”：“bar”} **settings --**?{“validate”：true，“limit”：5，“name”：“bar”} #### jQuery.extend( target \[, object1 \] \[, objectN \] ) ? ?target:???? 待修改（目標）對象。 ?? object1:? ?可選。待合并到第一個對象的對象。? ? ? ? ?? objectN:?? 可選。待合并到第一個對象的對象。 1、如果不指定target，則給jQuery命名空間本身進行擴展。這有助于插件作者為jQuery增加新方法。除了目標對象如果還傳入其他對象 那么將接收新屬性，如果它是唯一參數，則會擴展jQuery名稱空間 當$.extend()提供了兩個或多個對象參數時，所有對象的屬性都將添加到目標對象target。如果參數為`null`或`undefined`將被忽略 如果$.extend()只提供一個參數，這意味著目標參數被省略。在這種情況下，jQuery對象本身被假定為目標。通過這樣做，可以將新函數添加到jQuery名稱空間。這對希望向JQuery添加新方法的插件作者非常有用 請記住，目標對象（第一個參數）將被修改，并且也將從中返回`$.extend()`。但是，如果要保留兩個原始對象，可以通過將空對象作為目標來傳遞（如果想要得到合并的結果卻又不想修改target目標對象的結構），那么： ~~~ var newObj=$.extend({},object1,object2,object3...)//也就是將"{}"作為target參數。 ~~~ 例子: ~~~ var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}) //那么合并后的結果 可以看到，相同的參數時，后面的將被覆蓋掉。如：Jerry覆蓋掉了Tom //result={name:"Jerry",age:21,sex:"Boy"} ~~~ ## jQuery.fn.extend( object ) 例子：js控制check默認選中狀態 ~~~ <label><input type="checkbox" name="foo"> Foo</label> <label><input type="checkbox" name="bar"> Bar</label> <script> jQuery.fn.extend({ //擴展選中方法 check: function() { return this.each(function() {//這里的this 就是 jQuery對象。這里return 為了支持鏈式調用 this.checked = true; }); }, //擴展未選中方法 uncheck: function() { return this.each(function() { this.checked = false; }); } }); // 調用選中的方法 $( "input[type='checkbox']" ).check(); </script> ~~~ **?jQuery.extend和jQuery.fn.extend的區別：** ?$.extend是直接把函數掛載在jQuery函數體上 這在代碼中直接反映便是$.函數名不需要實例化便可訪問即使實例化反而訪問不到（類級別），而$.fn.extend函數 是把函數掛載在jQuery對象上 這在代碼中的直接表現就是$(dom).函數名 也就是說必須實例化jQuery對象之后才能調用（對象級別） ~~~ 1、類級別 類級別你可以理解為拓展jquery類，最明顯的例子是$.ajax(...),為jQuery類添加添加類方法，相當于靜態方法。 開發擴展其方法時使用$.extend方法，即jQuery.extend(object);? $.extend({ 　　add:function(a,b){return a+b;} }); //$.add(3,4); 插件擴展中一般用他來設置選項值 如： ~~~ ~~~ var defaults = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; // 合并 默認值 和 options,無需修改默認屬性值 var settings = $.extend( {}, defaults, options ); ~~~ ~~~ 2、對象級別 對象級別則可以理解為基于對象的拓展，如$("#table").changeColor(...); 這里這個changeColor呢，就是基于對象的拓展了。 開發擴展其方法時使用$.fn.extend方法，即jQuery.fn.extend(object);? $.fn.extend({ add:function(){return a+b;} }) //$('xxx').add(); 插件開發中一般用他來定義擴展的方法 ~~~ ~~~ $.fn.extend({ check:function(){ return this.each({ this.checked=true; }); }, uncheck:function(){ return this.each({ this.checked=false; }); } }); 頁面中調用： $('input[type=checkbox]').check(); $('input[type=checkbox]').uncheck(); ~~~ 不是某個框架的插件我們一般傳入window? 如jquery最開始的封裝： ~~~ (function( window, undefined ) { //window.jQuery = window.$ = jQuery; })(window); ~~~ 那么繼承與jquery的插件則為： ~~~ (function($){ //..... })(jQuery); ~~~ 往下走? 為插件新添加一個設置文本字體大小和顏色的函數： ~~~ (function($){ $.fn.extend({ customfunc:function(options){ //定義默認的值 var defaults = {color:'red', size:'16px'}; //組裝參數，如果傳入參數則接受并覆蓋掉默認的參數，否則接受默認的參數 opts = $.extend({},defaults,options); // return $(this).each(function(){ //設置元素的顏色 $(this).css({'color':opts.color}); //設置元素的字體大小 $(this).css({'font-size':opts.size}); }); } }); })(jQuery) //用法 $('.xxx').customfunc({color:'blue',size:'30px'}); ~~~ ~~~ (function($){ $.fn.customfnc=function(options){ $.fn.customfnc.defaults={color:'red',size:'16px'} return this.each(function() { var opts = $.extend({},$.fn.customfnc.defaults,options); //設置元素的顏色 $(this).css({'color':opts.color}); //設置元素的字體大小 $(this).css({'font-size':opts.size}); } } })(jQuery); ~~~ ?demo3 ~~~ ;(function($, window, document,undefined) { //定義Beautifier的構造函數 這里傳入$是需要jquery的強大的選擇器 var Beautifier = function(ele, opt) { this.$element = ele, this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration': 'none' }, this.options = $.extend({}, this.defaults, opt) } //定義Beautifier的方法 Beautifier.prototype = { beautify: function() { return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize, 'textDecoration': this.options.textDecoration }); } } //在插件中使用Beautifier對象 $.fn.myPlugin = function(options) { //創建Beautifier的實體 var beautifier = new Beautifier(this, options); //調用其方法 return beautifier.beautify(); } })(jQuery, window, document); ~~~ demo3調用? ? ?https://www.cnblogs.com/ajianbeyourself/p/5815689.html#\_label0 ~~~ <script type="text/javascript"> ;(function($,window,document,undefined) { $('a').myPlugin({ 'color': '#2C9929', 'fontSize': '20px' }); })(jQuery,window,document) </script> ~~~ 匿名函數：(function(){ }) 匿名函數自執行（自動執行） ~~~ (function () { alert(11111) var a=10; })(); //a is not defined。 alert(a);//但是里面的變量和函數我們在外部是訪問不了的 ~~~ 一個插件只需要對外暴露一個接口就行即只需要一個類 其他的屬性方法在這個插件類里面鏈式聲明即可，最后我們可以將這個類以window.Object=Object的方式對外開發 ~~~ (function () { var a=10; function abc(){ alert(a); } //將abc方法作為window的方法，就可以在匿名函數自執行外面進行訪問了 window.abc=abc; })(); abc(); ~~~ 要對外提供接口，我們才能找到使用的方法和屬性 jquery一個特別重要的函數,就是平時用的$() jQuery()對外的接口 ~~~ //聲明構造函數 var jQuery = function( selector, context ) { //在這個函數執行完了就是一個new構造函數的過程，返回的就是一個jQuery對象~~既然返回的是對象，當然可以調用方法嘍~~ ~~~ ~~~ return new jQuery.fn.init( selector, context, rootjQuery ); }, ~~~ 但是現在這個jQuery還是以局部變量的形式存在，要提供對外的接口，才能使用 所以在jquery最后一行有如下代碼 ~~~ window.jQuery = window.$ = jQuery; ~~~ 給jQuery對象添加一些方法和屬性??prototype(原型)是面向對象 他主要用于解決這個類的對象屬性和方法不能相互共享的問題 ~~~ jQuery.fn = jQuery.prototype ~~~ ?extend:是jQuery當中的一個繼承方法，希望后續添加的方法都能掛在jQuery對象上，很方便擴展 ~~~ //通過使用對象調用的方法，是實例方法。 $().text(); $().html(); //$是一個函數，在函數下面來擴展方法的話，就是擴展一些靜態方法 //在jQuery當中，給面向對象擴展靜態屬性和靜態方法叫做擴展工具方法 //工具方法和實例方法區別就在于，它既可以給jQuery對象來用，也可以給源生的JS來用，實例方法只能給jQuery對象調用 $.trim(); $.proxy(); ~~~ ?總覽： ~~~ (function( window, undefined ) { var document = window.document; var userAgent = navigator.userAgent; var toString = Object.prototype.toString; var push = Array.prototype.push; //聲明jQuery類的構造函數 并且實例化對象 var jQuery =function(selector){ return new jQuery.fn.init(selector); }; //prototype屬性的作用解決構造函數的對象實例之間無法共享屬性的缺點 jQuery.fn = jQuery.prototype = { init: function( selector, context ) { var match, elem, ret, doc; // Handle $(""), $(null), or $(undefined)時直接返回該對象 if ( !selector ) { return this; } // Handle $(DOMElement) if ( selector.nodeType ) { this.context = this[0] = selector; this.length = 1; return this; } // The body element only exists once, optimize finding it if ( selector === "body" && !context ) { this.context = document; this[0] = document.body; this.selector = "body"; this.length = 1; return this; } // Handle HTML strings if ( typeof selector === "string" ) { // Are we dealing with HTML string or an ID? match = quickExpr.exec( selector ); // Verify a match, and that no context was specified for #id if ( match && (match[1] || !context) ) { // HANDLE: $(html) -> $(array) if ( match[1] ) { doc = (context ? context.ownerDocument || context : document); // If a single string is passed in and it's a single tag // just do a createElement and skip the rest ret = rsingleTag.exec( selector ); if ( ret ) { if ( jQuery.isPlainObject( context ) ) { selector = [ document.createElement( ret[1] ) ]; jQuery.fn.attr.call( selector, context, true ); } else { selector = [ doc.createElement( ret[1] ) ]; } } else { ret = buildFragment( [ match[1] ], [ doc ] ); selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes; } return jQuery.merge( this, selector ); // HANDLE: $("#id") } else { elem = document.getElementById( match[2] ); if ( elem ) { // Handle the case where IE and Opera return items // by name instead of ID if ( elem.id !== match[2] ) { return rootjQuery.find( selector ); } // Otherwise, we inject the element directly into the jQuery object this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } // HANDLE: $("TAG") } else if ( !context && /^\w+$/.test( selector ) ) { this.selector = selector; this.context = document; selector = document.getElementsByTagName( selector ); return jQuery.merge( this, selector ); // HANDLE: $(expr, $(...)) } else if ( !context || context.jquery ) { return (context || rootjQuery).find( selector ); // HANDLE: $(expr, context) // (which is just equivalent to: $(context).find(expr) } else { return jQuery( context ).find( selector ); } // HANDLE: $(function) // Shortcut for document ready } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } if (selector.selector !== undefined) { this.selector = selector.selector; this.context = selector.context; } return jQuery.makeArray( selector, this ); }, // Start with an empty selector selector: "", // The current version of jQuery being used jquery: "1.4.2", // The default length of a jQuery object is 0 length: 0, // The number of elements contained in the matched element set size: function() { return this.length; }, toArray: function() { return slice.call( this, 0 ); }, // Get the Nth element in the matched element set OR // Get the whole matched element set as a clean array get: function( num ) { return num == null ? // Return a 'clean' array this.toArray() : // Return just the object ( num < 0 ? this.slice(num)[ 0 ] : this[ num ] ); }, // Take an array of elements and push it onto the stack // (returning the new matched element set) pushStack: function( elems, name, selector ) { // Build a new jQuery matched element set var ret = jQuery(); if ( jQuery.isArray( elems ) ) { push.apply( ret, elems ); } else { jQuery.merge( ret, elems ); } // Add the old object onto the stack (as a reference) ret.prevObject = this; ret.context = this.context; if ( name === "find" ) { ret.selector = this.selector + (this.selector ? " " : "") + selector; } else if ( name ) { ret.selector = this.selector + "." + name + "(" + selector + ")"; } // Return the newly-formed element set return ret; }, // Execute a callback for every element in the matched set. // (You can seed the arguments with an array of args, but this is // only used internally.) each: function( callback, args ) { return jQuery.each( this, callback, args ); }, ready: function( fn ) { // Attach the listeners jQuery.bindReady(); // If the DOM is already ready if ( jQuery.isReady ) { // Execute the function immediately fn.call( document, jQuery ); // Otherwise, remember the function for later } else if ( readyList ) { // Add the function to the wait list readyList.push( fn ); } return this; }, eq: function( i ) { return i === -1 ? this.slice( i ) : this.slice( i, +i + 1 ); }, first: function() { return this.eq( 0 ); }, last: function() { return this.eq( -1 ); }, slice: function() { return this.pushStack( slice.apply( this, arguments ), "slice", slice.call(arguments).join(",") ); }, map: function( callback ) { return this.pushStack( jQuery.map(this, function( elem, i ) { return callback.call( elem, i, elem ); })); }, end: function() { return this.prevObject || jQuery(null); }, // 僅供內部使用 push: push, }; /*很重要的一步 jQuery.fn.init是一個對象*/ //Object.prototype.name=value; 為Object對象添加name屬性 jQuery.fn.init.prototype = jQuery.fn; console.log(jQuery('aa')); jQuery.extend = jQuery.fn.extend = function() { var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy; // 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 object literal values or arrays if ( deep && copy && ( jQuery.isPlainObject(copy) || jQuery.isArray(copy) ) ) { var clone = src && ( jQuery.isPlainObject(src) || jQuery.isArray(src) ) ? src : jQuery.isArray(copy) ? [] : {}; // 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.fn.extend({ data: function( key, value ) {}, attr: function( name, value ) {}, removeAttr: function( name, fn ) {} }); jQuery.extend({ each: function( object, callback, args ) {}, isReady: false, uaMatch: function( ua ) {console.log(ua)} }); browserMatch = jQuery.uaMatch( userAgent ); window.jQuery = window.$ = jQuery; })(window); ~~~