谈一下_前端模块化

Module 前端模块化

感谢 七月的雨、lizhik、 猿出道

前端模块化从来都是前端人员关注的问题，首先出现的有Common.js方案（CMD）、require.js方案（AMD）等等，以及最后收场的ES6 Module

Common.js

common.js顺应了JavaScript在node上的发展，使用的是同步加载的方式，可以用在服务器端。当用在前端上，就会影响页面的渲染（加载一个模块就是一次网络请求对吧），需要选择异步加载的其它方案

特性：1、模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。

2、所有代码都运行在模块作用域，不会污染全局作用域

3、CommonJS模块输出的是一个值的拷贝。

4、CommonJS模块是运行时加载。（与ES6Module相比）

AMD方案

模块化的浪潮吹到了浏览器端，但因为Commonjs是同步加载的，就催生出了require.js、sea.js等方案。

讲一下require.js（作用：1、防止全局污染，2、异步加载模块）

<!--先导入require.js,使用defer async就可以不影响页面渲染（或者直接在body最后导入）-->
<script src="js/require.js" defer async="true" ></script>

require.js 用法与分析 不错的文章

require.js 兼容性强，又易学

ES6 Module

能够统一模块化标准的，一定有它无可比拟的长处

1、它是编译时加载的（这与AMD、CMD以及CommonJS有着明显不同，ES6Module明显效率更高）

2、ES6 Module 输出的是值的引用，不会缓存值

3、ESModule 可以直接导入Commonjs模块，

module.exports => export default
exports.xxx => export xxx
import * as xxx from 'xxx' // 全适应

对比CommonJS ： CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。ES6 模块之中，顶层的this指向undefined；CommonJS 模块的顶层this指向当前模块

缺点：由于是编译时加载，所以无论怎样，对应的运行时不支持，就无法时候用。通常的做法是转化为其他方案：目前浏览器对ES6 Module兼容还不太好，我们平时在webpack中使用的export/import，会被打包为exports/require。最终文件中的模块实现是基于webpack自己实现的webpack_require（es5代码）

UMD模块

其实就是通用模块写法，集合了CommonJS、AMD和CMD，以及可以直接引用的global对象

(function(root, factory) {
 // 全局变量 module，识别方案
 if (typeof module === 'object' && typeof module.exports === 'object') {
     console.log('是commonjs模块规范，nodejs环境')
     var depModule = require('./umd-module-depended')
     // 模块自身的依赖 。。。
     module.exports = factory(depModule);
 } else if (typeof define === 'function' && define.amd) {
     console.log('是AMD模块规范，如require.js')
      // 模块自身的依赖 。。。
     define(['depModule'], factory)
 } else if (typeof define === 'function' && define.cmd) {
     console.log('是CMD模块规范，如sea.js')
     define(function(require, exports, module) {
         var depModule = require('depModule')
          // 模块自身的依赖 。。。
         module.exports = factory(depModule)
     })
 } else {
     console.log('没有模块环境，直接挂载在全局对象上')
      // 模块自身的依赖 。。。
     root.umdModule = factory(root.depModule);
 }
}(this, function(depModule) {
 console.log('我调用了依赖模块', depModule)
 // ...省略了一些代码，去代码仓库看吧
 return {
     name: '我自己是一个umd模块'
 }
}))