关于模块化开发,CMD和AMD

模块化

首先要理解的是什么是模块化,模块化这个词来源于研究工程设计中的《Design Rules》,是指可组成系统的、具有某种确定独立功能的半自律性的子系统。

模块化在编程中的意义是为了减少软件的复杂度,使软件不会因为不断的扩大而导致功能维护、添加变得十分困难。而通过模块的拼接,就可以组成一些列的复杂的系统,同时
  模块与模块之间耦合度低。这种拼凑是灵活的,自由的

为什么要模块化

web前端不断发展,其中各种插件的代码量已经不是以前可比的了。而代码量的上升会暴露出许多问题:

首先是命名,即命名冲突问题。我们可能会对一个学生命名student1,当考虑到整个学校会有相同姓名的学生出现,就会把学生姓名放到特定空间下,即grade1.class1.student1,当然这时候你就会发现,好像还要考虑学校,于是最后就会变的极其长

1   // student1 学生
2 school1.grade1.class1.student1
3
4 // student1 学生的一个方法
5 school1.grade1.class1.student1.study()

这样看起来,似乎命名冲突的问题已经解决了,但是,每次为了调用一个普通的方法,就需要记住一长串的名字,似乎有点累

其次是复杂的依赖问题,我们经常会碰到以下的情况:

1  <script src="util.js"></script>
2 <script src=‘page.js‘></script>

在page.js中依赖util.js,util中存放一些通用的方法,page专门用于翻页效果的制作。但是,不管你重申多少遍,总会有人忘记先引用util.js,然后和你说page.js中有bug。
这是十分让人无语的。这还是一个简单的例子,当page需要依赖十多个js文件时,这就会变得超级复杂,总会有人忘记引入部分js。

当然有人想到在page中注释依赖,或者比如国外的 YUI3 框架、国内的 KISSY
等类库,目前是通过配置的方式来解决。

YUI.add(‘my-module‘, function (Y) {
// ...
}, ‘0.0.1‘, {
requires: [‘node‘, ‘event‘]
});

上面的代码,通过 requires
等方式来指定当前模块的依赖。这很大程度上可以解决依赖问题,但不够优雅。当模块很多,依赖很复杂时,烦琐的配置会带来不少隐患。

CMD和AMD

CMD和AMD的规范:

AMD规范:https://github.com/amdjs/amdjs-api/wiki/AMD

CMD规范:https://github.com/seajs/seajs/issues/242

AMD是requirejs在推广中对模块定义的规范

CMD是seajs在推广中对模块定义的规范

这两个规范都是为了javascript模块化开发的,特别是在浏览器端

这些模块化规范都能实现浏览器端的模块化开发

区别:

  1. 对于依赖的模块,AMD 是提前执行,CMD
    延迟执行

  2. CMD 推崇依赖就近,AMD
    推崇依赖前置


    // 引用玉伯大大的示例代码
    // CMD
    define(function(require, exports, module) {
    var a = require(‘./a‘)
    a.doSomething()
    // 此处略去 100 行
    var b = require(‘./b‘) // 依赖可以就近书写
    b.doSomething()
    // ...
    })

    // AMD 默认推荐的是
    define([‘./a‘, ‘./b‘], function(a, b) { // 依赖必须一开始就写好
    a.doSomething()
    // 此处略去 100 行
    b.doSomething()
    ...
    })


  3. AMD 的 API 默认是一个当多个用,CMD 的 API
    严格区分,推崇职责单一。比如 AMD 里,require 分全局 require 和局部
    require,都叫 require。CMD 里,没有全局 require,而是根据模块系统的完备性,提供 seajs.use
    来实现模块系统的加载启动。CMD 里,每个 API 都简单纯粹

另外的一些差异,可以看下在规范中的定义

具体的东西大家—SeaJS 和 RequireJS 的差异,可以参考:https://github.com/seajs/seajs/issues/277

===========================================================================

最后膜拜下玉伯大大

时间: 2024-11-10 07:56:50

关于模块化开发,CMD和AMD的相关文章

