谈一下_前端模块化
Module 前端模块化
前端模块化从来都是前端人员关注的问题,首先出现的有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模块‘ } }))