在我寫更好,更緊密,更安全的代碼的過程中,我很高興能夠在我的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
}
};
而且我敢肯定的主機其他人(一些在第一篇文章中描述過) - 哪種模式更好,和/或更普遍?如果我選擇一個默認開始(除非我有特定的理由來選擇另一個模式),它應該是什麼,爲什麼?
混合搭配完全可以接受嗎?
有點比較蘋果與橙子.. –
我想混合搭配。自我調用結構應該適合需要運行的功能,或者可以在頁面加載時使用,而構造函數模式更適合於直接調用之前不需要使用的東西。看起來自調函數提供了更多的隱私 – HolyMoly
這就是使用iife的要點,你可以擁有一個私有的範圍/東西*(函數/變量/類/其他)*並且只公開一個公共API。 – Thomas