Javascript模块化设计模式——哪个更好:自调用函数，还是对象文字方法

Javascript modular design pattern - which is better: self-invoking function, or object literal approach?

本文关键字：函数 对象 方法 文字 调用 设计模式 模块化 更好 Javascript      更新时间：2023-09-26

为了写出更好、更紧凑、更安全的代码，我很高兴在我的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

或者，在另一篇文章中，对象文字方法模式:

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
  }
};

我相信还有很多其他的模式(其中一些在第一篇文章中描述过)——哪种模式更好，或者更常见?如果我要选择一个默认的模式(除非我有特殊的理由选择另一个模式)，它应该是什么，为什么?

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

我不会说哪一种比另一种更好，但我会尽量明确每一种的优点，以便您可以根据自己的情况选择使用哪一种。

构造函数模式用它的属性和方法创建一个对象，它们都是公共的。它很容易理解，你仍然可以在创建后添加功能。

自调用模式(即。SEAF或IIFE)一开始可能看起来更复杂，但它的优点是具有私有属性或方法，因此您可以指定将公开代码的哪一部分。您还可以通过跳过return语句使其完全私有。

有一篇很棒的文章帮助我理解了JavaScript模式，这篇文章是《好的c#习惯如何鼓励坏的JavaScript习惯》。虽然它说从c#到Javascript，但它适合任何使用JS的人。

作为结论，IIFE模式将为您提供您可能想要在模块中添加的所有工具，但这并不意味着在功能不太复杂的某些情况下使用构造函数模式不是更方便。关于混合它们，我个人不喜欢使用几个模式来实现一个目标的项目。在我看来，使用IIFE更强大，更长期有用，但对于快速的&有趣的游戏对象文字可能是一种选择:-)

相关文章：