04 CMD规范基础使用详解
CMD模块规范
1.1 CMD规范说明
专门用于浏览器端,并且模块的加载是异步的,而且只有模块使用时才会加载执行;
CMD规范的语法类似于Commonjs + AMD
——定义模块使用AMD
语法,暴露变量、引入模块使用Commonjs
语法
1.2 基本语法
使用全局函数define
定义模块,使用export
暴露模块,使用require
引入模块
1.21暴露模块
(1)定义一个没有依赖的模块,定义模块使用define函数,传入一个函数,函数参数为require,exports,module
,require参数用来引入模块,后面两个参数用来暴露模块,暴露模块的方法和Commonjs
规范一样,可以使用module.exports
或者exports
// module1.js
define(function(require,exports,module){
let name = '过青年';
function getName(){
return name;
}
module.exports = {name,getName};
});
(2)定义一个有依赖的模块
目录结构如下
- 使用同步引入模块,同步可能导致堵塞
// module2.js
//同步引入
define(function(require,exports,module){
let module1 = require('./module1.js');
let age = 20;
console.log(module1.name);
console.log(module1.getName());
module.exports = {age};
})
- 使用异步引入模块
// module2.js
// 异步引入
define(function(require,exports,module){
let age = 20;
// 引入模块暴露的对象作为实参传入m1形参中
require.async('./module1.js',function(m1){
console.log(m1.name);
console.log(m1.getName());
});
module.exports = {age};
})
1.22引入模块
记住引入模块可以使用同步引入require()
和异步引入require.async()
// main.js同步引入模块
define(function(require,exports,module){
let m2 = require('./module/module2.js');
console.log(m2.age);
})
1.23在HTML页面上使用模块化
需要引入一个叫sea.js
的模块加载框架,再使用另外一个script
标签,当中使用seajs.use()
方法定义主模块
<!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/lib/sea.js"></script>
<script>
seajs.use('./js/main.js');
/*控制台输出,module2.js模块中使用同步、异步输出差异:
同步 异步
过青年 20
过青年 过青年
20 过青年
*/
</script>
</body>
</html>
总结
使用
define(function(require,exports,module){ })
定义模块在定义的模块中使用
module.exports
或者exports
暴露对象使用
require()
函数同步加载模块或者使用require.async()
异步加载模块HTML
中引入ser.js
脚本,并且再添加一个script标签,使用serjs.use()
方法指定主模块
04 CMD规范基础使用详解的更多相关文章
- Java进阶知识04 Struts2的基础配置详解
1.Struts2的原理/流程步骤 简单的理解: 1.客户端发送一个request请求,Tomcat服务器接收到的请求经过web.xml配置文件去处理,进入struts2的核心过滤器,从而进入s ...
- Nmap扫描教程之基础扫描详解
Nmap扫描教程之基础扫描详解 Nmap扫描基础扫描 当用户对Nmap工具了解后,即可使用该工具实施扫描.通过上一章的介绍,用户可知Nmap工具可以分别对主机.端口.版本.操作系统等实施扫描.但是,在 ...
- RabbitMQ,Apache的ActiveMQ,阿里RocketMQ,Kafka,ZeroMQ,MetaMQ,Redis也可实现消息队列,RabbitMQ的应用场景以及基本原理介绍,RabbitMQ基础知识详解,RabbitMQ布曙
消息队列及常见消息队列介绍 2017-10-10 09:35操作系统/客户端/人脸识别 一.消息队列(MQ)概述 消息队列(Message Queue),是分布式系统中重要的组件,其通用的使用场景可以 ...
- I2C 基础原理详解
今天来学习下I2C通信~ I2C(Inter-Intergrated Circuit)指的是 IC(Intergrated Circuit)之间的(Inter) 通信方式.如上图所以有很多的周边设备都 ...
- cmd批处理常用符号详解
cmd批处理常用符号详解 作者: 字体:[增加 减小] 类型:转载 我们在批处理编写过程中经常遇到各种特殊符号,很多朋友不是很清楚cmd中特殊符号的含义,这里简单的介绍下,方便需要的朋友 1.@一 ...
- python 3.x 爬虫基础---Urllib详解
python 3.x 爬虫基础 python 3.x 爬虫基础---http headers详解 python 3.x 爬虫基础---Urllib详解 前言 爬虫也了解了一段时间了希望在半个月的时间内 ...
- [转帖]cmd批处理常用符号详解
cmd批处理常用符号详解 https://www.jb51.net/article/32866.htm 很多符号 还是不清楚的.. 批处理能够极大的提高 工作效率 需要加强深入学习. 1.@一般在 ...
- RabbitMQ基础知识详解
什么是MQ? MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.MQ是消费-生产者模型的一个典型的代表,一端往消息队列中不断写入消息,而另一端则可以读取队列中 ...
- JAVA消息服务JMS规范及原理详解
JAVA消息服务JMS规范及原理详解 一.简介 JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应 ...
随机推荐
- Java | 静态嵌套类(Static Nested Class)
前言 本文内容主要来自 Java 官方教程中的<嵌套类>章节. 本文提供的是 JDK 14 的示例代码. 定义 静态嵌套类(Static Nested Class),是 Java 中对类的 ...
- 【WebLogic使用】3.WebLogic配置jndi数据源
参见博客:https://blog.csdn.net/acmman/article/details/70146603 参考视频教程: 一.什么是jndi数据源JNDI是Java命名与目录接口(Java ...
- vwware虚拟机网卡的三种模式
这里在虚拟机中必须要保证右上角的两个勾选上 三种模式:简单一个比如宿主机器直接连接路由器上网,那虚拟机和宿主机器是一定的可以上外网,相当于虚拟机直接连接在路由器上面,虚拟机需要配置可以上外网的IP地址 ...
- Java并发包JUC核心原理解析
CS-LogN思维导图:记录CS基础 面试题 开源地址:https://github.com/FISHers6/CS-LogN JUC 分类 线程管理 线程池相关类 Executor.Executor ...
- Typora及Markdown的介绍及使用
Typora及Markdown的介绍及使用 Typora是一款免费的Markdown编辑器,Typora不像其他Markdown编辑器一样使用一边代码一边预览的方式,而是写完代码之后直接出效果,所见即 ...
- 入门大数据---Hive常用DDL操作
一.Database 1.1 查看数据列表 show databases; 1.2 使用数据库 USE database_name; 1.3 新建数据库 语法: CREATE (DATABASE|SC ...
- Day12-微信小程序实战-交友小程序-搭建服务器与上传文件到后端
要搞一个小型的cms内容发布系统 因为小程序上线之后,直接对数据库进行操作的话,慧出问题的,所以一般都会做一个管理系统,让工作人员通过这个管理系统来对这个数据库进行增删改查 微信小程序其实给我们提供了 ...
- volatile与lock前缀指令
前言 我们知道volatile关键字的作用是保证变量在多线程之间的可见性,它是java.util.concurrent包的核心,没有volatile就没有这么多的并发类给我们使用. 本文详细解读一下v ...
- 如何理解nginx反向代理,其实叫逆向代理更容易让我理解
接触nginx后,以我的语文水平,一直无法理解它神奇的名字:反向代理 怎么就反向了?反哪里去了 (以下部分图片.内容来自网络整理) 1.先理解正向代理 正向代理( Forward Proxy ): 客 ...
- File and Code Templates IN IDEA
File and Code Templates (文件代码模板) 如何自定义设置头文件的注释,其中包括一些作者和文件创建时间和版本的设置 先打开File->Settings(或Alt+Ctrl+ ...