欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

03 AMD模块化规范基础使用详解

程序员文章站 2022-06-22 15:07:19
AMD模块规范1.1 AMD规范说明AMD规范专门用来实现浏览器端的模块化,并且模块的加载是异步的;引入一个第三方的require.js脚本用来解析AMD规范编写的模块1.2 基本语法使用define用来暴露模块,使用require用来引入模块1.21暴露模块(1)使用define(function(){})函数定义模块;并且向外暴露// 定义一个没有依赖模块的data.js模块define(function(){ let name = '过青年'; function get...

AMD模块规范

1.1 AMD规范说明

AMD规范专门用来实现浏览器端的模块化,并且模块的加载是异步的;引入一个第三方的require.js脚本用来解析AMD规范编写的模块

1.2 基本语法

使用define用来暴露模块,使用require用来引入模块;require()异步加载模块,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题

1.21暴露模块

(1)使用define(function(){})函数定义模块;并且向外暴露

// 定义一个没有依赖模块的data.js模块
define(function(){
    let name = '过青年';
    function getName(){
        return name;
    }
    console.log("我是data里的name:",name);
    // 暴露模块,推荐暴露对象,因为对象是用来存储数据的
    return {name,getName};
});

(2)使用define(['module','module2'],function(){})定义有依赖的模块,注意,数组里面的模块名只是一个代号,不一定要写模块名;不过推荐使用模块名作为代号,这样别人一看就知道引入了哪个模块,不用加后缀

// 定义一个有依赖模块的server.js模块
// 将依赖模块作为实参传递进去
define(['data'],function(data){
    let age = 20;
    function showName(){
        return data.name;
    }
    console.log("我是在server里面输出的data.name:",data.name);
    return {age,showName};
});
1.22引入模块

在主模块app.js中引入其他模块,使用require函数;需要使用require.config配置其他模块的路径

我们的路径是这样的

03 AMD模块化规范基础使用详解

// app.js
(function(){
    require.config({
        // 基本路径
        baseUrl:'./js/',
        paths:{
            data:'./module/data',
            server:'./module/server'
        }
    });
    require(['server'],function(server){
    //会将模块当作参数传进来
    	console.log("我是在app.js里输出的server.age:",server.age);
        console.log("我是在app.js里输出的data.name:",server.showName());
	});
})()

  1. 我们从HTML开始解析页面

  2. HTML页面引入的require.js根据data-main属性发现主模块是js目录下的app.js

  3. 于是进入app.js页面进行解析;解析app.js页面,发现引入了一个叫server的模块,那么这个模块在哪里呢?通过app.js页面中的配置函数require.config()发现server这个模块在./js/module/server.js我们写路径的时候不能加上后缀,因为解析时默认会添加后缀

  4. 于是找到了这个模块,进入这个server模块,结果发现这个server模块又引入了一个叫data的模块,于是又通过app.js的配置函数找,发现data模块在./js/module/server.js中,于是加载这个模块

  5. 模块全部加载完成

1.23在HTML页面上使用模块化

AMD规范本来就是用来实现浏览器端的模块化的;而**require.js**脚本就是这个规范的一种实现

script脚本中的data-main属性值代表主模块,从主模块进入模块内部,依次加载其他模块的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AMD规范实现</title>
</head>
<body>
    <script src="./js/libs/require.min.js" data-main="./js/app.js"></script>
    <!--
		控制台输出结果:
			我是data里的name: 过青年
			我是在server里面输出的data.name: 过青年
			我是在app.js里输出的server.age: 20
			我是在app.js里输出的data.name: 过青年
	-->
</body>
</html>

总结

  • 使用AMD规范需要引入require.js——第三方编写的脚本
  • 根据data-main确认主模块
  • 根据主模块中的require.config({ })函数确定各模块的位置
  • require.config({ })中各个模块的路径不能加后缀.js
  • 加载模块时里面的内容会运行

本文地址:https://blog.csdn.net/qq_44701189/article/details/107473506

相关标签: 模块化