通过Angela Yu博士的Udemy课程深化JavaScript对象理解与实践

Javen Fang

于 2024-11-10 11:57:50 发布

阅读量466

点赞数 4

本文链接：https://blog.csdn.net/weixin_29092787/article/details/143683684

版权

本文还有配套的精品资源，点击获取

简介：JavaScript作为Web开发中广泛应用的编程语言，其对象理解和应用是构建交互式网页应用的关键。Angela Yu博士的“DrumKit”课程深入讲解了JavaScript对象的概念、创建、属性和方法，帮助学员提升编程技能。课程内容包括对象基础、创建方法、属性和方法应用、事件处理、DOM操作、音频API使用、代码模块化以及面向对象编程。学员将通过构建交互式鼓组应用来实践这些知识，加深对JavaScript对象的理解，并为未来的Web开发项目打下基础。

1. JavaScript对象基础和概念

1.1 JavaScript对象简介

JavaScript 中的对象是键值对的集合，是属性和方法的集合体。它是动态的，允许存储不同类型的数据。对象可以用来表示现实世界中实体的属性和功能。

1.2 对象字面量的使用

对象字面量是创建对象的最简单方式之一，以大括号 {} 包围一系列“键:值”对，键是字符串（或符号），值可以是任意数据类型。

let person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    job: "Engineer"
};

在这个例子中， person 对象包含了四个属性： firstName 、 lastName 、 age 和 job 。

1.3 访问和设置对象属性

对象属性可以通过点符号 . 或方括号 [] 来访问和设置。点符号适用于属性名是有效标识符的情况，方括号则可以接受任何字符串，甚至可以执行表达式。

// 访问属性
console.log(person.firstName); // 输出 "John"
console.log(person["age"]); // 输出 30

// 设置属性
person.height = 175; // 添加新属性
person["weight"] = 70; // 添加新属性

以上代码段展示了如何访问和设置对象的属性。这种灵活性是 JavaScript 对象强大功能的一部分。

2. 多种创建对象的方法

2.1 基本的字面量和构造函数方法

2.1.1 字面量创建对象的原理和特点

使用字面量创建对象是JavaScript中最简单直观的方法。对象字面量可以被看作是一组无序的属性和方法的集合。这些属性和方法以键值对的形式存在，键是一个标识符，而值可以是变量、函数、数组、甚至另一个对象字面量。

在字面量创建对象的方式中，对象的定义直接在代码中完成。这种方式不需要使用 new 关键字，定义方式如下：

let person = {
    firstName: "John",
    lastName: "Doe",
    age: 25,
    address: {
        street: "123 Main St",
        city: "Anytown",
        state: "CA"
    },
    greet: function() {
        console.log("Hello, " + this.firstName + " " + this.lastName + ".");
    }
};

特点包括： - 简洁易懂 ：直接在代码中定义对象，无需额外的类声明。 - 动态添加属性 ：可以在对象创建后动态地添加属性和方法。 - 可复制性 ：对象字面量很容易进行复制和嵌套。 - 一次性 ：通常用于创建单个对象实例，而不需要重复创建。

在创建对象字面量时，属性名可以是字符串、数值、布尔值、null或者undefined。但是，通常我们使用字符串来保持代码的可读性。需要注意的是，在对象字面量中使用方法时，函数内部的 this 上下文指向的是包含它的对象。

2.1.2 构造函数的定义及使用场景

构造函数是在创建新对象时使用的一种特殊函数。构造函数的主要目的是创建特定类型的对象，并对这些对象进行初始化。使用构造函数创建对象是面向对象编程的基础，可以帮助我们重复使用相同结构的对象。

构造函数的定义通常首字母大写以区别于其他函数，并且使用 new 关键字来创建对象实例。例如：

function Person(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.greet = function() {
        console.log("Hello, " + this.firstName + " " + this.lastName + ".");
    };
}

let person = new Person("John", "Doe", 25);

构造函数的特点： - 可以重复使用 ：通过构造函数可以创建多个具有相同属性和方法的对象。 - 灵活的参数 ：构造函数可以接受参数，使得创建的对象具有不同的属性值。 - 封装性 ：构造函数使得代码结构更加清晰，易于维护。

