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

最新推荐文章于 2024-06-02 21:27:33 发布

liliWua

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量188

点赞数 1

文章标签： javascript es6

本文链接：https://blog.csdn.net/weixin_42756432/article/details/104972502

版权

一、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";

liliWua

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端模块化规范之commonjs、AMD、CMD、ES6

一、CommonJs规范是一个模块化规范，经常在node环境中使用，采用的是同步加载，浏览器中不支持使用,原因是浏览器缺少module、require、global、exports环境变量，使用插件browserify转换后，可以在浏览器中运行//模块文件m1.jsvar i=111;function demo(){ console.log("m1")}module.ex...
复制链接

扫一扫