浅沫记忆 发表于 2021-12-16 18:54:42

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下载网址

注意事项

[*]尤其要注意地址路径是否正确。

require.js引入第三方模块

[*]下面我们以jquery这个库为例:

[*]
[*]

[*]在libs下添加库文件

[*]在主函数处配置路由

[*]在需要暴露的模块处添加参数

[*]





https://blog.51cto.com/u_13162410/4810191
页: [1]
查看完整版本: JS模块化(二):AMD规范(require.js)