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下添加库文件
  
  
• 在主函数处配置路由
  
  
• 在需要暴露的模块处添加参数
  
  
  
  •