使用场景： - 当需要创建多个结构相似的对象时。 - 当对象的状态需要通过构造函数的参数来初始化时。 - 当对象的行为（方法）需要封装在对象内部时。

2.2 工厂模式和原型链

2.2.1 工厂模式的实现和优势

工厂模式是一种创建对象的设计模式，它提供了一种创建对象的最佳方式。工厂模式可以解决构造函数创建对象带来的问题，比如每次使用 new 关键字创建对象时，都需要重复创建相同的方法，造成内存浪费。

工厂模式通过创建一个工厂函数来解决这个问题。工厂函数返回一个新对象，而这些对象共享相同的原型。例如：

function createPerson(firstName, lastName, age) {
    let obj = {};
    obj.firstName = firstName;
    obj.lastName = lastName;
    obj.age = age;
    obj.greet = function() {
        console.log("Hello, " + this.firstName + " " + this.lastName + ".");
    };
    return obj;
}

let person1 = createPerson("John", "Doe", 25);
let person2 = createPerson("Jane", "Smith", 30);

工厂模式的优势： - 减少内存占用 ：对象共享原型上的方法，而不是每个对象都拥有独立的方法副本。 - 扩展性 ：可以随时向工厂函数添加更多的属性和方法，所有通过这个工厂创建的对象都会自动继承这些变更。 - 对象复用 ：可以创建任何类型的对象，只要它们遵循相同的结构或接口。

2.2.2 原型链的概念及其工作原理

原型链是JavaScript实现继承的一种机制。在JavaScript中，每个对象都有一个指向它的原型对象的内部链接。这个原型对象又有它自己的原型，以此类推直到一个对象的原型为 null 。这个由原型组成的链结构被称为原型链。

每个对象都通过原型继承属性和方法。当访问对象的一个属性或方法时，如果该对象内部没有这个属性或方法，JavaScript引擎会在原型链中查找直到找到该属性或方法为止。

工作原理： - 每个对象都有一个指向它的原型对象的内部链接。 - 如果对象本身没有找到某个属性或方法，那么JavaScript会在原型链中查找这个属性或方法。 - 最终如果原型链上也没有该属性或方法，那么返回 undefined 。

function Person(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
}

Person.prototype.greet = function() {
    console.log("Hello, " + this.firstName + " " + this.lastName + ".");
};

let person = new Person("John", "Doe", 25);
person.greet(); // "Hello, John Doe."

在上述例子中， greet 方法是定义在 Person.prototype 上的，因此所有 Person 实例共享这个方法。使用原型链可以实现更加轻量级的对象，并且所有实例在处理共有方法时的内存占用更少。

2.3 ES6引入的新方法

2.3.1 class关键字与传统原型链的对比

ES6为JavaScript语言引入了 class 关键字，使得创建对象和实现继承变得更加直观和易读。然而，尽管使用了 class 关键字，JavaScript的对象模型仍然是基于原型的， class 关键字只是提供了一个更加简洁和面向对象的语法。

使用 class 关键字的示例：

class Person {
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    greet() {
        console.log("Hello, " + this.firstName + " " + this.lastName + ".");
    }
}

let person = new Person("John", "Doe", 25);
person.greet(); // "Hello, John Doe."

与传统的构造函数和原型链相比，使用 class 关键字的好处包括： - 更清晰的语法 ：通过 class 关键字创建类和方法，代码更接近于传统面向对象语言的语法。 - 更好地封装 ： class 语法隐藏了原型的细节，使得开发者更关注于类和继承的实现。 - 继承支持 ： class 语法天然支持继承，可以直接使用 extends 关键字。

尽管如此， class 关键字背后的实现仍然依赖于原型链，它并没有改变JavaScript的原型继承机制。

2.3.2 使用静态成员和模块化特性

静态成员是在类中定义的不依赖于类实例的属性和方法。它们可以通过类本身直接访问，而不是通过类的实例。在ES6中引入的 class 语法中， static 关键字用来定义静态成员。

静态成员的示例：

class Person {
    static species = "Homo sapiens";

    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    static describe() {
        console.log(`We are the ${Person.species}.`);
    }
}

