JS模块化（二）：AMD规范（require.js）

AMD规范也可以称之为require.js

目录结构

无依赖模块写法

// 这是一个没有依赖的模块
define(function() {
    
    
    let name = '这是没有依赖的模块';
    function getName() {
    
    
        return name;
    }
    // 暴露模块
    return {
    
    getName};
})

有依赖模块的写法

// 下面的是有依赖的模块
define(['dataService'],function(dataService) {
    
    
    let msg = "alert.js";
    function showMsg() {
    
    
        console.log(msg,dataService.getName());
    };

    // 暴露模块
    return {
    
    showMsg};
})

主函数（汇总模块）

(function() {
    
    
    requirejs.config({
    
    

        baseUrl: './js',

        paths: {
    
    
            dataService: './modules/dataService',
            alerter: './modules/alerter'
        }
    });
    requirejs(['alerter'],function(alerter) {
    
    
        alerter.showMsg();
    })
})()

浏览器执行网页

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

require.js下载网址

https://github.com/requirejs/requirejs

注意事项

• 尤其要注意地址路径是否正确。

require.js引入第三方模块

• 下面我们以jquery这个库为例：

1. 在libs下添加库文件
   
2. 在主函数处配置路由
   
3. 在需要暴露的模块处添加参数