0

给定模块设计模式中的此代码：

    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'

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

4

1 回答 1

2

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>

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

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

于 2020-02-05T14:44:31.427 回答