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

37次阅读

共计 969 个字符,预计需要花费 3 分钟才能阅读完成。

一、AMD 规范

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

1、基本语法

暴露模块:

// 定义没有依赖的模块
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>

正文完
 0