console.log(Person.species); // "Homo sapiens"
Person.describe(); // "We are the Homo sapiens."

使用静态成员的好处包括： - 工具函数 ：可以为类添加不需要实例的工具函数。 - 内存使用 ：静态成员在所有实例之间共享，因此不会在每个实例中复制。

模块化特性： ES6同样引入了模块化特性，允许开发者将代码组织成独立的模块，并导入和导出需要的代码片段。模块化增强了代码的重用性、封装性和组织结构。

// lib.js
export function greet(name) {
    console.log("Hello, " + name + ".");
}

// main.js
import { greet } from "./lib.js";
greet("John");

模块化有助于： - 代码组织 ：可以更好地组织代码和依赖。 - 复用性 ：能够轻松地在不同的模块和项目之间重用代码。 - 封装性 ：通过 export 和 import 语句提供了更好的封装。

通过使用 class 关键字定义类以及静态成员，以及模块化特性，ES6为JavaScript的面向对象编程提供了现代化的语法和工具，使代码更加清晰、模块化和易于维护。

3. 对象属性及其应用

3.1 属性的定义和访问

在JavaScript中，对象是由属性和方法组成的集合。属性是键值对的集合，可以包含不同类型的数据，例如字符串、数字、布尔值、函数、甚至是其他对象。通过属性，我们可以将数据和行为关联到对象上，从而构建出复杂的程序结构。

3.1.1 如何定义属性及其访问控制

在JavaScript中，可以通过点符号或方括号来定义和访问对象的属性。例如：

let person = {
    firstName: "John",
    lastName: "Doe",
    age: 30
};

console.log(person.firstName); // 使用点符号访问属性
console.log(person['lastName']); // 使用方括号访问属性

为了控制属性的访问级别，JavaScript提供了一些关键字，如 public 、 private 和 protected ，虽然在ES5及之前版本中并没有直接支持，但可以通过闭包和一些约定来模拟。在ES6中，通过添加 # 前缀来定义私有属性，如：

class Person {
    #privateAge = 30; // 私有属性
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

let person = new Person('John', 'Doe');
console.log(person.getFullName()); // 公共方法访问公共属性
// console.log(person.#privateAge); // 私有属性无法直接访问

3.1.2 使用getter和setter方法

getter和setter是JavaScript中用于控制属性读取和赋值行为的方法。通过定义getter和setter，我们可以为属性添加更多的控制逻辑，如数据验证、触发事件等。

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }

    set fullName(value) {
        const parts = value.split(' ');
        if (parts.length !== 2) {
            throw new Error('Invalid name format');
        }
        this.firstName = parts[0];
        this.lastName = parts[1];
    }
}

let person = new Person('John', 'Doe');
console.log(person.fullName); // 使用getter访问
person.fullName = 'Jane Doe'; // 使用setter赋值

通过上述例子可以看出，getter和setter方法允许我们封装属性，并提供读写属性的接口，这对于对象属性的控制和访问提供了灵活性。

3.2 属性的枚举性和描述符

属性不仅包含值，还可以包含一组称为属性描述符的特性，这些特性控制属性的行为。属性描述符包含四个可选的特性： value , writable , enumerable , 和 configurable 。

3.2.1 属性的枚举性及其影响

属性的枚举性由 enumerable 特性决定。当枚举性被设置为 true 时，属性会出现在对象的枚举属性中，如 for...in 循环、 Object.keys() 方法等。

let obj = {};
Object.defineProperty(obj, 'myProperty', {
    value: 'This is a property.',
    enumerable: true
});

for (let prop in obj) {
    console.log(prop); // 'myProperty' 将被枚举
}
console.log(Object.keys(obj)); // ['myProperty']

通过枚举性，我们可以控制哪些属性是公开的，哪些是隐藏的。这对于定义哪些属性应该被外部代码访问非常有用。

3.2.2 使用属性描述符进行高级属性控制

我们可以通过 Object.defineProperty 方法和 Object.getOwnPropertyDescriptors 方法创建和修改属性的描述符。这允许我们对属性进行更细致的控制。

let obj = {};
Object.defineProperty(obj, 'myProperty', {
    value: 'This is a property.',
    writable: true,
    enumerable: false,
    configurable: false
});

