前端模块化规范之commonjs、AMD、CMD、ES6

程序员文章站 2022-03-04 13:49:09

...

一、CommonJs规范

是一个模块化规范，经常在node环境中使用，采用的是同步加载，浏览器中不支持使用,原因是浏览器缺少module、require、global、exports环境变量，使用插件browserify转换后，可以在浏览器中运行

//模块文件m1.js
var i=111;
function demo(){
    console.log("m1")
}
module.exports={i,demo};//等于exports={i,demo};

//index.js
let m1=require("./modules/m1.js");
m1.demo();

//index.html运行页面
<body>
    <!--首先下载browserify解析器 npm install browserify -g-->
    <!--然后将将文件解析成浏览器可执行的格式browserify index.js -o bundle.js-->
    <!--然后引入转换后的文件-->
    <script src="./bundle.js"></script>
</body>

二、AMD规范

是异步加载模块，AMD的产物是require.js,依赖前置

//模块文件m1.js
//导入m2模块文件，并且m1文件模块化导出
define(["m2"],function (m2) {
    var bb="我是m1";
    function demo() {
        console.log(bb);
    }
    return{demo}
})

//index.js 导入m1文件
//首先定义导入文件的路径
require.config({
    paths:{
        m1:"./modules/m1",
    }
})
require(["m1"],function (m1) {
    console.log("我是index")
    m1.demo();
})


//index.html 引入requirejs文件，并且定义data-main运行文件是index.js
<body>
    <script src="https://cdn.bootcss.com/require.js/2.3.6/require.js" data-main="./index.js"></script>
</body>

三、CMD规范

也是异步加载模块，CMD的产物是seaJs，就近加载按需加载

//模块文件m1.js
define(function (require,exports,module) {
    var m2=require("./m2.js") ;
    var a='我是m1'
    m2.m2();
    exports.m1=function(){
        console.log(a)
    }
})

//index.js
define(function (require,exports,module) {
    console.log("我是index")
    require.async("./modules/m1.js",function(m1){
        m1.m1();
    })
})

//index.html 需引入sea.js并且将index.js设为开头运行文件
<body>
    <script src="https://cdn.bootcss.com/seajs/3.0.3/sea.js"></script>
    <script>
        seajs.use("./index.js")
    </script>
</body>

四、ES6

//pageA.js 导入m1模块文件
import "./module/m1"
export default "pageA";

//index.js
import "./pageA";

前端模块化规范之commonjs、AMD、CMD、ES6

前端笔记之ES678&Webpack&Babel（下）AMD|CMD规范&模块&webpack&Promise对象&Generator函数

JavaScript模块化-CommonJS、AMD、CMD、UMD、ES6

前端模块化：CommonJS，CMD，AMD，ES6

前端模块化小总结—commonJs,AMD,CMD, ES6 的Module

javascript模块化之CommonJS、AMD、CMD、UMD、ES6

javascript模块化之CommonJS、AMD、CMD、UMD、ES6

前端模块化：AMD, CMD, CommonJS, ES6 Module

前端模块化详解（CommonJS、AMD、CMD、ES Module）

模块化之CommonJs、AMD、CMD和ES6模块化

前端模块化之CommonJS,ES6,AMD,CMD