JQuery JavaScript設計：自執行函數還是對象文字？

我很好奇在構建封裝代碼塊時是否有與JQuery有關的最佳實踐。JQuery JavaScript設計：自執行函數還是對象文字？

通常，當我構建一個頁面時，我喜歡將該頁面內使用的函數封裝在一個對象內。這允許我在構建應用程序時進行一些封裝。沒有什麼我恨比看到一個JavaScript文件和一幫這個

function doSomethingOnlyRelevantOnThisPage() { 
    // do some stuff 
}

我這使得凌亂的設計更多的，並沒有真的很好封裝功能。

通常在許多框架中，有一個用於執行此封裝的標準。

在MooTools的他們青睞的對象文字符號：

var Site = {   
    // properties and methods 
}

在YUI他們喜歡自我執行的函數符號：

(function() { // properties and methods })()

關於第二個例子中的好處是，封閉創建，從而允許您定義私有屬性和方法。

我的問題是：任何JQuery愛好者都有創建這些乾淨的封裝結構的最佳做法嗎？他們使用的理由是什麼？

來源

2008-10-09 steve_c

因爲我一直在使用jQuery一段時間，所以我決定了一個適合我的標準模式。

~~這是YUI模塊模式與混合了一點jQuery插件模式的組合。~~ 。我們最終使用了自動執行的閉包模式。這是有益的，在幾個方面：

它使代碼到最低限度
它強制從表現行爲的分離
它提供了一個封閉，防止命名衝突

這是它看起來像：

;(function($) {   
    var myPrivateFunction = function() { 
    }; 

    var init = function() { 
     myPrivateFunction(); 
    }; 

    $(init); 
})(jQuery);

我們意識到分配函數執行的結果，類似於YUI模塊模式，它暴露了可能從表示代碼中調用的代碼。我們想要防止這種情況，所以這種模式很適合。

當然，我們可以用內聯的方式編寫init方法，而不需要爲函數定義一個變量。我們同意明確定義init函數使得代碼更清晰。

如果我們想在頁面/外部js文件之間共享函數會發生什麼？我們只是簡單地介紹jQuery提供的用於擴展jQuery對象本身的現有機制 - 擴展函數。

如果函數是靜態的，我們使用$ .extend，並且如果它們在包裝集上運行，我們使用$ .fn.extend函數。

希望這可以幫助別人。

來源

2009-11-10 18:09:23

我通常遵循原型模式：

MyFunction = function(param1, param2) 
{ 
    this.property1 = param1; 
    // etc. 
} 

MyFunction.prototype = 
{ 
    memberOne: function(param1) 
    { 
     // ... 
    }, 

    memberTwo: function(param2) 
    { 
    } 
}

你得到的東西「構造」（函數本身）和封裝的「方法」和「領域」。

它是人誰是使用基於類的面嚮對象語言:)

來源

2008-10-09 19:04:54

但是，這隻有在你打算在對象內封裝狀態時纔有用。您將不得不對這些對象調用new來創建實例。就我而言，他們在OO條款中表現得更像靜態類。 – 2008-10-09 19:11:28

真的，真的......在這種情況下，我更喜歡自我執行的匿名函數。 – 2008-10-09 19:18:05

發展（YUI小部件和一些方便的功能，jQuery選擇和javascript「擴展」）當我使用YUI和jQuery更容易，而一般的JavaScript模板我用的是這樣的：

/*global YAHOO, $ */ 

// Create the public-scope accessable namespace for this page 
YAHOO.namespace('Project'); 

YAHOO.Project.page = function() { 
    // Private members 

    var self = {}; 

    // Public members 
    var pub = {}; 

    pub.init = function() { 

    }; 

    return pub; 
}(); 

// When the DOM is loaded, initialize this module 
$(document).ready(YAHOO.Project.page.init);

現在清楚了，你可以刪除YAHOO.namespace（）調用，如果你不希望使用YUI，但是這是基本的輪廓。它使用對象文字符號，但也允許您定義私有屬性和方法。

請記住，當調用私人成員或引用私有變量引用他們爲self.funcName()。你可以在self對象之外定義它們，但是隨後你會在對象中的任何地方發現一個錯誤，你試圖找出size_of()是一個私有方法，還是在其他地方定義的。

來源

2008-10-09 19:16:19

JQuery JavaScript設計：自執行函數還是對象文字？

回答

相關問題