模块设计模式封装答案

【问题标题】：Module design pattern encapsulation模块设计模式封装
【发布时间】：2020-02-05 14:33:21
【问题描述】：

在模块设计模式中给出这段代码：

    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

&lt;div id="attribute-to-change"&gt;&lt;/div&gt;

我们有这行：

console.log(HTMLChanger.contents);  // undefined

现在，如果我们有一个代码可以给我们另一个结果：

console.log(HTMLChanger.contents);  // 'contents'

上一行和与之相关的模块设计模式代码有什么好处？

【问题讨论】：

var contents 的范围仅限于您的 HTMLChanger 函数——它不是静态的。
这两行没有区别，结果都指向undefined？！ HTMLChanger 是 { callChangeHTML: function() {…} } 对象，它没有 .contents 属性。
@JeremyHarris 问题已编辑
@Bergi 问题已编辑
我不明白这个问题。如果我们使用显示模块模式只显示我们想要的信息，那么只显示我们想要的信息有什么好处？

标签： javascript module modular-design

【解决方案1】：

console.log(HTMLChanger.contents); // undefined

您的 HTMLChanger 变量被分配给 IIFE（立即调用的函数表达式）的返回值。返回值在这里：

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

所以它被设置为一个包含一个名为callChangeHTML 的属性的对象。变量contents 和changeHTML 仅定义在IIFE 的范围内，而不是返回对象的属性（否则，它会破坏此模式的目的，即隐藏实现细节 em>）。 IIFE 之外的代码绝对无法访问它们，除非您向返回的对象添加更多函数，例如 getter 和 setter。看起来像这样：

    var HTMLChanger = (function() {
      var contents = 'contents' //this is just a variable! not a property!
    
      var changeHTML = function() {
        var element = document.getElementById('attribute-to-change');
        element.innerHTML = contents;
      }
    
      return {
        callChangeHTML: function() {
          changeHTML();
          console.log(contents);
        },
        getContents: function() {
          return contents;
        }
      };
    
    })();
    
    HTMLChanger.callChangeHTML();       // Outputs: 'contents'
    console.log(HTMLChanger.getContents());  // Also outputs 'contents'

&lt;div id="attribute-to-change"&gt;&lt;/div&gt;

上一行和与之相关的模块设计模式代码有什么好处？

您将实现隐藏在函数之外的任何代码都无法访问它的地方，并且您只公开一个包含与实现交互的函数的接口。换句话说，它是一种创建“黑匣子”的方法，它上面只有一组选定的函数，而不是你可能永远不会在实现外部的上下文中使用的大量函数和变量，例如其他模块外的代码。

【讨论】：