js模块编程学习笔记

JavaScript模块化编程是一种组织代码的方式，它允许我们将代码划分为独立的、可重用的单元，称为模块。模块化编程可以提高代码的可维护性、复用性和组织性。本篇笔记主要基于阮一峰的博客，探讨了两种常见的JS模块规范：CommonJS和AMD，以及如何使用require.js进行模块管理。 1. **CommonJS**：这是Node.js服务器端编程广泛采用的模块化标准。在CommonJS中，`require()`函数用于导入模块，例如`var math = require('math')`。然后可以通过模块的`exports`对象暴露公共接口，如`math.add(2,3)`。但是，由于`require()`是同步的，当浏览器加载`math.js`时，会阻塞页面的其他资源加载，可能导致“假死”状态。 2. **AMD（Asynchronous Module Definition）**：AMD为异步模块定义，主要用于浏览器环境，解决同步加载导致的问题。AMD的核心是`require()`函数，它接受一个模块数组和回调函数作为参数，如`require(['math'], function(math) {...})`。AMD规范的实现之一是`require.js`。 3. **require.js**：这是一个模块加载器，它使用AMD规范，解决了浏览器中加载多个JavaScript模块导致的性能问题。通过`<script>`标签引入`require.js`，并使用`defer`或`async`属性确保异步加载。为了指定主模块，可以使用`data-main`属性，如`<script src="js/require.js" data-main="js/main"></script>`。 4. **AMD模块的写法**：模块定义通常使用`define`函数，可以指定依赖的模块和回调函数，回调函数的返回值作为模块的导出内容。例如： ```javascript define(['myLib'], function(myLib) { function foo() { myLib.doSomething(); } return { foo: foo }; }); ``` 5. **require.config()**：在`main.js`开头使用`require.config()`进行配置，可以设定模块路径（`paths`）、基础URL（`baseUrl`）、依赖（`deps`）、导出（`exports`）等。`shim`属性用于处理非AMD规范的库，指定依赖和导出的变量名。 ```javascript require.config({ paths: { "jquery": "lib/jquery.min" }, shim: { 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' } } }); ``` 6. **性能优化**：require.js提供了一种优化工具，可以将多个模块合并到一个文件中，减少HTTP请求，提升加载速度。 7. **插件支持**：require.js还支持一些插件，如`domready!`、`text!`和`image!`，这些插件可以帮助处理特定类型资源的加载，增强模块化的功能。 JavaScript模块化编程通过CommonJS和AMD规范，以及require.js这样的加载器，为开发者提供了强大的代码组织和管理能力，使得大型JavaScript项目更加有序和高效。在实际应用中，应根据项目需求选择合适的模块化方案，并利用require.js的配置和插件来优化性能。