JavaSript模块化

在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?
模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理。
模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式。
可以想象一个巨大的系统代码,被整合优化分割成逻辑性很强的模块时,对于软件是一种何等意义的存在。对于软件行业来说:解耦软件系统的复杂性,使得不管多么大的系统,也可以将管理,开发,维护变得“有理可循”。
那么在理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可。
首先,既然是模块化设计,那么作为一个模块化系统所必须的能力:

  1. 定义封装的模块。
  2. 定义新模块对其他模块的依赖。
  3. 可对其他模块的引入支持。

commonjs

commonjs起初是服务端模块的规范,nodejs就是采用这个规范。
CommonJs原来是叫ServerJs,从名字可以看出是专攻服务端的,为了统一前后端而改名CommonJs。它的规范是一个单独的文件就是一个模块。加载模块使用require方法,该方法读取文件并执行,最后导出一个exports对象
例如:
// foo.js

//私有变量
var test = 123;
function foobar(){this.foo = function(){}this.bar = function(){}
}
var foo = new foobar()
//exports对象上的方法和变量是公有的。
exports.foo = foo;

// require 方法默认读取js文件,所以可以省略js后缀

var test = require('./foo').foo;
test.bar();

commonjs是同步加载模块,所以加载完成后才能执行后面的操作。服务端require一个模块,加载的模块文件一般都是已经存在本地硬盘,所以加载起来比较快,消耗的时间可以忽略,就没有必要采用异步方式的来加载。但是如果我们考虑到浏览器端的话,就肯定知道,同步加载,阻塞页面的渲染,造成页面白屏,或者卡死等现象,对于用户体验肯定是不友好的。

另外,资源的加载方式与服务端完全不同,在浏览器端,需要从服务端来下载这个文件,然后运行里面的代码才能得到API,需要花费一个http请求,也就是说,require后面的一行代码,需要资源请求完成才能执行。由于浏览器端是以插入<script>标签的形式来加载资源的(ajax方式不行,有跨域问题),没办法让代码同步执行,所以像commonjs那样的写法会直接报错。所以就有了AMD,CMD。

AMD(Asynchromous Module Definition)

字面意思”异步模块定义”,就是一种规范。依赖前置(依赖在使用之前都必须提前加载)。requirejs可以简单理解为AMD规范的一种实现。
AMD写模块的api如下:
define(id,dependencies,factory);
//通过数组引入依赖,回调函数通过形参传入依赖

// 依赖一开始就写好
define([‘someModule1’,’someModule2’],function(someModule1,someModule2){
function foo(){
//something
someModule1.test();
}
return {foo:foo};
});

CMD(Common Module Definition)

CMD规范是国内发展出来的,CMD是SeaJS在推广过程中对模块定义的规范化产出。
CMD推崇:

  • 一个文件一个模块,所以经常就用文件名作为模块id
  • 依赖就近,所以一般不在define的参数中写依赖,在factory中写
    factory有三个参数:function(require, exports, module)

require是 factory 函数的第一个参数
require(id) 是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口
exports 是一个对象,用来向外提供模块接口
module 是一个对象,上面存储了与当前模块相关联的一些属性和方法

//CMD

// 定义模块 myModule.js
define(function(require, exports, module) {//依赖可以就近书写
var $ = require('jquery.js')
$('div').addClass('active');
});
// seajs.use实现模块系统的加载启动   加载模块
seajs.use(['myModule.js'], function(my){
});

AMD,CMD区别

最明显的区别就是对依赖模块的执行时机处理不同

AMD推崇依赖前置,在定义模块的时候就要声明其依赖的模块,并且所有的依赖模块都是先执行。
对应的require.js在js程序中的依赖模块的执行顺序和书写顺序不一定一致,哪个先下载下来,哪个先执行。所有模块都加载执行完后会进入require的回调函数,执行主逻辑。
CMD推崇就近依赖,是一种按需加载的模式,定义一个模块的时候不需要立即制定模块之间的依赖模块,只有在用到某个模块的时候再去require
对应的seajs在js程序中的执行顺序是按照顺序结构的,当遇到require某模块的时候再去调用某些模块。

共同点:
都是异步加载模块。

RequireJS和SeaJS与CommonJS的比较(严格意义上前两者与后者不该放在一起比较,因为前两者是规范的具体实现,而后者是一种规范)

