模块化的JS你了解多少？一分钟了解模块化发展进程

2023-11-11 23:54:07

模块化是指将代码组织成独立的、可重用的单元。这使得代码更容易理解、维护和重用。在JavaScript中，模块化有多种方式，包括全局function模式、Namespace模式和模块模式。

全局function模式

全局function模式是最简单的一种模块化方式。它将每个模块作为一个全局函数来定义，函数名就是模块的名称。函数内部的代码是私有的，无法从外部访问。

// 定义一个模块
function MyModule() {
  // 私有变量
  var privateVariable = 10;

  // 私有函数
  function privateFunction() {
    console.log("This is a private function.");
  }

  // 公共变量
  this.publicVariable = 20;

  // 公共函数
  this.publicFunction = function() {
    console.log("This is a public function.");
  };
}

// 创建一个模块的实例
var myModule = new MyModule();

// 访问公共变量
console.log(myModule.publicVariable); // 输出: 20

// 调用公共函数
myModule.publicFunction(); // 输出: This is a public function.

// 无法访问私有变量
console.log(myModule.privateVariable); // 输出: undefined

// 无法调用私有函数
myModule.privateFunction(); // 输出: TypeError: myModule.privateFunction is not a function

Namespace模式

Namespace模式是一种更高级的模块化方式。它使用一个对象来表示模块，模块中的变量和函数都是对象的属性和方法。

// 定义一个模块
var MyModule = {
  // 私有变量
  privateVariable: 10,

  // 私有函数
  privateFunction: function() {
    console.log("This is a private function.");
  },

  // 公共变量
  publicVariable: 20,

  // 公共函数
  publicFunction: function() {
    console.log("This is a public function.");
  }
};

// 访问公共变量
console.log(MyModule.publicVariable); // 输出: 20

// 调用公共函数
MyModule.publicFunction(); // 输出: This is a public function.

// 无法访问私有变量
console.log(MyModule.privateVariable); // 输出: undefined

// 无法调用私有函数
MyModule.privateFunction(); // 输出: TypeError: MyModule.privateFunction is not a function

模块模式

模块模式是目前最流行的模块化方式。它使用一个闭包来实现模块，模块中的变量和函数都是闭包内部的局部变量和函数。

// 定义一个模块
var MyModule = (function() {
  // 私有变量
  var privateVariable = 10;

  // 私有函数
  function privateFunction() {
    console.log("This is a private function.");
  }

  // 返回一个对象来表示模块
  return {
    // 公共变量
    publicVariable: 20,

    // 公共函数
    publicFunction: function() {
      console.log("This is a public function.");
    }
  };
})();

// 访问公共变量
console.log(MyModule.publicVariable); // 输出: 20

// 调用公共函数
MyModule.publicFunction(); // 输出: This is a public function.

// 无法访问私有变量
console.log(MyModule.privateVariable); // 输出: undefined

// 无法调用私有函数
MyModule.privateFunction(); // 输出: TypeError: MyModule.privateFunction is not a function