CommonJs, AMD/RequireJs,CMD/seajs
JavaSript模块化
在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?
模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理。
模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式。
可以想象一个巨大的系统代码,被整合优化分割成逻辑性很强的模块时,对于软件是一种何等意义的存在。对于软件行业来说:解耦软件系统的复杂性,使得不管多么大的系统,也可以将管理,开发,维护变得“有理可循”。
那么在理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可。
首先,既然是模块化设计,那么作为一个模块化系统所必须的能力:
- 定义封装的模块。
- 定义新模块对其他模块的依赖。
- 可对其他模块的引入支持。
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相关推荐
- 再谈 JS中的模块规范(CommonJS,AMD,CMD)来自玉伯的seajs分析
随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做 ...
- 关于commonjs,AMD,CMD之间的异同
1.简介 随着前端业务复杂度的增加,模块化成为一个大的趋势.而在ES6还未被浏览器所支持的情况下,commonjs作为ES6中标准模块加载方案,在客服端中的支持情况并不好,现在在客服端中有2中模块化的 ...
- javascript模块化之CommonJS、AMD、CMD、UMD、ES6
javascript模块化之CommonJS.AMD.CMD.UMD.ES6 一.总结 一句话总结: CommonJS是同步加载模块,用在服务端:AMD是异步加载模块,用于浏览器端 1.为什么服务器端 ...
- 理解AMD ,CMD,CommonJS规范
https://blog.csdn.net/xcymorningsun/article/details/52709608 理解AMD ,CMD,CommonJS规范 2016年09月30日 10:33 ...
- JS JavaScript模块化(ES Module/CommonJS/AMD/CMD)
前言 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了, jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得 ...
- CommonJS,AMD,CMD,ES6,require 和 import 详解
CommonJS,AMD,CMD,ES6 commonJS用同步的方式加载模块.在服务端,模块文件都存在本地磁盘,读取非常快,所以这样做不会有问题.但是在浏览器端,限于网络原因,更合理的方案是使用异步 ...
- AMD、CMD、CommonJS、ES6(import/export)
AMD.CMD.CommonJS.ES6(import/export) AMD.CMD.CommonJS是ES5模块化解决方案 AMD -- 异步模块 Asynchronous Module Defi ...
- commonjs是什么_JavaScript模块化标准CommonJS/AMD/CMD/UMD/ES6Module的区别
JS-模块化进程 随着js技术的不断发展,途中会遇到各种问题,比如模块化. 那什么是模块化呢,他们的目的是什么? 定义:如何把一段代码封装成一个有用的单元,以及如何注册此模块的能力.输出的值依赖引用: ...
- CommonJS,AMD,CMD区别 - 郑星阳 - ITeye博客
CommonJS,AMD,CMD区别 博客分类: seajs和requirejs JavaScript zccst转载 学得比较晕,再次看commonjs,amd, cmd时好像还是没完全弄清楚,今天 ...
最新文章
- JavaScript将在企业环境中引发巨大变革
- 清华类脑计算成果再登Nature:张悠慧施路平团队出品,有望打破冯诺依曼瓶颈...
- ADB连接小米手机模拟上下左右滑动实例演示
- o2 atom(HP rw68xx)系列手机将可以使用Android。
- Junit_测试概述
- Socket通讯成功案例
- OpenCV精进之路(三):图像处理——形态学滤波(膨胀、腐蚀、开闭运算)
- sql server 远程连接问题
- VoxelNet:End-to-End Learning for Point Cloud Based 3D Object Detection阅读笔记
- ElasticSearch安装分词插件IK
- 安装CentOS7操作系统
- 快速排序的C语言实现
- 每日刷题之数独简单版 AcWing 1613
- 小龙女,杨过跳崖真相
- 【前端教程】前端要懂的色域知识
- 中央电教馆虚拟实验服务器,中央电化教育馆中小学虚拟实验试点工作启动暨培训会侧记...
- Linux基础理论简述
- kafka 消息发送和接收
- 基于飞凌NXP i.MX6ULL的无线网络测试
- cs230 deeplearning.ai 1: Standard NN
热门文章
- python怎么画两幅图_python matplotlib模块: Subplots(在同一个figure里绘制多个图)
- 第六章 模型的验证、监控与调优
- python3根据地址批量获取百度地图经纬度
- 【采用】智能反欺诈算法概览及典型应用案例
- 深度学习利器:TensorFlow与NLP模型
- CCAI 2017 | 德国DFKI科技总监Hans Uszkoreit:如何用机器学习和知识图谱来实现商业智能化? 原2017.07.25AI科技大本营 文/CSDN大琦 7 月22 - 2
- 如何快速全面建立自己的大数据知识体系? 大数据 ETL 用户画像 机器学习 阅读232 作者经过研发多个大数据产品,将自己形成关于大数据知识体系的干货分享出来,希望给大家能够快速建立起大数据
- 2014年各种编程语言的薪资和市场需求
- 盖茨推荐人人该读的九本书
- JVM - 再聊GC垃圾收集算法及垃圾收集器