前端模塊化，就是在前端開發(fā)中，將一個(gè)復(fù)雜的、大型的程序，按照一定的規(guī)范拆分成多個(gè)小的模塊，來進(jìn)行管理，方便后期的維護(hù)與拓展。

前端模塊化，常用的規(guī)范有 commonJs、amd、cmd、ES6模塊化。

commonJs

node.js 的模塊化系統(tǒng)，采用的就是 commonJs 規(guī)范。commonJs 語法：
導(dǎo)出模塊：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 采用的規(guī)范是 amd，通過 define 方法來定義模塊，通過 require 方法，實(shí)現(xiàn)代碼的模塊加載。

// 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 來實(shí)現(xiàn)導(dǎo)出和引入的。

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

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

console.log(plan.name)