03 AMD规范的基础使用详解
AMD模块规范
1.1 AMD规范说明
AMD规范专门用来实现浏览器端的模块化，并且模块的加载是异步的；引入一个第三方的require.js脚本用来解析AMD规范编写的模块
1.2 基本语法
使用define用来暴露模块，使用require用来引入模块
1.21暴露模块
（1）使用define(function(){})函数定义模块；并且向外暴露
// 定义一个没有依赖模块的data.js模块
define(function(){
let name = '过青年';
function getName(){
console.log(name);
return name;
}
// 暴露模块，推荐暴露对象
return {name,getName};
});
（2）使用define(['module','module2'],function(){})定义有依赖的模块，注意，数组里面的模块名只是一个代号，不一定要写模块名；不过推荐使用模块名作为代号，这样别人一看就知道引入了哪个模块，不用加后缀
// 定义一个有依赖模块的server.js模块
// 将依赖模块作为实参传递进去
define(['data'],function(data){
let age = 20;
function showName(){
console.log(data.name);
return name;
}
return {age,showName};
});
1.22引入模块
在主模块app.js中引入其他模块，使用require函数；需要使用require.config配置其他模块的路径
我们的路径是这样的
// app.js
(function(){
require.config({
// 以相对目录的方式指定一个基本路径
baseUrl:'./js/',
paths:{
// 以基本路径开始的相对路径
data:'./module/data',
server:'./module/server'
}
});
require(['server'],function(server){
//会将模块当作参数传进来
console.log(server.age); // 20
console.log(server.showName()); // 过青年
});
})()
我们从HTML开始解析页面
HTML页面引入的
require.js根据data-main属性发现主模块是js目录下的app.js于是进入
app.js页面进行解析；解析app.js页面，发现引入了一个叫server的模块，那么这个模块在哪里呢？通过app.js页面中的配置函数require.config()发现server这个模块在./js/module/server.js（我们写路径的时候不能加上后缀，因为解析时默认会添加后缀）于是找到了这个模块，进入这个
server模块，结果发现这个server模块又引入了一个叫data的模块，于是又通过app.js的配置函数找，发现data模块在./js/module/server.js中，于是加载这个模块模块全部加载完成
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>
</body>
</html>
总结
- 使用AMD规范需要引入
require.js——第三方编写的脚本 - 根据
data-main确认主模块 - 根据主模块中的
require.config({ })函数确定各模块的位置 require.config({ })中各个模块的路径不能加后缀.js
03 AMD规范的基础使用详解的更多相关文章
- RabbitMQ,Apache的ActiveMQ,阿里RocketMQ,Kafka,ZeroMQ,MetaMQ,Redis也可实现消息队列，RabbitMQ的应用场景以及基本原理介绍，RabbitMQ基础知识详解，RabbitMQ布曙
消息队列及常见消息队列介绍 2017-10-10 09:35操作系统/客户端/人脸识别 一.消息队列(MQ)概述 消息队列(Message Queue),是分布式系统中重要的组件,其通用的使用场景可以 ...
- Nmap扫描教程之基础扫描详解
Nmap扫描教程之基础扫描详解 Nmap扫描基础扫描 当用户对Nmap工具了解后,即可使用该工具实施扫描.通过上一章的介绍,用户可知Nmap工具可以分别对主机.端口.版本.操作系统等实施扫描.但是,在 ...
- ch01系统基础信息模块详解
第1章 系统基础信息模块详解 1.1 系统性能信息模块 psutil 解决VMWare在Windows10的安装问题: 安装VC Redistributable 2017 解决虚拟机的上网问题:修改V ...
- I2C 基础原理详解
今天来学习下I2C通信~ I2C(Inter-Intergrated Circuit)指的是 IC(Intergrated Circuit)之间的(Inter) 通信方式.如上图所以有很多的周边设备都 ...
- python 3.x 爬虫基础---Urllib详解
python 3.x 爬虫基础 python 3.x 爬虫基础---http headers详解 python 3.x 爬虫基础---Urllib详解 前言 爬虫也了解了一段时间了希望在半个月的时间内 ...
- RabbitMQ基础知识详解
什么是MQ? MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.MQ是消费-生产者模型的一个典型的代表,一端往消息队列中不断写入消息,而另一端则可以读取队列中 ...
- jmeter 基础功能详解
jmeter 基础功能详解 thread group:包含一组线程,每个线程独立地执行测试计划. sampler:采样器,有多种不同的sample实现,用来发起各种请求,如http请求,jdbc请求, ...
- hadoop基础-SequenceFile详解
hadoop基础-SequenceFile详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.SequenceFile简介 1>.什么是SequenceFile 序列文件 ...
- Cisco路由技术基础知识详解
第一部分 请写出568A的线序(接触网络第一天就应该会的,只要你掐过,想都能想出来) .网卡MAC地址长度是( )个二进制位(16进制与2进制的换算关系,只是换种方式问,不用你拿笔去算) A.12 ...
随机推荐
- 使用CImage双缓冲
一普通显示:现在的VC显示图片非常方便,远不是VC6.0那个年代的技术可比,而且支持多种格式的如JPG,PNG. CImage _img; 初始化: _img.Load(L"map.png& ...
- Glusterfs读写性能测试与分析
一.测试目的: 1.测试分布卷(Distributed).分布式复制卷(Distributed-Replicate).条带卷(Strip)和分布式条带复制卷(Distributed-Strip-Rep ...
- Dysregulation of Exosome Cargo by Mutant Tau Expressed in Human-induced Pluripotent Stem Cell (iPSC) Neurons Revealed by Proteomics Analyses（蛋白质组学揭示了人诱导的多能干细胞（iPSC）神经元中表达的突变Tau对外泌体的失调） 解读人：梁玉婷
期刊名:MCP 发表时间:(2020年4月) IF:4.828 单位:Skaggs School of Pharmacy and Pharmaceutical Sciences, University ...
- 深度学习论文翻译解析（八）：Rich feature hierarchies for accurate object detection and semantic segmentation
论文标题:Rich feature hierarchies for accurate object detection and semantic segmentation 标题翻译:丰富的特征层次结构 ...
- django admin 添加用户出现外键约束错误
今天在做mxonline项目时,注册了用户表进admin后,想在后台添加一个用户试试,结果出现了错误,经过一番搜索发现以下两个解决方法,不过我只用了一种 报错信息: IntegrityError: ( ...
- asp.net core 发布包含文件
这样这个文件在发布的时候,就会包含进去了.
- C#客户端通过安全凭证调用webservice
怎么解决给XML Web services 客户端加上安全凭据,从而实现调用安全的远程web方法?首先,有远程web服务Service继承自System.Web.Services.Protocols. ...
- 【react】实现动态表单中嵌套动态表单
要实现一个功能动态表单中嵌套动态表单如下: 仔细看看antd的文档其实不难 具体步骤如下 1.建立一个 名为 ConcatRegion的组件(动态表单A)代码如下 export function Co ...
- 阿里P7岗位面试，面试官问我：为什么HashMap底层树化标准的元素个数是8
前言 先声明一下,本文有点标题党了,像我这样的菜鸡何德何能去面试阿里的P7岗啊,不过,这确实是阿里p7级岗位的面试题,当然,参加面试的人不是我,而是我部门的一个大佬.他把自己的面试经验分享给了我,也让 ...
- day09 基本数据类型（中）
目录 一 列表(list) 1.作用 2.定义 3.类型转化 4.内置方法 4.1按索引取值 4.2切片 4.3长度 4.4成员运算 4.5往列表中加值 4.5.1追加 4.5.2追加列表 4.5.3 ...