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规范基础使用详解的更多相关文章

  1. Java进阶知识04 Struts2的基础配置详解

    1.Struts2的原理/流程步骤 简单的理解:    1.客户端发送一个request请求,Tomcat服务器接收到的请求经过web.xml配置文件去处理,进入struts2的核心过滤器,从而进入s ...

  2. Nmap扫描教程之基础扫描详解

    Nmap扫描教程之基础扫描详解 Nmap扫描基础扫描 当用户对Nmap工具了解后,即可使用该工具实施扫描.通过上一章的介绍,用户可知Nmap工具可以分别对主机.端口.版本.操作系统等实施扫描.但是,在 ...

  3. RabbitMQ,Apache的ActiveMQ,阿里RocketMQ,Kafka,ZeroMQ,MetaMQ,Redis也可实现消息队列，RabbitMQ的应用场景以及基本原理介绍，RabbitMQ基础知识详解，RabbitMQ布曙

    消息队列及常见消息队列介绍 2017-10-10 09:35操作系统/客户端/人脸识别 一.消息队列(MQ)概述 消息队列(Message Queue),是分布式系统中重要的组件,其通用的使用场景可以 ...

  4. I2C 基础原理详解

    今天来学习下I2C通信~ I2C(Inter-Intergrated Circuit)指的是 IC(Intergrated Circuit)之间的(Inter) 通信方式.如上图所以有很多的周边设备都 ...

  5. cmd批处理常用符号详解

    cmd批处理常用符号详解 作者: 字体:[增加 减小] 类型:转载 我们在批处理编写过程中经常遇到各种特殊符号,很多朋友不是很清楚cmd中特殊符号的含义,这里简单的介绍下,方便需要的朋友   1.@一 ...

  6. python 3.x 爬虫基础---Urllib详解

    python 3.x 爬虫基础 python 3.x 爬虫基础---http headers详解 python 3.x 爬虫基础---Urllib详解 前言 爬虫也了解了一段时间了希望在半个月的时间内 ...

  7. [转帖]cmd批处理常用符号详解

    cmd批处理常用符号详解 https://www.jb51.net/article/32866.htm 很多符号 还是不清楚的.. 批处理能够极大的提高 工作效率 需要加强深入学习.   1.@一般在 ...

  8. RabbitMQ基础知识详解

    什么是MQ? MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.MQ是消费-生产者模型的一个典型的代表,一端往消息队列中不断写入消息,而另一端则可以读取队列中 ...

  9. JAVA消息服务JMS规范及原理详解

    JAVA消息服务JMS规范及原理详解 一.简介 JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应 ...

随机推荐

  1. Charles的介绍,配置与使用

    简介 Charles中文名叫青花瓷 它是一款基于HTTP协议的代理服务器 通过成为客户端或者浏览器的代理 然后截取请求和请求结果达到分析抓包的目的. 特点 跨平台 win linux mac 半免费 ...

  2. redis基础二----操作hash

    上面usr就是hash的名字,usr这个hash中存储了key 为id.name和age的值 一个hash相当于一个数据对象,里面可以存储key为id name age的值 2.批量插入一个hash数 ...

  3. 恕我直言你可能真的不会java第6篇：Stream性能差？不要人云亦云

    一.粉丝的反馈 问:stream比for循环慢5倍,用这个是为了啥? 答:互联网是一个新闻泛滥的时代,三人成虎,以假乱真的事情时候发生.作为一个技术开发者,要自己去动手去做,不要人云亦云. 的确,这位 ...

  4. 使用word2016发有代码高亮的博客

    复制使用notepad++,eclipse这类有高亮的编辑器编写的代码到word中是默认有高亮的. 测试有没有代码高亮(eclipse代码): package p_day1; public class ...

  5. LeetCode 80，不使用外部空间的情况下对有序数组去重

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题的第49篇文章,我们一起来看LeetCode的第80题,有序数组去重II(Remove Duplicates fr ...

  6. LeetCode54. 螺旋矩阵

    题意是,输入一个二维数组,从数组左上角开始,沿着顺时针慢慢地"遍历"每一个元素且每一个元素只遍历一次, 在一个新的一维数组中记录遍历的顺序,最终的返回值就是这个数组. 思路:可以考 ...

  7. Spring 获取单例流程(三)

    读完这篇文章你将会收获到 Spring 何时将 bean 加入到第三级缓存和第一级缓存中 Spring 何时回调各种 Aware 接口.BeanPostProcessor .InitializingB ...

  8. Java_面试札记

    Java_面试札记  为了不死,我愿献出生命 背景:记录下寄几和friend在2020年Java面试中遇到的problem. 1.MySQL索引结构? 基本上所有的索引都是B-Tree结构,还有一部分 ...

  9. JavaScript中数组去重的几种方法

    JavaScript中数组去重的几种方法 正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀.现在我总结了一些去重 ...

  10. LeetCode 第 196 场周赛 （题目：5452-5455，这是参加过最坑的周赛，暴力n^2居然可以过）

    5452. 判断能否形成等差数列   给你一个数字数组 arr . 如果一个数列中,任意相邻两项的差总等于同一个常数,那么这个数列就称为 等差数列 . 如果可以重新排列数组形成等差数列,请返回 tru ...