1 CMD 规范介绍

CMDCommon Module Definition, 通用模块定义。与 AMD 规范类似,也是用于浏览器端,异步加载模块,一个文件就是一个模块,当模块使用时才会加载执行。其语法与 AMD 规范很类似。

1.1 定义模块

定义模块使用 define 函数:

define(factory)

define 函数接收的参数 factory 可以是一个对象、字符串或函数。如:

define({ 'str': 'Hello World' })

define('Hello world')

factory 为函数时,这个函数就是当前这个模块的构造函数,该函数接收三个参数:

define(function(require, exports, module) {

})

这三个参数的意义如下:

- require:函数,可以通过该函数加载其他模块
- exports:对象,用于向外部提供接口,即可以通过该对象导出对象、属性或函数,将本模块内部的变量、函数等暴露给其他模块使用
- module:对象,存储当前模块相关的属性和函数

1.2 加载模块

CMD 规范中,所有的 JS 都是在模块中,入口模块 —— 主模块也是一个模块,使用模块工厂函数的 require 函数加载其他模块。

define(function(require, exports, module) {
const m = require('./m1')
console.log(m1)
})

异步加载模块:

define(function(require, exports, module) {
require.async('./m1', function (m3) {
console.log(m1)
})
})

2 Sea.js

Sea.jsCMD 规范的浏览器端实现。

2.1 使用准备

从 github 上下载 sea.js,创建如下目录文件结构:

04_CMD/
|- lib/
|- sea.js
|- modules/
|- module1.js
|- module2.js
|- module3.js
|- index.js
|- index.html

modules 目录存放三个模块,index.js 为入口(主模块)。

2.2 实现三个模块

module1.js 导出 sum 函数:

define(function (require, exports, module) {

  console.log('in module1.')

  function sum(num1, num2) {
console.log('module1 sum function.', num1, num2)
return num1 + num2
} exports.sum = sum
})

module2.js 定义并导出一个内部变量 str 和函数 calculate ,calculate 函数调用 module1sum 函数。

define(function (require, exports, module) {

  console.log('in module2')

  const str = '优雅哥测试'

  function calculate (n1, n2) {
const m1 = require('./module1')
return m1.sum(n1, n2)
} exports.obj = {
str,
calculate
}
})

在 module2.js 的 calculate 函数中加载 module1,咱在后面会多次调用 calculate 函数,测试模块是否会重复加载。

module3.js 用于测试异步加载,只定义并通过 return 导出一个 demo 函数:

define(function (require, exports, module) {

  console.log('in module3')

  function demo() {
console.log('demo function')
} return {
demo
}
})

2.3 实现主模块

index.js 中,异步加载 module3,同步加载 module2,并多次调用 module2 中导出的 calculate 函数:

define(function (require) {

  console.log('in index')

  require.async('./modules/module3', function (m3) {
console.log('异步加载 module3')
m3.demo()
}) const m2 = require('./modules/module2')
console.log(m2.obj.str) console.log(m2.obj.calculate(10, 20))
console.log(m2.obj.calculate(100, 200))
console.log(m2.obj.calculate(1000, 3000))
})

2.4 实现入口页面

index.html 中首先通过 script 标签引入 sea.js,然后加载主模块:

<script src="./lib/sea.js"></script>
<script>
seajs.use('./index.js')
</script>

2.5 测试运行

在浏览器中运行 index.html,在浏览器控制台中输出如下:

从控制台输出可以看出:

  1. module3 由于是异步加载,所以输出位置与代码位置不同;
  2. 导出模块处理使用 exports.xxx,也可以使用 return
  3. 虽然多次调用了 calculate 函数,calculate 函数中加载 module1,但 module1 不会被加载多次,加载后会被缓存起来。

3 总结

CMD 规范的语法:

// 定义模块
define(function(require, exports, module) {
// 同步加载模块
const m1 = require('../xxx') // 异步加载模块
require.async('../xxx', function (m2) {
}) // 使用 exports 导出模块
exports.xxx = xxx //也可以使用 return 导出模块
// return xxx
})

感谢你阅读本文,如果本文给了你一点点帮助或者启发,还请三连支持一下,点赞、关注、收藏,作者会持续与大家分享更多干货

