Question

在模块设计模式中给出以下代码：

    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

<div id="attribute-to-change"></div>

我们有这行：

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

现在，如果我们有可以给我们另一个结果的代码怎么办？

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

将以前的行和模块设计模式代码与之结合使用有什么好处？

Answer 1

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

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

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

因此将其设置为包含一个名为callChangeHTML的属性的对象。变量contents和changeHTML仅在IIFE的范围内定义，而不是返回对象的属性（否则，将破坏该模式的目的，即隐藏实施细节）。 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'

<div id="attribute-to-change"></div>

将以前的行和模块设计模式代码与之结合使用有什么好处？

您将实现隐藏在函数外部没有代码可以访问的地方，并且仅公开 interface ，其中包含与实现交互的函数。换句话说，这是一种创建“黑匣子”的方法，该黑匣子上只有一组选择的函数，而不是在实现外部的上下文中可能永远不会使用的许多函数和变量，例如其他模块外部的代码。

模块设计模式封装

1 个答案: