谈一下_前端模块化

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模块‘
 }
}))