javascript模块化详解2AMD-CMD-ES6

jiezi

5 年前

一、AMD 规范

异步，用于浏览器端，依赖 require.js

暴露模块：

// 定义没有依赖的模块
define(function(){return 模块})

// 定义有依赖的模块
define(['module1','module2'],function(m1,m2){return 模块})

引入使用模块：

requirejs(['module1','module2'],function(m1,m2){使用 m1/m2})

代码演示：

// 无依赖模块 dataService.js
define(function(){
    let name = 'dataService.js'
    function getName() {return name}
    return {getName}
})

// 有依赖的模块 alerter.js
define(['dataService','jquery'],function(dataService,$){
    let msg = 'alerter.js'
    function showMsg() {$('body').css('color','red')
        console.log(msg, dataService.getName())
    }
    return {showMsg}
})

// 主模块 main.js
(function(){
    // 配置引用路径
    requirejs.config({
        baseUrl:'./',
        paths:{
            dataService:'./dataService',
            alerter:'./alerter',
            jquery:'./lib/jquery', // 第三方库
            angular:'./lib/angular'
        },
        // angular 不支持 amd 暴露，因此需要配置，将 angular 对象暴露出来
        shim:{
            angular:{exports:'angular'}
        }
    })
    // 引用模块 无需再暴露用 requirejs
    requirejs(['alerter'],function(alerter){alerter.showMsg()
    })
})();

注意 jquery 插件最后，自定义了模块，因此模块名称必须是 jquery

<!-- 主页面 index.html -->
<body>
    <script data-main="./app.js" src="require.js"></script>
</body>

一、AMD 规范

1、基本语法