JS 模块化- 04 CMD 规范与 Sea JS

  • JS 模块化- 04 CMD 规范与 Sea JS已关闭评论
  • 147 次浏览
  • A+
所属分类:Web前端
摘要

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


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,在浏览器控制台中输出如下:

JS 模块化- 04 CMD 规范与 Sea JS

从控制台输出可以看出:

  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 }) 

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