console.log(obj.myProperty); // 'This is a property.'
console.log(obj.propertyIsEnumerable('myProperty')); // false

在这里，我们设置了 myProperty 为不可枚举和不可配置，这意味着我们无法再使用 Object.defineProperty 方法修改它，也无法删除它，除非通过一些特殊的操作。

3.3 属性在数据存储中的应用

3.3.1 属性作为数据存储的机制

对象属性可以用来存储任何类型的数据，无论是基本类型还是复杂类型。这种灵活性使得对象成为JavaScript中存储数据的理想选择。

let user = {
    name: 'Alice',
    age: 30,
    friends: ['Bob', 'Charlie']
};

console.log(user.name); // Alice
console.log(user.friends); // ['Bob', 'Charlie']

使用对象存储数据不仅限于简单的数据集合，还可以表示更复杂的数据结构，如树、图、映射等。

3.3.2 对象存储的数据结构优化方法

随着应用规模的增长，对象存储的数据结构可能变得臃肿和低效。为了优化数据存储结构，我们可以采用多种策略，如使用原型链优化内存使用，或者使用ES6引入的Map和Set对象存储键值对和唯一值。

let user = Object.create(null); // 不使用Object.prototype创建对象
user.name = 'Alice';

let friends = new Set(['Bob', 'Charlie']); // 使用Set存储唯一值

对象的存储优化通常涉及减少内存占用和提高数据访问效率，这在处理大量数据时尤其重要。

通过深入理解JavaScript对象属性及其应用，开发者可以在编程中更有效地利用对象来构建功能丰富、性能优化的应用程序。

4. 对象方法及其在行为上的应用

4.1 方法的定义和调用

4.1.1 方法与函数的区别和联系

在JavaScript中，方法可以被看作是定义在对象上的函数。理解它们之间的联系与区别对于深入掌握对象的行为至关重要。函数是JavaScript中最基本的代码组织形式，可以被独立调用或传递。而方法则是对象的一部分，它通过对象来访问。

联系：方法本质上是一个函数，但是，方法与函数的区别在于其上下文（context）或作用域。一个方法被调用时，它的 this 关键字被绑定到调用它的对象上。这意味着在方法内部， this 总是指向调用它的对象。

区别：函数可以在没有对象的情况下独立调用，而方法通常需要依赖一个对象。当一个函数被赋值给一个对象的属性时，它就变成了这个对象的一个方法。可以通过对象直接引用和调用它，例如 myObject.myMethod() 。

4.1.2 对象方法的调用及其上下文

对象方法的调用涉及到了JavaScript的作用域链和 this 关键字。在调用一个对象的方法时， this 关键字会被动态地绑定到该对象上，使得方法内部的 this 可以访问到对象的状态。

let myObject = {
  name: 'Object Name',
  sayName: function() {
    console.log(`The name of this object is: ${this.name}`);
  }
};

myObject.sayName(); // The name of this object is: Object Name

在这个例子中， sayName 方法在 myObject 对象内定义，并且当它被调用时， this 指代 myObject ，因此可以访问 name 属性。

4.2 方法与事件驱动编程

4.2.1 事件驱动编程的基本概念

事件驱动编程是一种编程范式，其中程序的流程主要由用户或系统交互的事件来控制。在Web开发中，事件驱动编程尤为常见，比如用户点击按钮、输入数据或页面滚动等都是事件的实例。

JavaScript作为浏览器端的主要脚本语言，其事件处理模型允许开发者为各种事件编写相应的处理函数。当事件发生时，这些函数（即方法）就会被调用，从而执行特定的行为。

4.2.2 方法在实现事件驱动中的作用

方法在事件驱动编程中扮演关键角色，因为它们定义了当特定事件发生时应该执行什么操作。例如，在一个简单的点击事件处理中：

let button = document.querySelector('button');

button.addEventListener('click', function(event) {
  this.style.backgroundColor = 'blue';
});

在这个例子中， addEventListener 方法为按钮元素添加了一个点击事件监听器，它等待点击事件的发生。一旦发生点击事件，提供的回调函数就会被调用，更改按钮的背景颜色。

4.3 高级方法应用

