Javascript模塊化設計模式 - 哪個更好：自我調用函數，還是對象文字方法？

在我寫更好，更緊密，更安全的代碼的過程中，我很高興能夠在我的Javascript中採用更模塊化的模式。然而，在我關於這個問題的自我教育中，我看到有不同的方式來做到這一點。看來這兩種最常見的是自調用功能模式（from this article）：Javascript模塊化設計模式 - 哪個更好：自我調用函數，還是對象文字方法？

var HTMLChanger = (function() { 
    var contents = 'contents' 

    var changeHTML = function() { 
    var element = document.getElementById('attribute-to-change'); 
    element.innerHTML = contents; 
    } 

    return { 
    callChangeHTML: function() { 
     changeHTML(); 
     console.log(contents); 
    } 
    }; 

})(); 

HTMLChanger.callChangeHTML();  // Outputs: 'contents' 
console.log(HTMLChanger.contents); // undefined

，或者from this other article，對象直譯的方法模式：

var s, 
NewsWidget = { 

    settings: { 
    numArticles: 5, 
    articleList: $("#article-list"), 
    moreButton: $("#more-button") 
    }, 

    init: function() { 
    s = this.settings; 
    this.bindUIActions(); 
    }, 

    bindUIActions: function() { 
    s.moreButton.on("click", function() { 
     NewsWidget.getMoreArticles(s.numArticles); 
    }); 
    }, 

    getMoreArticles: function(numToGet) { 
    // $.ajax or something 
    // using numToGet as param 
    } 

};

而且我敢肯定的主機其他人（一些在第一篇文章中描述過） - 哪種模式更好，和/或更普遍？如果我選擇一個默認開始（除非我有特定的理由來選擇另一個模式），它應該是什麼，爲什麼？

混合搭配完全可以接受嗎？

來源

2016-08-14 HolyMoly

有點比較蘋果與橙子.. –

我想混合搭配。自我調用結構應該適合需要運行的功能，或者可以在頁面加載時使用，而構造函數模式更適合於直接調用之前不需要使用的東西。看起來自調函數提供了更多的隱私 – HolyMoly

這就是使用iife的要點，你可以擁有一個私有的範圍/東西*（函數/變量/類/其他）*並且只公開一個公共API。 – Thomas

我不會說一個人比另一個人好，但我會盡量明確每個人的優點，以便您可以選擇在自己的情況下使用哪一種。

構造函數模式使用它的屬性和方法創建一個對象，它們都是公共的。這很容易理解，您仍然可以在創建後添加功能。

自我調用模式（又名SEAF或IIFE）在開始時可能看起來更復雜，但它具有私有屬性或方法的優點，因此您可以指定代碼的哪一部分將會公開。您也可以通過跳過返回語句將其全部設爲私有。

幫助我理解JavaScript模式的一篇了不起的文章是How Good C# Habits can Encourage Bad JavaScript Habits。儘管它從C＃到Javascript說，它適用於任何使用JS的人。

作爲一個結論，IIFE模式將爲您提供您可能希望添加到模塊中的所有工具，但這並不意味着在某些功能不那麼複雜的情況下使用構造函數模式並不方便。關於將它們混合起來，我個人不喜歡其中有幾種模式用於一個目標的項目。恕我直言，使用IIFE是更強大和長期有用的，但快速&有趣的遊戲對象文字可能是要走的路:-)

來源

2016-08-14 01:07:50 Lucio

我同意所有觀點。有了這些說，公平地說，在同一個應用程序甚至文件中混合它們是可以接受的嗎？比如說，當我需要在頁面加載時發生事情，或者隱私是一個問題時，我是否應該使用SEAF模式 - 而當構建器模式不是這種情況時，我需要使用SEAF模式？ – HolyMoly

感謝您的鏈接！ – HolyMoly

謝謝你是一個很好的問題，我試着回答我最後一次編輯！ – Lucio

Javascript模塊化設計模式 - 哪個更好：自我調用函數，還是對象文字方法？

回答

相關問題