带你读《现代Javascript高级教程》九、前端模块化（2）

带你读《现代Javascript高级教程》九、前端模块化（1）https://developer.aliyun.com/article/1349632?groupCode=tech_library

module.exports

每个CommonJS模块都有一个module对象，这个对象有一个exports属性用于导出模块。当其他模块通过require函数加载这个模块时，就可以获取到module.exports对象。

module.exports的初始值是一个空对象{}，我们可以添加属性到这个对象上，也可以直接将module.exports赋值为一个函数或其他类型的值。

例如，以下代码展示了如何使用module.exports导出一个函数：

// a.js
module.exports = function(){
    console.log('Hello world');};
// b.jsconst a = require('./a');a(); // 输出 'Hello world'

以上就是CommonJS模块的实现原理。虽然CommonJS主要用于服务器端，但其模块化思想和实现方式对于前端模块化的发展有着深远影响。

4） AMD（Asynchronous Module Definition）

AMD规范是由RequireJS提出的，特点是异步加载模块，适合用在浏览器环境。

// AMDdefine(['dependency'], function(){
    return 'module content';});

AMD规范的语法较为复杂，但能在浏览器环境中异步加载模块。

5） UMD（Universal Module Definition）

UMD规范试图提供一种解决方案，让同一段代码在CommonJS和AMD环境中都能运行。

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
 define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS
        module.exports = factory(require('jquery'));
    } else {
        // 浏览器全局变量
        root.returnExports = factory(root.jQuery);
    }}(this, function ($) {
    // 模块代码}));

UMD通过判断环境中是否存在define和exports对象，来判断是哪种模块环境，从而使用对应的模块化方案。

6） ES6模块化

ES6模块化是ECMAScript 6（ES2015）中新引入的模块系统，使用import关键字加载模块，通过export关键字导出模块。

// a.jsexport const a = 'Hello world';
// b.jsimport { a } from './a.js';
console.log(a); // 输出 'Hello world'

ES6模块化具有静态性，这种静态性质让依赖关系更加明显，有利于工具进行优化。此外，ES6模块是异步加载，也适合在浏览器环境中使用。

2.结论

模块化是前端开发中的一种重要的编程思想，它让代码组织更加清晰，便于维护和重用。经过多年的发展，前端模块化方案已经从简单的全局函数，发展到当前的ES6模块化。

每一种模块化方案都有其适用场景，选择哪种方案主要取决于项目的需求。理解不同模块化方案的实现原理，可以帮助我们更好地使用和选择这些工具。