JavaScript模块实现方式代码示例

在上一篇文章中JavaScript中的闭包, 我们了解到闭包是Javascript中最重要但也是最容易被误解的概念之一。闭包是一种方法, 在该方法中, 子函数即使在执行完父函数之后也可以保留其父范围的环境, 否则我们可以说要记住或重新创建已经执行过一次的范围及其成员。

现在, JavaScript模块是Closure的最佳实现。模块是独立的, 可重用的代码的小单元, 希望将它们用作创建非平凡的Javascript应用程序的基础。模块使开发人员可以分别定义私有成员和公共成员, 这使其成为JavaScript范式中更理想的设计模式之一。你可能会像其他任何面向对象的编程语言一样将模块视为类。

注意：在ES2015中, 使用class关键字定义Java类中的类, 但是尽管JavaScript仍然是无类编程语言, 但ES2015类基本上是特殊功能。

回到模块, 让我们首先来看一个示例, 看看模块可以做什么, 我们将尝试模拟Rectangle Class的行为, 该行为给出两侧的长度并返回该区域。

<script>
// This is a Rectangle Module. 
function Rectangle() 
{ 
     var length, width; 
  
     function create(l, w) 
     { 
         length = l; 
         width = w; 
     } 
  
     function getArea() 
     { 
         return (length * width); 
     } 
  
     function getPerimeter() 
     { 
         return (2 * (length + width)); 
     } 
  
     // This is the object to consist public members. 
     // The rest are private members. 
     var publicAPI = { 
         create : create, getArea : getArea, getPerimeter : getPerimeter 
     }; 
  
     // To be returned upon creation of a new instance. 
     return publicAPI; 
} 
  
// create a Rectangle module instance 
var myRect = Rectangle(); 
myRect.create(5, 4); 
document.write( "Area: " + myRect.getArea()); 
document.write( "<br> Perimeter: " + myRect.getPerimeter()); </script>

输出如下：

Area: 20
Perimeter: 18

这里, Rectangle()函数用作外部作用域, 其中包含所需的变量, 即长度, 宽度以及函数create(), getArea()和getPerimeter()。所有这些都是这个的私人细节

无法从外部访问/修改的矩形模块。另一方面, 顾名思义, 公共API是一个由三个功能成员组成的对象, 并在Rectangle函数执行完成时返回。使用API​​方法, 我们可以创建并获取矩形的面积和周长的值。

注意：正如我们之前提到的, 模块是任何其他OOP语言中最接近的类概念, 许多开发人员可能会想在创建Rectangle Module的新实例时使用" new"关键字。 Rectangle()只是一个函数, 而不是要实例化的适当类, 因此通常被调用。使用新的将是不合适的, 实际上会浪费资源。

执行Rectangle()创建Rectangle模块的实例, 并创建一个新的范围并将其分配给该函数, 因此, 当我们将其分配给变量时, 将生成该函数成员的新实例, 现在该变量具有对允许的公共API成员的引用。因此, 我们可以看到运行Rectangle()方法创建了一个新实例, 该实例与任何其他先前实例完全分开。

所有成员函数在长度和宽度上都有一个闭合符, 这意味着即使Rectangle()函数执行完成后, 这些函数也可以访问它们。

总结了模块在JavaScript中的工作方式。我们将在JavaScript上发现更多有趣的主题, 并进行相关项目以磨练我们新近学习的技能。

---