前端模块化技术方案

前端模块化技术方案思维导图，包括CMD、es Modules、AMD、commonJs等等。

前端模块化技术方案

• CMD
  • 实现
    • 浏览器端
      • sea.js
  • 说明 
    • 整合了common.js 和 amd的特点
    • 模块使用时再声明
    • 模块的加载是异步的，模块使用时才会加载执行
  • 基本语法
    • 引入
      • 同步
        • var fs = require(fs);
      • 异步
        • require.async(./module3, function (m3) {})
    • 定义&暴露模块
      • 无依赖
        • define(function(require, exports, module){exports.xxx = valuemodule.exports = value})
      • 有依赖
        • define(function(require, exports, module){//引入依赖模块(同步)var module2 = require(./module2)//引入依赖模块(异步)require.async(./module3, function (m3) {})//暴露模块exports.xxx = value})
• es Modules
  • 实现
    • 浏览器端
      • 使用Bable将es6转为es5
      • 使用Browserify进行浏览器端编译
    • 服务器端
      • 正常使用
  • 说明
    • 是es6的模块引入方法，依赖需要提前声明好 import在顶层
  • 基本语法
    • 引入
      • import 模块名
      • import a from 模块名  将该模块引入为a
    • 输出
      • export default 默认输出模块
      • export 输出模块
  • 跟commonJs的区别
    • 引入
      • common 运行时加载
        • 因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成
      • es6 编译时输出接口
        • ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
    • 输出
      • es6输出的是一个值的引用
        • ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
      • common 输出的是一个值的拷贝
        • 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
• AMD
  • 实现
    • 浏览器端
      • require.js
  • 说明
    • 依赖必须提前声明好
    • 模块加载异步，指定回调函数
  • 基本语法
    • 引入
      • style=font-size: inherit;>require([module1, module2], function(m1, m2){使用m1/m2})
    • 定义&暴露模块
      • 无依赖
        • define(function(){return 模块})
      • 有依赖
        • define([module1, module2], function(m1, m2){return 模块})
• commonJs
  • 实现
    • 服务器端
      • node
    • 浏览器端
      • webpack
      • Browserify
  • 说明
    • 模块加载同步，即资源加载完再执行
    • 每个文件都可以是一个模块
    • 服务器端
      • 模块加载是运行时同步加载
    • 浏览器端
      • 模块加载是提前编译打包处理
  • 基本语法
    • 引入
      • 第三方模块
        • var fs = require(fs);
      • 自定义模块
        • var fs1 = require(./fs);
      • 模块引入说明
        • 读入并执行一个JavaScript文件，然后返回该模块的exports对象。如果没有发现指定模块，会报错
    • 输出
      • module.exports = 模块或者模块对象集合
      • exports.value = 模块名
      • 输出说明
        • module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口