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 ...
随机推荐
- opencv C++ Mat构造函数
cv::Scalar scalar1(v); cv::Mat mat3(size,CV_8UC1,scalar1); std::cout<<mat3<<std::endl; s ...
- 【asp.net core 系列】13 Identity 身份验证入门
0. 前言 通过前两篇我们实现了如何在Service层如何访问数据,以及如何运用简单的加密算法对数据加密.这一篇我们将探索如何实现asp.net core的身份验证. 1. 身份验证 asp.net ...
- 6、struct2使用servlet的api函数
方法一: Struts2的Action访问Servlet API 可以通过实现装配接口没,完成对Servlet API的访问 * ServletRequestAware取得HttpServletReq ...
- python从文件载入字典
data = np.load('dict_.npy') data = data.item() 不加最后一句,data不是字典类型
- MFC--自己优化滚动条的双缓冲绘图方法
2010-01-09 18:45 MFC--自己优化的双缓冲绘图方法 自己通过尝试,用修改视图坐标的方法, 优化了双缓冲绘图,实现起来并不复杂. 在介绍这个方法前,重新介绍一下窗口和视口的概念 ...
- win7旗舰版安装 oracle 10g 不能进入图形界面的问题
前阵子重装了系统,把dell机器自带的win7 64位(家庭版已升级旗舰版,装ORACLE正常)换回了32位系统,前两天因为一些软件开发的问题,需要把以前做的一个系统重新架起来,数据库用的是oracl ...
- Linux下nginx反向代理服务器安装与配置实操
1.我们只要实现访问nginx服务器能跳转到不同的服务器即可,我本地测试是这样的, 在nginx服务器里面搭建了2个tomcat,2个tomcat端口分别是8080和8081,当我输入我nginx服务 ...
- 一.2.序列化使用之用户资源功能app
1.环境准备:(1).新建功能app: (python36env) [vagrant@CentOS7 devops]$ python manage.py startapp users ---建议以后用 ...
- PHP实现邮箱验证码验证功能
*文章来源:https://blog.egsec.cn/archives/623 (我的主站) *本文将主要说明:PHP实现邮箱验证码验证功能,通过注册或登录向用户发送身份确认验证码,并通过判断输入 ...
- 状压DP之愤怒的小鸟
题目 传送们P2831 题目较长,不加以赘述 直接步入正题 首先是数学知识,我们可以先根据给出的任意两只猪构建相应的抛物线,同时再构建完之后应判断抛物线的合法性(比如a小于0啊,等等),公式推演就不在 ...