前端模块化IIFE，commonjs，AMD，UMD，ES6 Module规范超详细讲解
【摘要】 前端模块化IIFE，commonjs，AMD，UMD，ES6 Module规范超详细讲解考必过小编为大家整理了关于前端模块化IIFE，commonjs，AMD，UMD，ES6 Module规范超详细讲解的信息，希望可以帮助到大家！
前端模块化IIFE，commonjs，AMD，UMD，ES6 Module规范超详细讲解
标签：打包接口andscalelodash配置objcomment服务
目录
为什么前端需要模块化
什么是模块
是什么IIFE
举个栗子
模块化标准
Commonjs
特征
IIFE中的例子用commonjs实现
AMD和RequireJS
如何定义一个模块
如何在入口文件引入模块
使用RequireJS需要的配置
ES6 modpe
如何运行
多次暴露
默认暴露
UMD
特点
原理
为什么前端需要模块化
在没有模块化的时候，多个脚本引入页面，会造成诸多问题，比如：
多人协同开发的时候，系统中可能会引入很多js脚本，这些js会定义诸多全局变量，这时候很容易出现变量名覆盖的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var info = "这是功能A";
</script>
<script type="text/javascript">
var info = "这是功能B";
</script>
<script>
console.log(info); // 这是功能B
</script>
</body>
</html>
上面的例子中可以看到 第一个js中定义的变量info的值被第二个js中的变量所覆盖
当脚本之间存在依赖关系的时候，单纯的引用script看不出js之间的依赖，可读性很差
<html>
<!-- 此处省略head -->
<body>
<script type="text/javascript">
function getMessage(){
return "这是一条message"
}
</script>
<script type="text/javascript">
function showMessage(){
console.log(getMessage());
}
</script>
<script>
showMessage(); // 这是一条message
</script>
</body>
</html>
如果第一个脚本没有引入，那么执行就会抛错，也就是说第二个脚本是依赖第一个脚本的，但是这个依赖关系这里看不出来
什么是模块
模块我理解为就是一个局部作用域，这个局部作用域内部定义了一些局部变量和方法，然后对外提供接口供外部调用，比如:
var modpeA = {
name : "A"
}
var modpeB = {
name : "B"
}
console.log(modpeA.name); // A
这里就可以看成是定义了两个最简单的模块，我们可以通过模块去访问各自的变量
是什么IIFE
IIFE(Immediately Ivoked Function Expression),即立即执行函数表达式，所谓立即执行，就是声明一个函数，声明完了立即执行
var IIFE = function(){
// ...
}
IIFE();
这样是立即执行但是肯定会有一个问题，函数名冲突了怎么办？所以有了我们最常见的写法,声明一个自执行匿名函数
(function(){
// ...
})()
如果看过jquery的一些插件的源码的话经常能看到这样的代码
(function($){
// ...
})(jQuery)
这里其实就是表明 这个模块依赖了jquery
举个栗子
定义模块A和模块B，模块B依赖模块A
js文件
// 模块A modpeA.js
(function(window){
var name = "modpe A";
// 对外暴露对象modpeA
window.modpeA = {
getName(){
return name;
}
}
})(window)
// 模块B modpeB.js
(function(window, modpeA){
// 对外暴露对象modpeB
window.modpeB = {
showFirstModpeName(){
console.log(modpeA.getName());
}
}
})(window, modpeA)
// main.js
(function(modpeB){
console.log(modpeB.showFirstModpeName());
})(modpeB)
html文件中
<html>
<!-- 此处省略head -->
<body>
<script type="text/javascript" type="./modpeA.js"></script>
<script type="text/javascript" type="./modpeB.js"></script>
<script type="text/javascript" type="./main.js"></script>
</body>
</html>
上述例子展示了如何用IIFE来定义模块，这样写有几个缺点：
定义了3个模块，那么就引入了3个js脚本，那如果有更多模块呢，那就意味着很页面加载时会像服务器发起多次http请求，这是不好的
html中script的标签顺序是固定的，因为模块main依赖modpeB，modpeB依赖modpeA，所以modpeA必须先声明，这样在modpeB的IIFE执行时候才能正常，不然会抛处ReferenceError
模块化标准
Commonjs
nodejs采用的模块化标准，commonjs使用方法require来引入模块,这里require()接收的参数是模块名或者是模块文件的路径，如果是模块名的话，require会到node_modpes中去找对应名称的模块来加载
const _ = require("lodash");
这里就引入了一个名为lodash的模块，那么一个模块应该如何对外提供接口呢？
commonjs提供两种方式对外暴露接口
// 第一种modpe.exports
const name = "张三";
modpe.exports = {
getName(){
return name
}
}
// 第二种
const name = "张三"
exports.getName = function(){
return name;
}
其实本质上，模块对外暴露的就是exports这个对象，modpe.exports =这种写法，相当于直接给exports对象赋值，而export. name这种写法其实就是给exports对象上添加了一个名为"name"的方法
特征
在node运行时执行
require是对值的拷贝
// modpeA.js
let count = 1;
// 异步让count++
setTimeout(()=>{
count++;
});
exports.count = count;
// main.js
const {count} = require("./modpeA.js");
// 同步打印count
console.log(count); // 打印值为1
// 异步打印count
setTimeout(()=>{
console.log(count); // 打印值为1
});
可见改变了modpeA中的count，并不影响main.js中引入的值
不做特殊处理（webpack打包）commonjs只能运行在node环境，浏览器环境不能直接使用，window上没有定义require这个方法，所以解释脚本的时候就会抛处ReferenceError
commonjs是同步加载模块，在node环境中require引入一个模块的时候，这个过程是同步的，必须等模块加载完才能继续后续操作
IIFE中的例子用commonjs实现
上述IIFE中的例子，用commonjs来实现就看起来就更清晰:
// 模块A modpeA.js
const name = "modpe A"
modpe.exports = {
getName(){
return name;
}
}
// 模块B modpeB.js
const {getName} = require("./modpeA.js"); // 引入modpeA
exports.showFirstModpeName = function(){
console.log(getName());
}
// main.js
const modpeB = require("./modpeB.js");
modpeB.showFirstModpeName(); // modpe A
上文中讲commonjs的特性的时候提到过，不能直接在浏览器中运行，所以我们需要先使用打包用具（webpack等工具，以后的文章中会写）把js打包处理成浏览器能直接运行的bundle.js,在引入到html中
<html>
<!-- 此处省略head -->
<body>
<script type="text/javascript" type="./dist/bundle.js"></script>
</body>
</html>
或者直接在用node运行main：
-> node main.js
AMD和RequireJS
全称Asynchronous Modpe Definition异步模块定义，与commonjs不同AMD是完全针对浏览器的模块化定义，AMD加载模块是异步的
如何定义一个模块
AMD规范中定义模块用到方法define，还是以之前的例子来举例，先来定义一个没有依赖的模块modpeA
// 定义一个modpeA.js
define(function(){
var name = "modpe A"
return {
getName(){
return name
}
}
})
这里define只接受了一个回调函数作为参数，这个回调是不是与IIFE有点相似，再来定义一个依赖modpeA的modpeB
// 定义一个modpeB.js
define(["modpeA"], function(modpeA){
return {
showFirstModpeName(){
console.log(modpeA.getName());
}
}
});
这里define的第一个参数是一个数组，数组里面放的是当前定义的模块所依赖的模块的名字，而后面回调函数接收的参数就是对应的模块了,也许看到这里你会想问，为什么这里只写一个模块名“modpeA”就能找到对应的modpeA.js的文件了呢？后面会讲
如何在入口文件引入模块
我们已经实现了modpeA.js和modpeB.js接下来要实现入口main.js，AMD的标准中，引入模块需要用到方法require,看到这你可能会有疑问，前面说commonjs的时候，不是说了window对象上没定义require吗?这里就不得不提到一个库，那就是RequireJS
RequireJS is a JavaScript file and modpe loader.
官网介绍RequireJS是一个js文件和模块的加载器，提供了加载和定义模块的api，当在页面中引入了RequireJS之后，我们便能够在全局调用define和require，下面来实现main.js
// 实现main.js
require(["modpeB"], function(modpeB){
modpeB.showFirstModpeName();
});
三个js文件都写好了，我们该如何引入到页面中呢?查看RequireJS官网已经给出了答案
<html>
<!-- 此处省略head -->
<body>
<!--引入requirejs并且在这里指定入口文件的地址-->
<script data-main="js/main.js" src="js/require.js"></script>
</body>
</html>
要通过script引入requirejs，然后需要为标签加一个属性data-main来指定入口文件
使用RequireJS需要的配置
前面介绍用define来定义一个模块的时候，直接传“模块名”似乎就能找到对应的文件，这一块是在哪实现的呢？其实在使用RequireJS之前还需要为它做一个配置
// main.js
require.config({
paths : {
// key为模块名称， value为模块的路径
"modpeA" : "./modpeA",
"modpeB" : "./modpeB"
}
});
require(["modpeB"], function(modpeB){
modpeB.showFirstModpeName();
});
这个配置中的属性paths应该说是一目了然，看了就能明白，为什么引入的时候只写模块名就能找到对应路径了吧，不过这里有一项要注意的是，路径后面不能跟.js文件后缀名，更多的配置项请参考RequireJS官网
ES6 modpe
es6提出了新的模块化方案，这个方案应该也是现在最流行的。通过关键字export value来暴露模块，通过import modpeName from path来引入模块,是不是看起来很简单？但是其实这里还有很多细节
如何运行
浏览器端是不能直接运行的，需要先用babel将es6语法转译成es5（把import转译成了require），然后再使用打包工具打包，最后在页面中引入
node端在某个版本后有办法直接运行了（抱歉没查是哪个版本），首先js文件的后缀名都要改成.mjs，然后再命令行直接运行node --experimental-modpes main.mjs
多次暴露
模块可以多次调用export来暴露任何值
// modpeA.mjs
// 暴露一个变量
export let name = "张三"
// 暴露一个方法
export function getName(){
return name;
}
export function setName(newName){
name = newName;
}
// main.mjs
import {name, getName, setName} from "./modpeA";
console.log(name); // 张三
setName("李四");
console.log(getName()); // 李四
这里import后面必须跟结构赋值如果写成下面这样，会输出undefined
import modpeA from "./modpeA"
console.log(modpeA); // undefined;在node环境下运行会报错
那如果模块分别暴露的方法有很多怎么办呢，这时候结构赋值不是要写很多个方法？其实还可以这样引入
import * as modpeA from "./modpeA";
console.log(modpeA.name); // 张三
modpeA.setName("李四");
console.log(modpeA.getName()); // 李四
默认暴露
es6还提供了一种暴露方法叫默认暴露，默认暴露即export defapt value这里的value可以是任何值，为什么上面举得import的反例，引入结果会是undefined呢，再看一个例子
// modpeA.mjs
export defapt {
name : 张三,
setName(newName){
this.name = newName;
},
getName(){
return this.name;
}
}
// main.mjs
import modpeA from "./modpeA"
console.log(modpeA); // { name: ‘张三‘, setName: [Function: setName], getName: [Function: getName] }
这里其实就能看出来，直接引入给modpeA赋值的其实是export defapt value后面的value
UMD
UMD全称为Universal Modpe Definition,也就是通用模块定义，为什么叫通用呢，我们怎么描述一个模块是通用的呢？举个例子，假如现在我的项目使用的是amd模块规范，那么现在我引入了一个用commonjs规范写的模块，能正常运行吗？肯定不行的，而UMD就是解决了这个问题。
特点
umd所谓的通用，就是兼容了commonjs和amd规范，这意味着无论是在commonjs规范的项目中，还是amd规范的项目中，都可以直接引用umd规范的模块使用（牛逼！）
原理
原理其实就是在模块中去判断全局是否存在exports和define，如果存在exports，那么以commonjs的方式暴露模块，如果存在define那么以amd的方式暴露模块
(function(window, factory){
if(typeof exports === "objects"){
// commonjs
modpe.exports = factory();
}else if(typeof define === "function" && define.amd){
// amd
define(factory);
}else{
window.modpeA = factory();
}
})(window, function(){
// 返回modpe
let modlueA = {
name : "张三",
setName(newName){
thie.name = newName;
},
getName(){
return this.name;
}
}
return modlueA;s
})
前端模块化IIFE，commonjs，AMD，UMD，ES6 Modpe规范超详细讲解
标签：打包接口andscalelodash配置objcomment服务
以上就是前端模块化IIFE，commonjs，AMD，UMD，ES6 Module规范超详细讲解的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！