什麼是適當的jQuery插件的做法？

請不要害怕對事物使用任何技術術語或底層解釋。我精通計算機體系結構和低級編程語言來理解任何優化或內存管理技術，以及複雜的結構（類，成員變量等）。什麼是適當的jQuery插件的做法？

我的主要代碼是基於Web的應用。我和PHP一起工作很多，我一直在快速學習CSS。但是，Javascript目前是我的瓶頸。我知道足夠的Javascript來處理任何sans框架（DOM操作，AJAX查詢等）。我也知道，我可以讓代碼更快運行，針對特定情況進行優化，並且通過手動編碼所有內容，我可以縮小代碼的整體大小（無需包含外部腳本）。但是爲了便於其他程序員閱讀和編碼速度，我試圖學習至少一個Javascript框架。

在閱讀了許多框架的文檔並查看了一些教程之後，我更喜歡jQuery。它允許在一行中使用非常強大的迭代代碼，並且全局變量命名空間衝突的機會非常小。據我所知，唯一聲明的全局變量是$ variable，其他所有事情都發生在這個命名空間中，如果你想有兩個並行的框架，甚至可以在沒有這個變量的情況下訪問命名空間。它還包含一個非常小的文件（24千字節gzipped），這意味着更少的服務器負載。

我的問題是什麼是創建jQuery插件的良好做法？如果我要開始在jQuery中編寫網站，我應該如何去做最好的互操作性和設計？我想確保我的代碼可以在沒有干擾的情況下與任何其他jQuery一起運行，可以從我的代碼構建插件，並儘量減少jQuery名稱空間的使用，以便我不會竊取可能被其他人使用的變量腳本。

來源

2010-09-30 stevendesu

閱讀jQuery plugin authoring suggestions，還看the unminified jQuery。注意最後一行：window.jQuery = window.$ = jQuery;所以有兩個全局變量window.jQuery和window.$。要深入研究這個問題得更深一些，閱讀更多關於using jQuery with other libraries和jQuery.noConflict()文檔：

// Trigger no conflict mode. 
$.noConflict(); 
    // Code that uses other library's $ can follow here.

開發插件，一定要特別注意一節Maintaining Chainability（因爲jQuery的很好地利用鏈接性）。您必須在您的插件中明確返回this以保持鏈接性。此外，與其他變量衝突發言，請務必使用封閉與其他代碼衝突停止你的插件：

// Use a closure so you can use the dollar sign in your plugin, 
    // but you don't clash with other uses of the dollar sign in the script 
    // around where you define your plugin (other libraries, etc.) 
(function($){ 

    // Adding your plugin to jQuery 
    $.fn.yourPlugin = function() { 

     // Maintain chainability 
    return this.each(function() { 

     // ... 

    }); 

    }; 
}(jQuery));

有很多的該插件製作網頁上其他偉大的信息。以上只是光禿禿的骨頭。有關於默認和選項，命名空間和許多其他信息。另外，如果你擔心你的變量發生衝突，你也可以利用閉包爲你自己的「常規」代碼......不只是jQuery插件。要做到這一點，在self invoking anonymous function附上你的腳本：

(function() { 
    var ... // these vars will not clash with 
      // anything outside this anonymous function 

    // You can do your jQuery in here if you need to access 
    // the local vars: 
    $(function() { ... }); 

}());

例如：

// global 'clash' 
var clash = "test"; 

(function() { 
    // local 'clash' 
    var clash = "something else"; 
    // this 'clash' shadows but doesn't change the global 'clash' 
}()); 

alert(clash); 
// The global 'clash' has stayed unaffected by the local `clash` 
// Output: test

jsFiddle example

來源

2010-09-30 19:16:37

您可以添加插件的方法不使用擴展方法：

jQuery.fn.myPlugin = function(opts) { ... }

您可以使用擴展：如果你只是希望有多個擴展jQuery對象功能，你會怎麼做：

jQuery.extend({ 
    funcName: function(){ 
     //function code 
    }, 
    funcName2: function(){ 
     //function code 
    } 
});

「jQuery.extend增加了一組屬性給jQuery對象的。 1.3中添加一組屬性的對象jQuery.fn的（其然後可訪問通過$（）。富）。」

jQuery.fn爲jQuery.prototype的快捷方式。

對插件的官方文檔：http://docs.jquery.com/Plugins/Authoring

邁克Alsup有這樣好的教程/模式的探討：http://www.learningjquery.com/2007/10/a-plugin-development-pattern

編輯：另外一個音符，要小心使用加殼/極小的你的名字 - 測試上的一個您在這方面的選擇。

來源

2010-09-30 19:32:53

什麼是適當的jQuery插件的做法？

回答

相關問題