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. PHP之单例模式

    之前记得有写过PHP的几种这模式.这几天看群里在问单列模式,觉得还是有必要再深入写清楚下..其实单例模式很好理解滴哦 单例模式顾名思义,就是只有一个实例,作为对象的创建模式,单例模式确保某一个类只有一 ...

  2. python进程间通信

    Process之间有时需要通信,操作系统提供了很多机制来实现进程间的通信. 1. Queue的使用 可以使用multiprocessing模块的Queue实现多进程之间的数据传递,Queue本身是一个 ...

  3. Web Worker 初探

    什么是Web Worker? Web Worker 是Html5 提出的能够在后台运行javascript的对象,独立于其他脚本,不会影响页面的性能,也不会影响你继续对于页面进行操作.通俗点讲,就是后 ...

  4. navicate 远程无法链接linux上mysql数据库问题

    1. 先确认阿里云是否放开了3306权限 (开启阿里云服务器端口) 2. 连接linux,登录数据库:mysql -uroot -p 修改root用户远程登录权限: 想myuser使用mypasswo ...

  5. blfs（systemd版本）学习笔记-安装、配置和使用wpa_supplicant无线网络连接工具

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! wireless项目地址:http://www.linuxfromscratch.org/blfs/view/stable-sy ...

  6. box-sizing 的作用

    box-sizing:content-box | border-box content-box: padding和border不被包含在定义的width和height之内.对象的实际宽度等于设置的wi ...

  7. Session过期，跳出iframe框架页显示会话过期页面

    web开发中经常会有这种情况,在一个主页面中包含侧边导航菜单和iframe,点击菜单项,对应页面会在iframe中显示,整个页面不会刷新.但是如果设置了会话Session,在会话过期后再操作会自动re ...

  8. 详解LSTM

    https://blog.csdn.net/class_brick/article/details/79311148 今天的内容有: LSTM 思路 LSTM 的前向计算 LSTM 的反向传播 关于调 ...

  9. 如何用ABP框架快速完成项目(3) - 为什么要使用ABP和ABP框架简介

    首先先讲为什么要使用ABP? 当然是因为使用ABP可以快速完成项目啦. 时间就是金钱, 效率就是生命嘛   有了ABP, 你就节省了写如下模块的时间: CRUD数据库基本操作 校验 异常处理 日志 权 ...

  10. 初见jQuery EasyUI

    本文通过一个简单的小例子,简述jQuery EasyUI的使用方法,仅供学习分享使用,如有不足之处,还请指正. 什么是jQuery EasyUI ? 引用官网的一句话:jQuery EasyUI fr ...