在JavaScript中，可以使用模块模式实现代码封装。此外，它还用于创建私有和公共属性。存在可以实现模块模式的各种方式。在本文中，我们将学习在es5中创建一个模块模式。在我们开始研究模块模式的实现之前，以下是一些好处:
- 冻结范围
- 代码封装
- 创建私有或公共范围
- 创建命名空间
- 创建公共和私有封装
我们可以使用JavaScript对象文字和立即调用的函数表达式来实现模块模式。只是为了刷新你的记忆，一个对象文字看起来像下面的清单:
var产品 = { 价格: 600，setOrder: function () {这个还回去。价格；}} console.log(Product.setOrder());
您可以在创建对象后添加属性。此外，立即调用的函数表达式类似于下面的示例:
var add = 函数 (num1，num2) {设res = num1 num2；console.log(res);}(7, 2);
结合这两者，我们可以在JavaScript中实现模块模式。让我们从创建模块开始:
(函数 () {“严格使用”// 你的代码在这里// 所有函数和变量都属于此函数var价格 = 99； } ()); console.log(price) // 未定义
它是一个自包含的模块或匿名闭包。它创建函数的范围，所有内容都包含在该函数本身中。因此，当我们尝试访问函数外部的价格时，它是未定义的。请记住，此匿名模块存在于全局范围内。
我们可以通过使用表达式将其分配给变量来导出模块，然后使用return语句创建私有和公共封装。考虑下面的代码:
var module1 = (function () {“严格使用” // 私有让颜色 = “ 红色” // 公共返回 {价格: 800 } } ()); console.log(module1.price); // 800console.log(module1.color); // undefiend
我们在上面的代码片段中执行以下操作，
- 创造一个生命.
- 分配IIFE函数到一个变量
- 返回匿名对象文字以创建私有和公共封装。
返回对象的所有属性都将成为公共的，并且可以在模块外部访问，但是，任何不是返回对象一部分的变量都不能在模块外部访问。这就是为什么对于价格，我们得到800作为输出，但是，对于颜色，值是未定义的，因为它是私有的module1。让我们修改module1，使其具有更多的私有和公共属性，如下所示:
var module1 = (function () { // 私有让color = 'red'；let模型；函数setModel(m) {模型 = m；}// 公共返回 {价格: 800，getModel: 函数 (m) {设置模型 (m)；返回模型； } } } ()); console.log(module1.price); // 800console.log(module1.getModel( 'bmw' )); // bmw
如您所见，我们可以使用公共封装函数访问私有封装变量。主要在模块模式中，每个变量都是私有的，直到它是返回对象的一部分。
模块模式在JavaScript中模拟类。它通过返回一个对象来创建私有和公共封装变量。它使用闭包封装隐私。在图表中，我们可以显示:
模块模式的另一种变化是揭示模块模式。唯一的变化是我们返回对象，如下面的清单所示:
var module1 = (function () { // 私有让color = 'red'let模型；函数setModel(m) {模型 = m；}让privatePrice = 800；让getModel = 函数 (m) {设置模型 (m)；返回模型； }// 公共返回 {价格: privatePrice，型号: getModel } } ()); console.log(module1.price); // 800console.log(module1.model( audi )); // 奥迪
模块揭示模式具有更一致的命名和更好的代码可读性。总结一下使用模块模式，我们可以在JavaScript中实现公共和私有封装。我希望你发现这篇文章有用，现在在你的JavaScript应用程序中实现模块模式。
希望你觉得这篇文章有用。谢谢你的阅读。如果你喜欢这篇文章，请分享。另外，如果您还没有签出为Angular组件点燃UI,一定要这样做!他们有30个基于材料的角度组件，以帮助您更快地编写web应用程序。</p