JS 模块化- 04 CMD 规范与 Sea JS
1 CMD 规范介绍
CMD: Common 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.js 是 CMD 规范的浏览器端实现。
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 函数调用 module1 的 sum 函数。
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,在浏览器控制台中输出如下:
从控制台输出可以看出:
- module3 由于是异步加载,所以输出位置与代码位置不同;
- 导出模块处理使用 exports.xxx,也可以使用 return;
- 虽然多次调用了 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的更多相关文章
- javascript模块化编程的cmd规范(sea.js)
CMD(Common Module Definition,通用模块定义)是一种模块定义规范,规范中明确了模块的基本书写格式和基本交互规则.SeaJS就是遵循的这个规范. define函数 在CMD规范 ...
- JS 模块化 - 03 AMD 规范与 Require JS
1 AMD 规范介绍 AMD 规范,全称 Asynchronous Module Definition,异步模块定义,模块之间的依赖可以被异步加载. AMD 规范由 Common JS 规范演进而来, ...
- 04 CMD规范基础使用详解
CMD模块规范 1.1 CMD规范说明 专门用于浏览器端,并且模块的加载是异步的,而且只有模块使用时才会加载执行: CMD规范的语法类似于Commonjs + AMD --定义模块使用AMD语法,暴露 ...
- js模块化AMD/CMD
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统 ...
- js模块化开发——AMD规范
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就 ...
- JS 模块化- 05 ES Module & 4 大规范总结
1 ES Module 规范 ES Module 是目前使用较多的模块化规范,在 Vue.React 中大量使用,大家应该非常熟悉.TypeScript 中的模块化与 ES 类似. 1.1 导出模块 ...
- 前端模块化 、包管理器、AMD、 CMD、 require.js 、sea.js
问题由来,为什么要前端模块化管理: 假设我们有个组件名为Acomponent.js, 是架构封装的,里面依赖另一个公司公用库common.js: 那我们引入Acomponent.js的时候,怎么知道要 ...
- CMD (sea.js)模块定义规范
转自http://www.cnblogs.com/hongchenok/p/3685677.html CMD 模块定义规范 在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(C ...
- sea.js模块化编程
* 为什么要模块化? 解决文件依赖 解决命名冲突 ; var var2 = 2; function fn1(){ } function fn2(){ } return { fn1: fn1, fn2: ...
随机推荐
- Docker 安全及日志管理
Docker 安全及日志管理 容器的安全性问题的根源在于容器和宿主机共享内核. 容器里的应用导致Linux内核崩溃,那么整个系统可能都会崩溃. 虚拟机并没有与主机共享内核,虚拟机崩溃一般不会导致宿主机 ...
- 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目
一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...
- Druid 查询超时配置的探究 → DataSource 和 JdbcTemplate 的 queryTimeout 到底谁生效?
开心一刻 昨晚跟我妈语音 妈:我年纪有点大了,想抱孩子了 我:妈,我都多大了,你还想抱我? 妈:我想抱小孩,谁乐意抱你呀! 我:刚好小区有人想找月嫂,要不我帮你联系下? 妈:你给我滚 然后她直接把语音 ...
- [Linux] 如何在 Linux 电脑上制作专业的视频教程
目录 前言 1.软件工具准备 a. 录音软件 b. 录屏软件 c. 摄像头软件 d. 安卓屏幕操作软件 e. 视频剪辑软件 2.视频教程制作 3.效果 参考链接 前言 博主使用 Arch Linux ...
- python编程思想及对象与类
目录 编程思想 面向对象 面向过程 对象与类的概念 对象与类的创建 对象的实例化方法-独有数据 编程思想 1.面向对象 1.1. 面向对象前戏 案例:人狗大战 # 需求:人狗大战# 1.'创造'出人和 ...
- SpringBoot 集成 FreeMarker 导出 Word 模板文件(底部附源码)
思路解说 word 模板文件(doc 或 docx 文件)另存为 xml 文件 将后缀 xml 改成 html:大部分文档会改成 ftl(FreeMarker 的后缀名),因为 word 文件另存为 ...
- 使用Python3.7结合Redisearch代替ElasticSearch实现的全文检索功能服务
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_105 "检索"是很多产品中无法绕开的一个功能模块,当数据量小的时候可以使用模糊查询等操作凑合一下,但是当面临海 ...
- 关于hive分区,你知道多少呢?
文末查看关键字,回复赠书 一.理论基础 1.Hive分区背景 在Hive Select查询中一般会扫描整个表内容,会消耗很多时间做没必要的工作.有时候只需要扫描表中关心的一部分数据,因此建表时引入 ...
- Percona XtraBackup 8.0.26使用说明
欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 Percona XtraBackup特性说明 Percona Xtrabacku ...
- 源码解析springbatch的job是如何运行的?
202208-源码解析springbatch的job是如何运行的? 注,本文中的demo代码节选于图书<Spring Batch批处理框架>的配套源代码,并做并适配springboot升级 ...