4.3.1 设计模式中的方法应用

设计模式提供了一种在特定上下文中解决常见问题的框架和模板。在JavaScript对象方法中应用设计模式，可以使得代码更加清晰、易于维护。例如，使用模块模式可以创建具有私有状态和公有接口的对象。

let counter = (function() {
  let count = 0;

  return {
    increment: function() {
      count++;
    },
    decrement: function() {
      count--;
    },
    getCount: function() {
      return count;
    }
  };
})();

counter.increment();
console.log(counter.getCount()); // 输出 1

4.3.2 对象方法与行为封装的最佳实践

封装是面向对象编程中的核心概念之一，它指将数据（属性）和方法捆绑在一起，并对外隐藏实现细节，只暴露必要的接口。这通过对象方法的使用，可以非常方便地实现。良好的封装能够提高代码的复用性和安全性。

let person = {
  name: 'Alice',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.sayHello(); // Hello, my name is Alice.

在这个例子中， sayHello 方法封装了行为，外部代码可以通过 person 对象来调用它，但无法直接访问或修改 name 属性，除非通过提供的方法。这样的设计模式保证了对象属性和行为的封装性。

4.4 方法的进阶应用

4.4.1 高阶函数在方法中的应用

高阶函数是能够接受其他函数作为参数或返回函数的函数。在对象的方法中应用高阶函数可以带来更大的灵活性和代码的复用性。例如，可以创建一个通用的迭代函数，它接受一个处理函数作为参数并应用于数组的每个元素。

let numbers = [1, 2, 3, 4, 5];

function map(array, callback) {
  let result = [];
  for (let i = 0; i < array.length; i++) {
    result.push(callback(array[i]));
  }
  return result;
}

let squared = map(numbers, function(number) {
  return number * number;
});

console.log(squared); // [1, 4, 9, 16, 25]

4.4.2 方法链（Method Chaining）的实现

方法链是设计模式的一种实践，它允许我们在单个语句中调用多个方法。每个方法都返回其调用者，这样可以继续链式调用其他方法。在JavaScript中，许多库和框架都使用方法链来提高API的可读性和流畅性。

class Calculator {
  constructor(value) {
    this.value = value;
  }

  add(number) {
    this.value += number;
    return this;
  }

  multiply(number) {
    this.value *= number;
    return this;
  }
}

let result = new Calculator(10)
  .add(2)
  .multiply(3)
  .value; // 18

console.log(result); // 18

4.4.3 异步方法与回调的使用

JavaScript是事件驱动和基于回调的语言，异步编程对于Web开发至关重要。对象方法可以处理异步任务，如网络请求、文件操作等。通过回调函数、Promises或async/await，可以使得异步方法更加易于使用和管理。

function fetchData(url, callback) {
  setTimeout(() => {
    let data = 'fetched data';
    callback(data);
  }, 1000);
}

fetchData('***', function(data) {
  console.log(data); // 输出: fetched data
});

通过这些高级方法应用，开发者能够创建更加灵活和功能丰富的JavaScript对象，以解决复杂的编程问题。

5. 事件处理与用户交互

在前端开发中，事件处理和用户交互是构建动态和响应式网页的核心组件。理解事件机制和如何有效地利用它们对于提高用户体验至关重要。本章节将深入探讨JavaScript中的事件处理机制，以及如何通过这些机制实现丰富的用户交互效果。

5.1 事件基础和DOM事件模型

事件是用户或浏览器自身执行的某些操作的信号，例如点击、按键、页面加载完成等。JavaScript允许开发者对这些事件进行监听并作出响应，这是实现交云动效果的基础。

5.1.1 事件循环和事件冒泡机制

当一个事件发生时，它会在DOM树中从被触发的元素开始，逐级向上传播，这个过程称为事件冒泡。事件冒泡允许我们在父元素上设置一个事件监听器，来响应在子元素上发生的事件。

// 事件冒泡示例
document.body.addEventListener('click', function() {
  console.log('点击了body元素');
});

document.getElementById('child').addEventListener('click', function() {
  console.log('点击了子元素');
});

在此代码中，点击子元素时，两个监听器都会被触发。第一个监听器在子元素自身，第二个监听器在body元素上，后者是冒泡的结果。

5.1.2 DOM事件模型及事件处理函数

DOM事件模型定义了如何注册事件监听器以及如何处理事件。现代浏览器支持两种事件处理方式：传统方式（使用 on* 属性）和现代方式（使用 addEventListener ）。

// 使用addEventListener注册事件监听器
document.getElementById('myButton').addEventListener('click', function() {
  alert('按钮被点击');
});

5.2 事件监听和触发机制

为了有效地处理事件，JavaScript提供了 addEventListener 方法，允许我们为特定类型的事件注册回调函数。

5.2.1 使用addEventListener进行事件监听

addEventListener 方法接受三个参数：事件类型、事件处理函数和一个布尔值，用于指定事件是否在捕获阶段或冒泡阶段触发。

// 添加事件监听器的示例
const button = document.querySelector('button');
button.addEventListener('click', function(event) {
  console.log('按钮被点击');
}, false); // false表示事件冒泡阶段

5.2.2 事件委托及其优势

事件委托是一种利用事件冒泡原理实现的高效事件处理技术。通过在父元素上设置一个事件监听器来管理所有子元素上的事件，这种方法可以减少内存消耗，并简化事件管理。

<!-- HTML结构 -->
<ul id="myList">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

// 事件委托示例
document.getElementById('myList').addEventListener('click', function(event) {
  if(event.target && event.target.nodeName === 'LI') {
    console.log('点击了列表项', event.target.textContent);
  }
});

在此示例中，点击 <li> 元素会触发事件，事件冒泡到 <ul> 元素，然后执行事件监听器中的代码。

5.3 实现交云动效果的高级技术

交云动效果指的是在网页上实现的动态视觉效果，如滚动动画、滑动效果等。这些效果能够提升用户体验，增加页面的交互性。

5.3.1 动画和过渡效果的实现

CSS动画和过渡是实现交云动效果的简单而强大的工具。它们允许我们定义元素在不同状态下的样式，并且描述这些状态之间的变化过程。

/* CSS动画示例 */
.element {
  animation: slideIn 1s forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

5.3.2 高级用户交互的案例分析

复杂的用户交互通常涉及到多个事件的处理，如拖拽、缩放等。实现这些效果需要对事件有深入的理解，并能够编写相应的事件处理逻辑。

// 简单的拖拽示例
let dragging = false;
let startX, startY, initialX, initialY;

element.addEventListener('mousedown', function(e) {
  dragging = true;
  startX = e.clientX;
  startY = e.clientY;
  initialX = element.offsetLeft;
  initialY = element.offsetTop;
});

document.addEventListener('mousemove', function(e) {
  if (dragging) {
    element.style.left = `${initialX + e.clientX - startX}px`;
    *** = `${initialY + e.clientY - startY}px`;
  }
});

document.addEventListener('mouseup', function(e) {
  dragging = false;
});

在上述代码中，通过监听 mousedown 、 mousemove 和 mouseup 事件，实现了一个可拖拽的元素。

通过对事件处理机制的理解，开发者可以构建更加动态和交互式的网页应用，提升用户体验。这一章节介绍了事件的基本概念、监听和触发机制以及实现交云动效果的高级技术，为深入探索JavaScript中的用户交互打下了坚实的基础。

6. 深入JavaScript模块化编程和面向对象编程（OOP）

6.1 JavaScript的模块化编程

模块化是将一个大的系统分解成独立、可复用且相互协作的模块的过程。在JavaScript中，模块化不仅可以提高代码的可维护性，还能增强项目的可扩展性。

6.1.1 CommonJS和ES6模块系统的对比

在JavaScript的历史中，CommonJS和ES6模块系统是两个主要的模块化方案。

CommonJS 最初是Node.js中用于定义模块的标准，它使用 require 和 module.exports 进行模块的导入和导出。CommonJS的模块是同步加载的，这意味着每个模块加载都需要等待前一个模块加载完成。
ES6模块系统 是ECMAScript 2015引入的一种新的模块规范。它使用 import 和 export 进行模块的导入和导出，支持异步加载，适用于前端和服务器端。ES6模块还提供了更好的静态结构分析能力，这使得编译时优化成为可能。