AMD_CMD_RequireJS

题目1: 为什么要使用模块化?


  • 最主要的目的:

    • 解决命名冲突
    • 依赖管理
  • 其他价值

    • 提高代码可读性
    • 代码解耦,提高复用性

题目2: CMD、AMD、CommonJS 规范分别指什么?有哪些应用


CMD 规范

CMDCommon Module Definition)是 SeaJS 在推广过程中对模块定义的规范化产出
AMD 的不同在于,AMD 推崇依赖前置会在一开始加载好所有需要的模块,而 CMD 则推崇依赖就近,当需要时才加载

//  初始化
seajs.use(["init.js"],function(init){})

//init.js
define(function(require, exports, module) {
  var math = require('math')
  console.log(math.add(1,2))  //  3
});

//math.js
 define(function(require, exports, module){
    var Add = function(x,y){    
        return x + y
    }
    return {
        add: Add
    }
 })

AMD 规范

AMDAsynchronous Module Definition),中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范

由于不是JavaScript原生支持,使用AMD规范进行页面开发需要用到对应的库函数,也就是大名鼎鼎RequireJS,实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出

//   main.js
require(['math'],function(math){
    console.log(math.add(1,2))  //  3
})

//math.js
define(function(){
    var Add = function(x,y){    
        return x + y
    }
    return {
        add: Add
    }
})

CommonJS 规范

CommonJS 是服务器端模块的规范,Node.js采用了这个规范。Node.JS首先采用了js模块化的概念。

  1. 在一个模块中,存在一个自由的变量”require”,它是一个函数。

    • 这个require函数接收一个模块标识符。
    • require返回外部模块所输出的API。
    • 如果出现依赖闭环( dependency cycle ),那么外部模块在被它的传递依赖(transitive dependencies)所require的时候可能并没有执行完成;在这种情况下,require返回的对象必须至少包含此外部模块在调用require函数(会进入当前模块执行环境)之前就已经准备完毕的输出。
    • 如果请求的模块不能返回,那么require必须抛出一个错误。
  2. 在一个模块中,会存在一个名为exports的自由变量,它是一个对象,模块可以在执行的时候把自身的API加入到其中。

  3. 模块必须使用exports对象来做为输出的唯一表示。

//  node.js 中启动 init.js
var math = require ( 'math.js' )
console.log ( math.add (1, 2 ) )   //  3

//  math.js
var Add = function(x,y){    
    return x + y
}
module.exports = {
    add: Add
}

参考
SeaJS模块加载器超简教程
前端模块化,AMD与CMD的区别

题目3: 使用 requirejs 完善入门任务15,包括如下功能:

git - 预览

推荐阅读更多精彩内容

  • 为什么要使用模块化? 最主要的目的:解决命名冲突依赖管理 其他价值提高代码可读性代码解耦,提高复用性 CMD、AM...
    Eazer阅读 139评论 2 1
  • 题目1: 为什么要使用模块化? 模块的由来:嵌入网页的JS代码越来越庞大,越来越像桌面程序,需要一个团队去分工协作...
    萧雪圣阅读 64评论 0 0
  • 1. 为什么要使用模块化? 随着 Web2.0时代的到来,,Ajax 技术得到广泛应用,jQuery 等前端库层出...
    D一梦三四年阅读 42评论 0 0
  • 题目1: 为什么要使用模块化? 解决命名冲突 依赖管理 提高代码可读性 代码解耦,提高复用性 题目2: CMD、A...
    抚年华轻过阅读 105评论 0 0
  • 实现来自算法精解:C语言描述(本人练习数据结构与基本算法记录,供回忆知识点使用) 代码上传至github:http...
    G1enY0ung阅读 183评论 0 1