CMD规范说明

专门用于浏览器端, 模块的加载是异步的 ，模块使用时才会加载执行，github地址

CMD基本语法

定义暴露模块

//定义有依赖的模块

define(function(require, exports, module){

    //引入依赖模块(同步)

    var module2 = require('./module2')

    //引入依赖模块(异步)

      require.async('./module3', function (m3) {

      })

    //暴露模块

    exports.xxx = value

})

引入使用模块

define(function (require) {

    var m1 = require('./module1')

    var m4 = require('./module4')

    m1.show()

    m4.show()

})

CMD规范的实现（浏览器端）

CMD规范需要用到sea.js，下载sea.js, 并引入，将sea.js导入项目: js/libs/sea.js

创建项目结构

|-js

  |-libs

    |-sea.js

  |-modules

    |-module1.js

    |-module2.js

    |-module3.js

    |-module4.js

    |-main.js

|-index.html

定义sea.js的模块代码：module1.js

define(function (require, exports, module) {

  //内部变量数据

  var data = 'atguigu.com'

  //内部函数

  function show() {

    console.log('module1 show() ' + data)

  }

  //向外暴露

  exports.show = show

})

定义sea.js的模块代码：module2.js

define(function (require, exports, module) {

  module.exports = {

    msg: 'I Will Back'

  }

})

定义sea.js的模块代码：module3.js

define(function (require, exports, module) {

  const API_KEY = 'abc123'

  exports.API_KEY = API_KEY

})

定义sea.js的模块代码：module4.js

define(function (require, exports, module) {

  //引入依赖模块(同步)

  var module2 = require('./module2')

  function show() {

    console.log('module4 show() ' + module2.msg)

  }

  exports.show = show

  //引入依赖模块(异步)，最后执行，因为是异步的，主线的先执行完才会执行这

  require.async('./module3', function (m3) {

    console.log('异步引入依赖模块3  ' + m3.API_KEY)

  })

})

main.js : 主(入口)模块

define(function (require) {

  var m1 = require('./module1')

  var m4 = require('./module4')

  m1.show()

  m4.show()

})

如何使用模块

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<script type="text/javascript" src="js/libs/sea.js"></script>

<script type="text/javascript">

  seajs.use('./js/modules/main')

</script>

</body>

</html>

js模块化规范—CMD规范的更多相关文章

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

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

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

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

  3. js模块化AMD/CMD

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

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

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

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

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

  6. CMD规范的函数与普通函数间调用

    /* * a.js * 普通的非cmd规范的js文件 */ function fun1(){ console.log("fun1"); //调用seajs模块中的fun1 seaj ...

  7. 关于 JS 模块化的最佳实践总结

    模块化开发是 JS 项目开发中的必备技能,它如同面向对象.设计模式一样,可以兼顾提升软件项目的可维护性和开发效率. 模块之间通常以全局对象维系通讯.在小游戏中,GameGlobal 是全局对象.在小程 ...

  8. JS模块化规范CommonJS，AMD，CMD

    模块化是软件系统的属性,这个系统被分解为一组高内聚,低耦合的模块.理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可.一个模块化系统所必须的 ...

  9. JS模块化规范CMD之SeaJS

    1. 在接触规范之前,我们用模块化来封装代码大多为如下: ;(function (形参模块名, 依赖项, 依赖项) { // 通过 形参模块名 修改模块 window.模块名 = 形参模块名 })(w ...

随机推荐

  1. oracle expdp自动备份脚本

    windows: @echo off echo ================================================ echo Windows环境下Oracle数据库的自动 ...

  2. mysql+高可用MMM

    一. MMM 简介:MMM 即 Multi-Master Replication Manager for MySQL:mysql 多主复制管理器,基于 perl 实现,关于 mysql 主主复制配置的 ...

  3. 从零开始学安全(三十)●使用sqlmap对网站一步步渗透

    常规注入步骤第一步注入点-u "url" 判断是否是注入点 有就判断用户的权限第二步获取数据库 所有的 -u "url" --dbs第三步 查看应用程序所有数据 ...

  4. CentOS 7.6安装桌面

    # yum -y groups install "GNOME Desktop" # startx

  5. vb.net 使用ip查詢(Host Name)(WorkGroup Name)(MAC Address)-運用cmd及nbtstat命令

    Sub nbtstat(ByVal ip As String) Dim strRst, strRst1, strRst2, strRst3 As String Dim n1, n2, n3 As In ...

  6. java连接MySQL数据库的方式

    Java连接数据库的几种方法 *说明 1.以MySQL数据库为例 2.分为四个步骤: 建立数据库连接, 向数据库中提交sql 处理数据库返回的结果 关闭数据库连接 一:JDBC 1.建立数据库连接 只 ...

  7. 雪碧图和如何实现浏览器中title的小图标

    background-position 雪碧图 我们的html和css中有三个属性可以向服务器发送请求 ser href url 2.overflow (1) 值hidden 超出就隐藏 (2)值sc ...

  8. 空间、域名与IP之间的关系？

    空间说白了就是服务器里面你可以使用的一个地方,在这里你可以放置数据和程序.最常用的就是放置您的网站程序和相关的所有文档和图片文件等等.这个放置你的网站文件的空间所在的服务器会有一个电信部门分配的固定编 ...

  9. Python中的特殊属性与方法

    模块的特殊属性 __doc__ 模块的说明文档 __all__ 指明模块希望被使用的属性.类和方法 __file__ 模块所在路径 类的特殊属性 __slots__ 限制类的实例允许添加的属性,是一个 ...

  10. BZOJ2434: [Noi2011]阿狸的打字机(AC自动机 树状数组)

    Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 4140  Solved: 2276[Submit][Status][Discuss] Descript ...