鉴于模块设计模式中的这段代码：
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'
以前的行和模块设计模式代码与之相关有什么好处？
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>以前的行和模块设计模式代码与之相关有什么好处？
您将实现隐藏在函数外部没有代码可以访问它的地方，并且您只公开一个包含与实现交互的函数的接口。换句话说，它是一种创建“黑匣子”的方法，它上面只有一组选择的函数，而不是许多函数和变量，您可能永远不会在实现外部的上下文中使用这些函数和变量，例如其他模块外的代码。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句