如何讓我的jQuery插件代碼更漂亮？

我寫了我的第一個 jQuery插件，它有點像這樣。如何讓我的jQuery插件代碼更漂亮？

(function ($) { 
    $.fn.MyFancyPlugin= function (settings) { 

     var defaults = { 
      someSetting = 'default for some setting' 
     }; 

     var settings = $.extend({}, defaults, settings); 

     function foo(){ 
      // do stuff 
     }; 

     function bar(){ 
      // do stuff 
     }; 

     return this.each(function(){ 
      // do more stuff 
     }); 
    }; 
})(jQuery);

該插件工作得很好，但我很害怕肛門的外觀，我討厭的功能嵌套方式。

我的JS的外觀「偏好」是這樣的。

MyNamespace.Class1 = { 

    foo: 'foo', 

    bar: function() { 
     return 'bar'; 
    } 
};

但是我似乎無法在製作jQuery插件時把我的頭包裹起來。有人能幫忙嗎？我最關心的是var以及它們是私密的。

在附註上，我想知道每種構造JavaScript的方法的「官方」名稱。

來源

2012-02-05 Chase Florell

應該移動到Codereview – 2012-02-05 23:08:01

我發現上面的漂亮;） – 2012-02-05 23:08:17

@KyleMacey，我認爲它「可以」去代碼審查，但我不想看它審查...看到，我發佈了什麼將被評審爲「不工作」。我試圖瞭解構建JavaScript的兩種方法之間的差異。 – 2012-02-05 23:09:41

你的第一個例子沒有什麼不對，這是鬆散的「模塊」模式，除了它可能是不必要的複製功能。後一個例子就是如何將匿名函數分配給對象上的屬性，如果有問題的函數不需要是對象的屬性，則這是不恰當的。

通過將函數包含在其他函數中來限制函數的範圍是一個基本的JavaScript成語，而不是醜陋的。

但是，如果foo和bar不需要訪問範圍中的變量和參數時，您的插件函數被調用（如果defaults真的是靜態的），你可以使他們他們搬出水平未重新每次您的插件被稱爲時間：

(function ($) { 
    var defaults = { 
     someSetting: 'default for some setting' 
    }; 

    function foo(){ 
     // do stuff 
    }; 

    function bar(){ 
     // do stuff 
    }; 

    $.fn.MyFancyPlugin= function (settings) { 

     var settings = $.extend({}, defaults, settings); 

     return this.each(function(){ 
      // do more stuff 
     }); 
    }; 
})(jQuery);

另外請注意，我糾正你的defaults初始化（:，不=）的語法。

邊注：由於您的插件的功能是不是構造功能，在JavaScript世界絕大多數約定是使用駝峯規則的初始小寫字母（例如，myFancyPlugin而非MyFancyPlugin）。

來源

2012-02-05 23:09:19

謝謝你的答案。你能指點我多一些關於「匿名函數」和「模塊模式」的信息嗎？ – 2012-02-05 23:15:17

@ChaseFlorell：這其實不是一個/或，但從根本上來說，模塊模式只不過是具有一個外部範圍界定功能，其中包含任何您想要保密的內容，並輸出任何要公開的內容。你的第一個例子（和我的重鑄）都是這樣做的。剛剛在對象初始化器中傾倒對象上的所有內容的問題是，* everything *在該對象上是公共的。 – 2012-02-05 23:17:09

+1，+接受 - 完美，正是我需要知道的。你是冠軍。 – 2012-02-05 23:18:23

如何讓我的jQuery插件代碼更漂亮？

回答

相關問題