cmd和amd的区别(js模块化)

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出.CMD 是 SeaJS 在推广过程中对模块定义的规范化产出.类似的还有 CommonJS Modules/2.0 规范,是 BravoJS 在推广过程中对模块定义的规范化产出.还有不少?? 这些规范的目的都是为了 JavaScript 的模块化开发,特别是在浏览器端的.目前这些规范的实现都能达成浏览器端模块化开发的目的. 区别: 1. 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行.不过 RequireJS 从 2.0

前端模块化小总结—commonJs,AMD,CMD, ES6 的Module

随着前端快速发展,需要使用javascript处理越来越多的事情,不在局限页面的交互,项目的需求越来越多,更多的逻辑需要在前端完成,这时需要一种新的模式 --模块化编程 模块化的理解:模块化是一种处理复杂系统分解为更好的可管理模块的方式.简单来说就是解耦,简化开发,一个模块就是实现特定功能的文件,可以更方便地使用别人的代码,想要什么功能,就加载什么模块.模块开发需要遵循一定的规范 CommonJS规范 CommonJS就是一个JavaScript模块化的规范,是用在服务器端的node的模块规范,

Javascript模块化开发 – AMD规范

通行的Javascript模块规范共有两种:CommonJS和AMD. 2009年,美国程序员Ryan Dahl创造了node.js项目,将javascript语言用于服务器端编程.这标志"Javascript模块化编程"正式诞生.因为老实说,在浏览器环境下,没有模块也不是特别大的问题,毕竟网页程序的复杂性有限:但是在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程. node.js的模块系统,就是参照CommonJS规范实现的.在CommonJS中,有一个全局性

javascript模块化开发编程

随着网站的不断迭代更新,js代码越来越多,那么问题来了 代码比较乱 命名出现冲突 文件依赖比较繁杂 为了解决以上问题,模块化开发出现了 1.一个简单的demo,维护和扩展模块 模块的维护和扩展一定要遵守一个约定:开闭原则 对添加开放,对修改封闭 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>扩展和维护模块</

JS模块化规范CMD之SeaJS

1. 在接触规范之前,我们用模块化来封装代码大多为如下: ;(function (形参模块名, 依赖项, 依赖项) { // 通过 形参模块名 修改模块 window.模块名 = 形参模块名 })(window.模块名 || {}, 依赖项, 依赖项) 分号是什么作用? 答:为了防止前面的代码没有添加分号造成语法解析错误,也可能会是 "!", "+" 等 为什么要将代码放入一个自执行函数中 答:为了避免全局命名空间污染,核心就是利用函数的私有作用域 为什么将依赖项作

JS模块化开发(requireJS)

使用模块化开发的好处: 通过 exports 暴露接口.这意味着不需要命名空间了,更不需要全局变量.这是一种彻底的命名冲突解决方案. 通过 require 引入依赖.这可以让依赖内置,开发者只需关心当前模块的依赖,其他事情 Sea.js/ Require.js 都会自动处理好.对模块开发者来说,这是一种很好的 关注度分离,能让程序员更多地享受编码的乐趣 实现JS模块化开发,目前有两个规范,一个是AMD规范,一个是CMD规范. RequireJS遵循的是AMD规范.AMD推崇依赖前置. SeaJS

js模块化开发--AMD--CMD

什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得前端开发得到重视,也使得前端项目越来越复杂,然而,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,那么什么是模块呢? 一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块.模块开发

CMD和AMD探秘

踏上前端这条道路以来,我一直以为自己就是个娴熟的切图工,每天只需要做着重复的劳动,切图,做网站.然而,技术的发展是日新月异的,切图工早就面临淘汰.随着浏览器功能越来越完善,前端项目越来越大,代码越来越复杂,为了适应这种变化,越来越要求前端开发模块化. 首先介绍一下什么是模块化.模块化是指解决某一个复杂问题,按照一种分类的思维把问题进行系统分解,并处理.譬如将巨大的系统代码,整合优化分割成高内聚低耦合的模块,达到便于管理,维护和开发的目的. 模块化设计,必须实现以下能力: 定义封装的模块 定义新模

js模块化开发——前端模块化

在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可:如今CPU.浏览器性能得到了极大的提升,很多页面逻辑迁移到了客 户端(表单验证等),随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀 这时候JavaScript作为嵌入式的脚本语言的定位动摇了,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码 模