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. Docker虚拟机理论

    Docker虚拟机架构     ◆ Docker架构                 Docker创建的所有虚拟实例共用同一个Linux内核,对硬件占用较小,属于轻量级虚拟机   Docker镜像与容 ...

  2. 关于EF中出现FOREIGNKEY约束可能会导致循环或多重级联路径的问题

    ef中,我们创建外键的时候需要注意,否则会出现标题所示问题. 例:有项目表,项目收藏表,用户表 项目表有如下字段:ProjectId,InputPersonId等 项目收藏表有如下字段:Project ...

  3. Git合并指定文件到另一个分支

    经常被问到如何从一个分支合并特定的文件到另一个分支.其实,只合并你需要的那些commits,不需要的commits就不合并进去了. 合并某个分支上的单个commit 首先,用git log或sourc ...

  4. java——初识

    java是现在最火的高级编程语言之一,功能强,应用广. java可以做什么? 1. 开发桌面应用程序 2. 开发面向Internet的应用程序 开发java程序的基本步骤: 1. 编写源程序:mypr ...

  5. 浅析多线程的对象锁和Class锁

    一.前言 本来想在另外一篇文章说的,发现可能篇幅有点大,所以还是另开一篇博文来说好了.知识参考<Java多线程编程核心技术>,评价下这本书吧——大量的代码,简单的说明,真像在看博客.不过这 ...

  6. mysql日期时间函数

    日期时间函数1.取得当前日期时间SELECT NOW(), SYSDATE(),CURRENT_TIMESTAMP() FROM DUAL2.取得当前日期SELECT CURDATE(),CURREN ...

  7. 3Delight feats. OpenVDB

    Full GI, no multiple scattering now (no point-cloud similar solution in 3Delight now) Blackbody Cart ...

  8. git上传中的排除的配置文件， git实际的操作代码；

    git上传中的排除的配置文件: git实际的操作 在主目录建立.gitignore文件并输入以下保存: *.class #package file *.war *.ear #kdiff3 ignore ...

  9. JAVA项目从运维部署到项目开发(一.Jenkins)

    一.Jenkins的介绍 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作, 旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. 二.功能 Jen ...

  10. Android 官方Demo ActionBarCompat-Styled

    ActionBarCompat-Styled Demo下载地址:https://github.com/googlesamples/android-ActionBarCompat-Styled/#rea ...