為了能讀懂大神寫的程式碼,研究一下jQuery外掛的寫法
阿新 • • 發佈:2019-01-22
解決了很長時間困擾的疑惑,建議初學者能夠靜下心來,認真研究工作中於遇到的新問題,舉一反三。凡事最怕用心。
原文轉載
jQuery為開發外掛的兩個方法: jQuery.fn.extend(object); jQuery.extend(object); 先看寫法和使用方式 /** -------1、jQuery.fn.extend(object);------------- **/ ;(function($){ $.fn.extend({ "函式名":function(自定義引數){ //這裡寫外掛程式碼 } }); })(jQuery); 或者 ;(function($){ $.fn.函式名=function(自定義引數){ //這裡寫外掛程式碼 } })(jQuery); 使用方式:$("#id").函式名(引數) /** -------2、jQuery.extend(object);寫法------------- **/ ;(function($){ $.extend({ "函式名":function(自定義引數){ //這裡寫外掛程式碼 } }); })(jQuery); 或者 ;(function($){ $.函式名=function(自定義引數){ //這裡寫外掛程式碼 } })(jQuery); 使用方式:$.函式名(引數) 或 jQuery.函式名(引數); $:是形參,函式定義完成之後,把jQuery這個實參傳遞進去.立即呼叫執行。這樣的好處是,我們在寫jQuery外掛時,也可以使用$這個別名而不會與prototype引起衝突. 1.區別 程式碼形式上:有沒有fn; 含義: jQuery.fn.extend給jQuery物件新增方法; jQuery.extend(object); 為擴充套件jQuery類本身.為類新增新的方法,可以理解為新增靜態方法。 2.程式碼規範 // 建立一個閉包 ;(function($){ })(jQuery); // 閉包結束 3.引數預設值的位置寫法 ;(function($){ $.fn.函式名 = function(options) { var defaults = { foreground: 'red', background: 'yellow' }; // Extend our default options with those provided. var opts = $.extend(defaults, options); // Our plugin implementation code goes here. }; })(jQuery); 或者 省略定義defaults ;(function($){ $.fn.函式名 = function(options) { var opts = $.extend({ foreground: 'red', background: 'yellow' }, options); // Our plugin implementation code goes here. }; })(jQuery); 或者 使用上文提到的另一種寫法+省略定義defaults(寫出來讓大家有個印象,方便閱讀他人程式碼) ;(function($){ $.fn.extend({ "函式名":function(options){ options = $.extend({ foreground:'red', background:'yellow' },options); } }); })(jQuery); 改進:雖然這樣可以 eg: // 建立一個閉包 ;(function($){ //plugin definition $.fn.hilight = function(options) { var defaults = { color: 'red', background: 'yellow' }; // Extend our default options with those provided. var opts = $.extend(defaults, options); // Our plugin implementation code goes here. var $this = $(this); $this.css({ background: opts.background, color: opts.color }) }; })(jQuery); //閉包結束 // 使用預設值 $('#link_tilte_a').hilight(); // 改變預設值 $('#link_tilte_a').hilight({"color":"pink"}); 單獨定義一個變數傳入 var dataInit = {"color":"pink","background":"red"}; $('#link_tilte_a').hilight(dataInit); 4.更深入的寫法利用函式物件提供可修改的預設設定 // 建立一個閉包 ;(function($){ //plugin definition $.fn.hilight = function(options) { // Extend our default options with those provided. var opts = $.extend({},$.fn.hilight.defaults, options ); // Our plugin implementation code goes here. var $this = $(this); $this.css({ background: opts.background, color: opts.color }) }; $.fn.hilight.defaults = { color: 'red', background: 'yellow' }; })(jQuery); //閉包結束 $.fn.hilight.defaults.color = "#FFF"; $.fn.hilight.defaults.background = "#000"; $('#link_tilte_a').hilight(); 或者 var dataInit = {"color":"pink","background":"red"}; $('#link_tilte_a').hilight(dataInit); 5.適當的暴露一些函式,可以讓人更容易擴充套件你的外掛 eg // 建立一個閉包 ;(function($){ // plugin definition $.fn.hilight = function(options) { // iterate and reformat each matched element return this.each(function() { var $this = $(this); // ... var markup = $this.html(); // call our format function markup = $.fn.hilight.format(markup); $this.html(markup); }); }; // define our format function $.fn.hilight.format = function(txt) { return '<strong>' + txt + '</strong>'; }; })(jQuery); //閉包結束 $.fn.hilight.format=function(obj){ return "<h1>"+obj+"</h1>"; } $('span').hilight(); 6.閉包程式碼塊中寫內部函式,可以防止他人隨意更改,也更利於程式碼的整潔 // 建立一個閉包 ;(function($){ // plugin definition $.fn.hilight = function(options) { debug(this); }; // define our format function function debug($obj) { if(window.console && window.console.log) window.console.log('hilight selection count: ' + $obj.size()); } })(jQuery); //閉包結束 我們的debug方法不能從外部閉包進入,因此對於我們的實現是私有的。 7.回撥函式 ;(function($){ jQuery.fn.superGallery = function( options ) { var defaults = { // We define an empty anonymous function so that。空方法 // we don't need to check its existence before calling it. onImageShow : function() {}, textColor: "#000" // ... 其他的設定等等 ... }; var settings = $.extend( {}, defaults, options ); return this.each(function() { // Plugin code would go here... }); // Later on in the plugin: nextButton.on( "click", showNextImage ); function showNextImage() { // Returns reference to the next image node var image = getNextImage(); // Stuff to show the image here... // Here's the callback: settings.onImageShow.call( image ); } })(jQuery); 我們不是通過傳統的方法(新增括號)來啟動回撥,而是在影象的上下文中呼叫它,這將是對影象節點的引用。這意味著您可以通過回撥中的這個關鍵字訪問實際的影象節點 呼叫 $( "ul.imgs li" ).superGallery({ onImageShow: function() { $( this ).after( "<span>" + $( this ).attr( "longdesc" ) + "</span>" ); }, // ... 其他的設定等等 ... });