JS 模块化- 04 CMD 规范与 Sea JS的更多相关文章

  1. javascript模块化编程的cmd规范(sea.js)

    CMD(Common Module Definition,通用模块定义)是一种模块定义规范,规范中明确了模块的基本书写格式和基本交互规则.SeaJS就是遵循的这个规范. define函数 在CMD规范 ...

  2. JS 模块化 - 03 AMD 规范与 Require JS

    1 AMD 规范介绍 AMD 规范,全称 Asynchronous Module Definition,异步模块定义,模块之间的依赖可以被异步加载. AMD 规范由 Common JS 规范演进而来, ...

  3. 04 CMD规范基础使用详解

    CMD模块规范 1.1 CMD规范说明 专门用于浏览器端,并且模块的加载是异步的,而且只有模块使用时才会加载执行: CMD规范的语法类似于Commonjs + AMD --定义模块使用AMD语法,暴露 ...

  4. js模块化AMD/CMD

    JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?     模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统 ...

  5. js模块化开发——AMD规范

    这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就 ...

  6. JS 模块化- 05 ES Module & 4 大规范总结

    1 ES Module 规范 ES Module 是目前使用较多的模块化规范,在 Vue.React 中大量使用,大家应该非常熟悉.TypeScript 中的模块化与 ES 类似. 1.1 导出模块 ...

  7. 前端模块化 、包管理器、AMD、 CMD、 require.js 、sea.js

    问题由来,为什么要前端模块化管理: 假设我们有个组件名为Acomponent.js, 是架构封装的,里面依赖另一个公司公用库common.js: 那我们引入Acomponent.js的时候,怎么知道要 ...

  8. CMD (sea.js)模块定义规范

    转自http://www.cnblogs.com/hongchenok/p/3685677.html   CMD 模块定义规范 在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(C ...

  9. sea.js模块化编程

    * 为什么要模块化? 解决文件依赖 解决命名冲突 ; var var2 = 2; function fn1(){ } function fn2(){ } return { fn1: fn1, fn2: ...

随机推荐

  1. Docker 安全及日志管理

    Docker 安全及日志管理 容器的安全性问题的根源在于容器和宿主机共享内核. 容器里的应用导致Linux内核崩溃,那么整个系统可能都会崩溃. 虚拟机并没有与主机共享内核,虚拟机崩溃一般不会导致宿主机 ...

  2. 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目

    一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...

  3. Druid 查询超时配置的探究 → DataSource 和 JdbcTemplate 的 queryTimeout 到底谁生效?

    开心一刻 昨晚跟我妈语音 妈:我年纪有点大了,想抱孩子了 我:妈,我都多大了,你还想抱我? 妈:我想抱小孩,谁乐意抱你呀! 我:刚好小区有人想找月嫂,要不我帮你联系下? 妈:你给我滚 然后她直接把语音 ...

  4. [Linux] 如何在 Linux 电脑上制作专业的视频教程

    目录 前言 1.软件工具准备 a. 录音软件 b. 录屏软件 c. 摄像头软件 d. 安卓屏幕操作软件 e. 视频剪辑软件 2.视频教程制作 3.效果 参考链接 前言 博主使用 Arch Linux ...

  5. python编程思想及对象与类

    目录 编程思想 面向对象 面向过程 对象与类的概念 对象与类的创建 对象的实例化方法-独有数据 编程思想 1.面向对象 1.1. 面向对象前戏 案例:人狗大战 # 需求:人狗大战# 1.'创造'出人和 ...

  6. SpringBoot 集成 FreeMarker 导出 Word 模板文件(底部附源码)

    思路解说 word 模板文件(doc 或 docx 文件)另存为 xml 文件 将后缀 xml 改成 html:大部分文档会改成 ftl(FreeMarker 的后缀名),因为 word 文件另存为 ...

  7. 使用Python3.7结合Redisearch代替ElasticSearch实现的全文检索功能服务

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_105 "检索"是很多产品中无法绕开的一个功能模块,当数据量小的时候可以使用模糊查询等操作凑合一下,但是当面临海 ...

  8. 关于hive分区,你知道多少呢?

    ​ 文末查看关键字,回复赠书 一.理论基础 1.Hive分区背景 在Hive Select查询中一般会扫描整个表内容,会消耗很多时间做没必要的工作.有时候只需要扫描表中关心的一部分数据,因此建表时引入 ...

  9. Percona XtraBackup 8.0.26使用说明

    欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 Percona XtraBackup特性说明 Percona Xtrabacku ...

  10. 源码解析springbatch的job是如何运行的?

    202208-源码解析springbatch的job是如何运行的? 注,本文中的demo代码节选于图书<Spring Batch批处理框架>的配套源代码,并做并适配springboot升级 ...