js的四种模块化引入规范

1、AMD

AMD是一种加载方式，异步加载模块，不占用主进程的代码执行

AMD规范依赖于require.js，来完成

模块放在数组一块加载

AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块，预加载

AMD的执行需要引入require.js文件

API

define

定义模块

他有两个参数，第一个用于声明需要加载的依赖模块，他是一个数组；

第二个是模块加载成功后的回调函数，这个回调函数相当于这个模块文件的代码区域，该模块的代码是在这个函数中添加的。回调函数的参数依次是每个加载的依赖模块

require.config

require方法本身是个对象他有一个config方法，用来配置requirejs运行。

这个方法接受一个对象，对象中有若干属性。

paths，它用于配置模块的加载路径

仅导出模块

define(function () {
    var msg="这是第一个模块";
    function getMsg() {
        return msg;
    }
    return {
        getMsg
    }
})

导入、导出模块

require.config({ //配置模块
    paths:{
        mod1:"mod1",
        mod2:"mod2",
        mod3:"mod3"
    }
});

define(["mod1","mod2","mod3"],function (mod1,mod2,mod3) { //加载模块，回调函数中来定义该模块的代码，用于导出
    var msgAll=mod1.getMsg()+mod2.getMsg()+mod3.getMsg();
    function getMsg(){
        return msgAll;
    }
    return { //导出模块
        getMsg
    }
})

引入模块

<script src="./amd/require.js" data-main="./amd/index.js"></script>

在script标签加载requirejs文件，添加data-main标签属性用于指定加载的模块

2、CMD

同步加载模块方式，他也可以实现异步加载

CMD规范的实现基于Sea.js文件

CMD加载模块是一个个的加载的

CMD推崇就近依赖，只有在用到某个模块的时候再去require引入，

API

define

传入一个函数，函数有三个参数，require、exports、module

require用于加载依赖的文件

exports与module是模块导出的方式

导出模块

导出方式两种

module.export={} //定义没有依赖的模块

export.xxx={} //定义有依赖的模块

没有依赖模块导出

define function(require, exports, module){
    exports.xxx = value;
    module.exports = value
}

有依赖模块导出

define function(require, exports, module){
    var module2 = require("./module2");
    exports.xxx = value
}

引入模块

<script src="./cmd/cmd.js"></script> //引入Sea.js文件
<script>
    seajs.use("./cmd/index.js"); //使用seajs.use 这种语法来引入模块
</script>

3、Es6模块化

javascript在早期并没有模块化的方式，要是用模块化需要依赖第三方框架 requirejs、Seajs

Es6引入了模块化的概念

他的优点

每一个模块只加载一次， 并只执行一次，重复加载同一文件，直接从内存中读取；

每一个模块内声明的变量都是局部变量， 不会污染全局作用域；

通过export导出模块，通过import导入模块

ES6模块只支持静态导入和导出，只可以在模块的最外层作用域使用import和export

在es6的import导入时要是用 as 来使用别名

导出模块

两种方法

export default

将模块方法一并导出一个对象，他只能导出一次，统一暴露模块的接口，这种导出方式可以在引入的时候自定义模块名

export default { //通过对象的形式导出
    mainMeg,
    mainMeg1
}

export

他通过在变量前声明的形式，来暴露这个接口，export可以重复使用，来暴露若干个，最终将这些暴露的接口放入一个对象中。

因为最终导出的是一个对象，在接受的时候，用解构赋值的形式来将他们提取出来，如果想要使用别名的话要用 as

export function mainMeg() {
    console.log("aaa");
}

export function mainMeg1() {
    console.log("bbb");
}

export与export default混合使用

1、export导出的接口并没有放在export default导出的对象中

2、export default导出的对象后依然可以继续用export来导出

3、export与export default导出的接口要用他们对应的方式引入

导入模块

export function mainMeg() {
    console.log("aaa");
}

function mainMeg2() {
    console.log("ccc");
}

function mainMeg3() {
    console.log("ddd");
}

export default {
    mainMeg2,
    mainMeg3
}

export function mainMeg4() {
    console.log("eee");
}

Es6的导入要先在script标签中设置模块引入方式，

<script type="module"> //声明引入方式

    import mode from "./es6/index.js"; //引入export default导出的对象

    import {mainMeg as play,mainMeg1,mainMeg4} from "./es6/index.js"; //引入export导出的接口

</script>

4、CommonJs

服务器同步加载模块规范

Node 应用由模块组成，采用 CommonJS 模块规范。

import {ajaxSend as ajax} from "./modules/ajax.js";

模块导出

1、运用了module.exports={} 语法导出，他会导出一个对象，对象中存储模块暴露的接口，这样一次性的导出

2、也可以通过module.exports.xxx=xxx 来向导出对象中添加导出的接口

3、为了方便，Node为每个模块提供一个exports变量，指向module.exports。这等同在每个模块头部，有一行这样的命令，var exports = module.exports;

但是注意，不能直接将exports变量指向一个值，因为这样等于切换了引用地址，切断了exports与module.exports的联系，并没有在module.exports内添加任何接口

可以通过exports.xxx=xxx 来向module.exports对象中添加属性

模块引入

简单地一句话将模块module.exports对象引入

var mod1=require("./mod1");

可以用解构赋值,来提取其中的方法

var {getMsg}=require("./mod1");