使用OOP編寫jQuery插件

我想知道當前的「」最新的「」是如何編寫jQuery插件的。我讀了很多不同的方法，我不知道哪一個最適合。使用OOP編寫jQuery插件

您可以推薦使用OOP編寫jQuery插件的有用鏈接/模板。

感謝

來源

2011-09-30 fabian

官方文檔如何？ http://docs.jquery.com/Plugins/Authoring –

文檔似乎不是蜜蜂最好的，它們是嗎？ – fabian

兩個鏈接/模板，我指的是Stefan Gabos jQuery Plugin Boilerplate和奧斯卡Godson's jQuery Plugin Skeleton

我不是說他們是「最先進的技術」，但他們已經接待了我很好。

來源

2011-09-30 14:52:38 bejonbee

encapsulatedPlugin呢？ http://jamietalbot.com/2010/08/22/object-oriented-jquery-plugins/ – fabian

很高興你喜歡我的插件！ –

的基本規則是：

不要弄亂了jQuery命名空間與您的代碼 - 應該只有一個方法爲每個插件添加到jQuery對象或的根jQuery.fn
使用立即執行匿名功能，以確保代碼只運行一次
傳入jQuery ob JECT與標識符$參數，可以放心地在此範圍內使用$然後:)
記住當你添加一個新的方法jQuery.fn，this是綁定到jQuery的包裹設置，你不必再次包裝！
使用this.each遍歷所有匹配的元素，從你的插件
回報this使chainability（當然，除非你的插件返回不同的值）
允許選擇在傳遞和疊加通過一些默認對象（你也暴露了被覆蓋）

允許默認值由用戶重新設置爲全局變化

(function($) { //see point 3 

    var defaults = { 
     someDefaultValues : "value" 
    }; 

    $.fn.myPlugin = function(options) { // see point 1, only 1 method 

     var settings = $.extend({}, defaults, options); //see point 7 

     this.each(function() { //see point 5 

      var currentElement = $(this); //"this" now refers to current DOM element 
      //put bulk of logic here 

     }); 

     return this; //see point 6 
    }; 
    //see point 8, enables users to completely override defaults, rather than per call via options 
    $.fn.myPlugin.defaults = defaults; 

})(jQuery); //see point 2

看到一個good guide jQuery的文檔，他們進入更高級的細節考慮如何您可能要執行每插件的方法不止一種，再加上存儲元素和其他東西的數據。大多數我的東西

來源

2011-09-30 15:05:23 WickyNilliams

+1好的建議。此外，使用分號結束$ .fn.myPlugin –

的函數表達式謝謝，但是您如何看待這種方法？http：// jamietalbot。com/2010/08/22 /面向對象的jQuery插件/（和鏈接的新版本） – fabian

哎呀，錯字，我通常宗教關於分號:)將編輯和更新 – WickyNilliams

使用OOP編寫jQuery插件

回答

相關問題