Question

为了编写更好，更紧凑，更安全的代码，我很高兴能在我的Javascript中采用更模块化的模式。然而，在我关于这个主题的自我教育中，我发现有不同的方法可以做到这一点。似乎最常见的两个是自调用函数模式（from this article）：

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
  }

};

我相信其他人（在第一篇文章中描述了一些） - 哪种模式更好，和/或更常见？如果我选择默认的选择（除非我有特定的理由选择其他模式）应该是什么，以及为什么？

混合搭配是完全可以接受的吗？

Answer 1

我不会说一个比另一个好，但我会尽量明确每一个的优点，这样你就可以选择在你自己的情况下使用哪个。

构造函数模式使用其属性和方法创建对象，所有这些对象都是公共的。它很容易理解，您仍然可以在创建后添加功能。

自调用模式（也称为SEAF或IIFE）在开始时可能看起来更复杂，但它具有私有属性或方法的优势，因此您可以指定代码的哪个部分将公开。您也可以通过跳过return语句将其全部设为私有。

帮助我理解JavaScript模式的一篇很棒的文章是How Good C# Habits can Encourage Bad JavaScript Habits。尽管从C＃到Javascript说它适用于使用JS的任何人。

作为结论，IIFE模式将为您提供您可能希望在模块中添加的所有工具，但这并不意味着在功能不太复杂的某些情况下使用构造函数模式并不方便。关于将它们混合起来，我个人不喜欢将一些模式用于一个目标的项目。使用IIFE的恕我直言更加强大和长期有用，但对于快速＆amp;有趣的游戏对象文字可能是要走的路： - ）

Javascript模块化设计模式 - 哪个更好：自调用函数或对象文字方法？

1 个答案: