在JavaScript的世界里，模块化是一种提高代码可维护性、复用性和扩展性的重要手段。通过引用外部资源，我们可以轻松实现代码的模块化，并且可以不断地扩展功能。下面，我将带你一步步学会如何使用JavaScript引用外部资源，实现代码模块化与功能扩展。
什么是模块化？
模块化，简单来说，就是将一个复杂的程序拆分成多个小的、独立的模块。每个模块负责特定的功能，模块之间通过接口进行通信。这样做的好处是，每个模块可以独立开发、测试和维护，提高了代码的可读性和可维护性。
引用外部资源
在JavaScript中，我们可以通过以下几种方式引用外部资源：
1. script标签
在HTML文件中，我们可以使用<script>标签来引入外部JavaScript文件。以下是一个示例：
<script src="https://cdn.jsdelivr.net/npm/your-library@1.0.0/index.js"></script>
在这个例子中，我们通过src属性指定了外部JavaScript文件的URL。当HTML文件加载时，浏览器会自动下载并执行该文件。
2. CommonJS
CommonJS是一种模块化规范，主要用于Node.js环境。在CommonJS中，我们可以使用require函数来引入外部模块。以下是一个示例：
const math = require('math');
console.log(math.add(1, 2)); // 输出 3
在这个例子中，我们通过require函数引入了名为math的模块，然后使用模块提供的add函数进行计算。
3. ES6模块
ES6模块是JavaScript的新模块化规范，它提供了一种更简洁、更强大的模块化方式。在ES6模块中，我们可以使用import和export关键字来引入和导出模块。以下是一个示例：
// math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
// main.js
import { add, subtract } from './math';
console.log(add(1, 2)); // 输出 3
console.log(subtract(1, 2)); // 输出 -1
在这个例子中，我们首先在math.js文件中定义了两个函数add和subtract，并通过export关键字导出。然后在main.js文件中，我们通过import关键字引入了这两个函数，并使用它们进行计算。
功能扩展
通过引用外部资源，我们可以轻松地扩展功能。以下是一些常见的扩展方式：
1. 引入第三方库
通过引入第三方库，我们可以获得更多的功能。例如，我们可以使用jQuery库简化DOM操作，使用Bootstrap库快速搭建页面等。
2. 创建自定义模块
我们可以根据需求创建自定义模块，将一些常用的功能封装起来，方便在其他项目中复用。
3. 使用插件
许多第三方库都支持插件机制，我们可以通过编写插件来扩展库的功能。
总结
通过引用外部资源，我们可以轻松实现JavaScript代码的模块化与功能扩展。掌握这些技巧，将有助于你写出更优秀、更可维护的代码。希望这篇文章能帮助你入门JavaScript模块化，祝你学习愉快！