模块化

模块化

模块化是指把一个复杂的系统分解到多个模块以方便编码

1. 开发网页需要通过命名空间的方式来组织代码

<script src="./jquery.js">

• 命名空间冲突，两个库可能会使用同一个名称
• 无法合理的管理项目的依赖和版本
• 无法方便的控制依赖的加载顺序

2. commonJs

CommonJS 是一种使用广泛的javascript 模块化规范，核心思想是通过require方法来同步的加载依赖的其他模块，通过module.exports导出需要暴露的接口

3. 用法

采用 commonJS 导入以及导出时代码如下：

// 导入
const someFun= require('./moduleA');
someFun();

// 导出
module.exports = someFunc;

• 原理
  a.js

let fs = require('fs');
let path = require('path');
let b = req('./b.js');
function req(mod) {
    let filename = path.join(__dirname, mod);
    let content = fs.readFileSync(filename, 'utf8');
    let fn = new Function('exports', 'require', 'module', '__filename', '__dirname', content + '\n return module.exports;');
    let module = {
        exports: {}
    };

    return fn(module.exports, req, module, __filename, __dirname);
}

b.js

console.log('bbb');
exports.name = 'zfpx';

4.AMD

AMD 也是javascript模块化规范，与commonJs最大的不同在于它采用异步的方式去加载依赖的模块，AMD规范主要是为了解决针对浏览器环境的模块化问题，最具代表性的实现是 requirejs
AMD 优点

• 可在不转化代码的情况下直接在浏览器中运行
• 可加载多个依赖
• 代码可运行在浏览器的环境和Node.js 环境下

AMD 缺点

• javascripe运行环境没有原生支持AMD，需要先导入AMD的库才可以正常使用

用法

// 定义一个模块
define('a', [], function () {
    return 'a';
});
define('b', ['a'], function (a) {
    return a + 'b';
});
// 导入和使用
require(['b'], function (b) {
    console.log(b);
});

原理

let factories = {};
function define(modName, dependencies, factory) {
    factory.dependencies = dependencies;
    factories[modName] = factory;
}
function require(modNames, callback) {
    let loadedModNames = modNames.map(function (modName) {
        let factory = factories[modName];
        let dependencies = factory.dependencies;
        let exports;
        require(dependencies, function (...dependencyMods) {
            exports = factory.apply(null, dependencyMods);
        });
        return exports;
    })
    callback.apply(null, loadedModNames);
}

5.ES6模块化

ES6模块化是 ECMA 提出的 javascript 模块化规范，它在语言的层面上实现了模块化，浏览器厂商和 Node.js 都宣布要原生支持该规范，它将逐渐的取代 commonjs 和 AMD 规范，成为浏览器和服务器通用的模块解决方案，采用 ES6模块化导入及导出时的代码如下：

// 导入
import { name } from './person.js';
// 导出
export const name = 'zhoujin';