CommonJs, AMD/RequireJs,CMD/seajs相关推荐

  1. 再谈 JS中的模块规范(CommonJS,AMD,CMD)来自玉伯的seajs分析

    随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做 ...

  2. 关于commonjs,AMD,CMD之间的异同

    1.简介 随着前端业务复杂度的增加,模块化成为一个大的趋势.而在ES6还未被浏览器所支持的情况下,commonjs作为ES6中标准模块加载方案,在客服端中的支持情况并不好,现在在客服端中有2中模块化的 ...

  3. javascript模块化之CommonJS、AMD、CMD、UMD、ES6

    javascript模块化之CommonJS.AMD.CMD.UMD.ES6 一.总结 一句话总结: CommonJS是同步加载模块,用在服务端:AMD是异步加载模块,用于浏览器端 1.为什么服务器端 ...

  4. 理解AMD ,CMD,CommonJS规范

    https://blog.csdn.net/xcymorningsun/article/details/52709608 理解AMD ,CMD,CommonJS规范 2016年09月30日 10:33 ...

  5. JS JavaScript模块化(ES Module/CommonJS/AMD/CMD)

    前言 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了, jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得 ...

  6. CommonJS,AMD,CMD,ES6,require 和 import 详解

    CommonJS,AMD,CMD,ES6 commonJS用同步的方式加载模块.在服务端,模块文件都存在本地磁盘,读取非常快,所以这样做不会有问题.但是在浏览器端,限于网络原因,更合理的方案是使用异步 ...

  7. AMD、CMD、CommonJS、ES6(import/export)

    AMD.CMD.CommonJS.ES6(import/export) AMD.CMD.CommonJS是ES5模块化解决方案 AMD -- 异步模块 Asynchronous Module Defi ...

  8. commonjs是什么_JavaScript模块化标准CommonJS/AMD/CMD/UMD/ES6Module的区别

    JS-模块化进程 随着js技术的不断发展,途中会遇到各种问题,比如模块化. 那什么是模块化呢,他们的目的是什么? 定义:如何把一段代码封装成一个有用的单元,以及如何注册此模块的能力.输出的值依赖引用: ...

  9. CommonJS,AMD,CMD区别 - 郑星阳 - ITeye博客

    CommonJS,AMD,CMD区别 博客分类: seajs和requirejs JavaScript zccst转载 学得比较晕,再次看commonjs,amd, cmd时好像还是没完全弄清楚,今天 ...

最新文章

  1. JavaScript将在企业环境中引发巨大变革
  2. 清华类脑计算成果再登Nature:张悠慧施路平团队出品,有望打破冯诺依曼瓶颈...
  3. ADB连接小米手机模拟上下左右滑动实例演示
  4. o2 atom(HP rw68xx)系列手机将可以使用Android。
  5. Junit_测试概述
  6. Socket通讯成功案例
  7. OpenCV精进之路(三):图像处理——形态学滤波(膨胀、腐蚀、开闭运算)
  8. sql server 远程连接问题
  9. VoxelNet:End-to-End Learning for Point Cloud Based 3D Object Detection阅读笔记
  10. ElasticSearch安装分词插件IK
  11. 安装CentOS7操作系统
  12. 快速排序的C语言实现
  13. 每日刷题之数独简单版 AcWing 1613
  14. 小龙女,杨过跳崖真相
  15. 【前端教程】前端要懂的色域知识
  16. 中央电教馆虚拟实验服务器,中央电化教育馆中小学虚拟实验试点工作启动暨培训会侧记...
  17. Linux基础理论简述
  18. kafka 消息发送和接收
  19. 基于飞凌NXP i.MX6ULL的无线网络测试
  20. cs230 deeplearning.ai 1: Standard NN

热门文章

  1. python怎么画两幅图_python matplotlib模块: Subplots(在同一个figure里绘制多个图)
  2. 第六章 模型的验证、监控与调优
  3. python3根据地址批量获取百度地图经纬度
  4. 【采用】智能反欺诈算法概览及典型应用案例
  5. 深度学习利器:TensorFlow与NLP模型
  6. CCAI 2017 | 德国DFKI科技总监Hans Uszkoreit:如何用机器学习和知识图谱来实现商业智能化? 原2017.07.25AI科技大本营 文/CSDN大琦 7 月22 - 2
  7. 如何快速全面建立自己的大数据知识体系? 大数据 ETL 用户画像 机器学习 阅读232 作者经过研发多个大数据产品,将自己形成关于大数据知识体系的干货分享出来,希望给大家能够快速建立起大数据
  8. 2014年各种编程语言的薪资和市场需求
  9. 盖茨推荐人人该读的九本书
  10. JVM - 再聊GC垃圾收集算法及垃圾收集器