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. 我的asp.net core目录

    推荐 Asp.NETCore轻松学系列阅读指引目录(asp.net core 2.2) 官方文档翻译 http://www.cnblogs.com/dotNETCoreSG/p/aspnetcore- ...

  2. T-SQL基础（四）之集合运算

    三个运算符 T-SQL支持三个集合运算符:UNION.INTERSECT.EXCEPT. 集合运算符查询的一般形式如下: Query1 <set_operator> Query2 -- 这 ...

  3. yarn install npm install （转载）

    解决 npm i 及 yarn install 都无法进行安装的问题和node-sass安装太慢的问题 2018年03月31日 19:49:07 Johnny丶me 阅读数:2906更多 所属专栏:  ...

  4. PHP生成器细说

    之前写过关于生成器的文章,可能还不够详细,正好群里有朋友在讨论.觉得还是有必要再细说下,如果大家做过Python或者其他语言的,对于生成器应该不陌生.生成器是PHP 5.5.才引入的功能,也许大家觉得 ...

  5. dubbo+zookeeper+springBoot框架整合与dubbo泛型调用演示

    dubbo + zookeeper + spring Boot框架整合与dubbo泛型调用演示   By:客 授客 QQ:1033553122  欢迎加入全国软件测试交流 QQ  群:7156436 ...

  6. strdup strcpy 的区别

    strdup可以直接把要复制的内容复制给没有初始化的指针,因为它会自动分配空间给目的指针 strcpy的目的指针一定是已经分配内存的指针

  7. 处理JavaScript异常的正确姿势

    译者按: 错误是无法避免的,妥善处理它才是最重要的! 原文: A Guide to Proper Error Handling in JavaScript Related Topics: 译者: Fu ...

  8. phpstudy 产生You don't have permission to access / on this server.解决

    phpstudy配置好访问目录时候有时候会产生You don't have permission to access / on this server. 解决办法: 修改服务器httpd.conf配置 ...

  9. php生成xml数据

    1.php生成xml数据一般有2种方式, 一个是组装字符串,另一个就是使用php内置的系统类 2.使用php内置类生成xml数据 3.拼装字符串生成xml数据 public function stat ...

  10. angularJs学习笔记-路由

    1.angular路由介绍 angular路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样. 后台路由,通过不同的 url 会路由到不同的控制器 (controller) 上,再渲染(re ...