前端模块化规范

前端模块化，就是在前端开发中，将一个复杂的、大型的程序，按照一定的规范拆分成多个小的模块，来进行管理，方便后期的维护与拓展。

前端模块化，常用的规范有 commonJs、amd、cmd、ES6模块化。

commonJs

node.js 的模块化系统，采用的就是 commonJs 规范。commonJs 语法：
导出模块：module.exports = value或exports.xxx = value
引入模块：require(xxx)

// index.js
var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

// app.js
var indexRouter = require('./routes/index');

.

amd

RequireJS 采用的规范是 amd，通过 define 方法来定义模块，通过 require 方法，实现代码的模块加载。

// System.js
define([
  'js/mixins/chartMixin.js',
  'js/mixins/pageMixin.js'
], function (
  chartMixin,
  pageMixin
) {
  return {
    echart: chartMixin,
    page: pageMixin
  }
})

// main.js
require([
  'js/System.js'
], function (System) {
  System.page(work)
})

.

es6模块化

es6 中的模块化是通过 export 和 import 来实现导出和引入的。

// plan.js
const plan = {
  name: 'plan'
}
export default plan

// index.js
import plan from './modules/plan'

console.log(plan.name)