如何理解 JavaScript 模块模式?
javascriptobject oriented programmingfront end technology
在本文中，我们将学习如何理解 JavaScript 模块模式。
模块模式用于复制类的概念，以便我们可以将公共和私有方法以及变量存储在单个对象中。
由于 JavaScript 不支持类，类似于 Java 或 Python 等其他编程语言中使用的类。
为什么要使用模块?
可维护性 - 模块是自包含的，旨在减少依赖性，以便它可以独立成长和改进。
名称间距 - 在 JavaScript 中，顶级函数范围之外的变量是全局的。因此，通常会出现"命名空间污染"，完全不相关的代码共享全局变量。
可重用性 - 在某个时候将我们之前编写的代码用于新项目，将您从以前的项目编写的一些实用方法用于当前项目。
封装 - 模块模式封装和包装公共和私有方法和变量，并保护私有方法和属性以免在全局范围内泄漏。这只返回公共方法和公共变量。
使用模块，我们可以拥有只能在模块内引用的私有函数和变量，并且可以引用其他模块。这些是针对常见软件问题的高级面向对象解决方案。
因此，对 JavaScript 模式的良好理解有助于我们为问题选择正确的模式，并让我们了解应用程序的实际价值。
示例
以下是用于理解 JavaScript 中的模块模式的示例程序。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <script> (function () { var Age = [10, 20,15, 50, 27, 17, 22, 87, 65, 45]; var average = function() { var total = Age.reduce(function(accumulator, age) { return accumulator + age}, 0); return total / Age.length + '.'; } var notQualified = function(){ var notAdult = Age.filter(function(age) { return age < 18;}); return 'age less than 18 = ' + notAdult.length; } document.write(notQualified()); }()); </script> </body> </html>
我们还可以更改数组列表并检索正确的输出。
示例
以下是另一个用于理解 JavaScript 中的模块模式的示例程序。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <script> var counter=(function(){ let count=0;//private function print(message){ document.write(message+'---'+count, "<br>"); } return{ // value:count, get: function(){return count;}, set:function(value){ count=value;}, increment:function(){ count+=1; print("after increment") }, reset:function(){ print('before increment'); count=0; print('after reset'); } } })(); counter.increment(); counter.increment(); counter.set(7); document.write("Counter Value: ",counter.get(),"<br>"); counter.reset(); </script> </body> </html>
