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. EF(EntityFramework) 插入或更新数据报错

    报错信息:Store update, insert, or delete statement affected an unexpected number of rows (0). Entities m ...

  2. 【Java每日一题】20170120

    20170119问题解析请点击今日问题下方的“[Java每日一题]20170120”查看(问题解析在公众号首发,公众号ID:weknow619) package Jan2017; import jav ...

  3. linux /mac 下 go环境变量配置

    安装了go语言之后,还要设置路径,如果不设置路径,则执行 go 的时候会提示 go: command not found,提示的意思是没有这个命令行.这个是因为还没有设置PATH路径. 设置路径的方式 ...

  4. Flask 系列之 FlaskForm

    通过使用 FlaskForm ,可以方便快捷的实现表单处理. 说明 操作系统:Windows 10 Python 版本:3.7x 虚拟环境管理器:virtualenv 代码编辑器:VS Code 实验 ...

  5. C# 程序运行进度显示Lable

    public void test() { Thread.Sleep(); string vvv = ""; ; i < ;i++ ) { vvv = vvv +i.ToStr ...

  6. favicon.ico在chrome里显示正常，在ie，edge浏览器中不显示

    代码: <head> <meta charset="UTF-8"> <link href="imgs/favicon.ico" r ...

  7. js调用摄像头

    详情源码请参见下方的 GitHub  !!! <div> <b>调用移动端摄像头</b><br> <label>照相机: <input ...

  8. 【读书笔记】iOS-更改编辑器键的绑定

    一,Xcode-->Preferences--->Key Bindings. 参考资料:<Xcode实战开发>

  9. Linux swappiness参数设置与内存交换

    swappiness参数设置与内存交换 by:授客 QQ:1033553122 简介 swappiness,Linux内核参数,控制换出运行时内存的相对权重.swappiness参数值可设置范围在0到 ...

  10. 取消IE、Office、Wmp首次开启提示

    一.取消IE首次开启提示 1.运行框输入gpedit.msc.打开组策略配置 2.本地计算机策略-计算机配置-管理模板-windows组件-Internet Explorer,查找右边“阻止执行首次运 ...