知道JS有模块化开发的说法,也偶尔听过requireJs,AMD,CMD等等名字,甚至使用node的时候,还用过require之类的方法,但是对这些一直没有一个明确的认识和概念。想必这就是许多新手刚接触这方面知识时的一个普遍状态。
其实仅仅做一些基础的活儿的时候,并不需要对它们有太多的了解,知道怎么用就行了,管他是什么理念,是什么实现呢。于是人就懒下来了。
终于有一天,下定决心,一定要把这一块知识搞清楚,至少对此有个鲜明的认知,不再那么朦朦胧胧,A/C不分。
查了一些文章博客和知乎回答,发现大部分文章在某一部分上都会讲的很详细,太详细了,却又没有一个连贯,我觉得这不太适合我这样状况的新手,至少我因此多花了不少时间,而我写这篇文章就是希望和我一样有此困惑的新手能快速了解这几个标准,做到如果不是想深入,读完我总结的几个知识点,各位应该是可以不用再查找其他文章了的。
 
知识点1:AMD/CMD/CommonJs是JS模块化开发的标准,目前对应的实现是RequireJs/SeaJs/nodeJs.
 
知识点2:CommonJs主要针对服务端,AMD/CMD主要针对浏览器端,所以最容易混淆的是AMD/CMD。(顺便提一下,针对服务器端和针对浏览器端有什么本质的区别呢?服务器端一般采用同步加载文件,也就是说需要某个模块,服务器端便停下来,等待它加载再执行。这里如果有其他后端语言,如java,经验的‘玩家’应该更容易理解。而浏览器端要保证效率,需要采用异步加载,这就需要一个预处理,提前将所需要的模块文件并行加载好。)
 
知识点3 : AMD/CMD区别,虽然都是并行加载js文件,但还是有所区别,AMD是预加载,在并行加载js文件同时,还会解析执行该模块(因为还需要执行,所以在加载某个模块前,这个模块的依赖模块需要先加载完成);而CMD是懒加载,虽然会一开始就并行加载js文件,但是不会执行,而是在需要的时候才执行。
 
知识点4:AMD/CMD的优缺点.一个的优点就是另一个的缺点, 可以对照浏览。
                AMD优点:加载快速,尤其遇到多个大文件,因为并行解析,所以同一时间可以解析多个文件。
                AMD缺点:并行加载,异步处理,加载顺序不一定,可能会造成一些困扰,甚至为程序埋下大坑。
 
                CMD优点:因为只有在使用的时候才会解析执行js文件,因此,每个JS文件的执行顺序在代码中是有体现的,是可控的。
                CMD缺点:执行等待时间会叠加。因为每个文件执行时是同步执行(串行执行),因此时间是所有文件解析执行时间之和,尤其在文件较多较大时,这种缺点尤为明显。
 
知识点5:如何使用?CommonJs的话,因为nodeJs就是它的实现,所以使用node就行,也不用引入其他包。AMD则是通过<script>标签引入RequireJs,具体语法还是去看官方文档或者百度一下吧。CMD则是引入SeaJs。

common js CMD/AMD 是什么 和他们之间的联系区别的更多相关文章

  1. Common JS、AMD、CMD和UMD的区别

    一.CommonJS 1.CommonJS API定义很多普通应用程序(主要指非浏览器的应用)使用的API.它的终极目标是提供一个类似Python,Ruby和Java标准库.CommonJs 是服务器 ...

  2. 模块化规范Common.js,AMD,CMD

    随着网站规模的不断扩大,嵌入网页中的javascript代码越来越大,开发过程中存在大量问题,如:协同开发,代码复用,大量文件引入,命名冲突,文件依赖. 模块化编程称为迫切的需求. 所谓的模块,就是实 ...

  3. js模块化AMD、CMD、ES6

    AMD CMD ES6模块化 各个模块化规范对比理解 一.AMD 在上一篇js模块化入门与commonjs解析与应用中详细的解析了关于commonjs模块化规范,commonjs采用的用同步加载方式, ...

  4. js模块定义——支持CMD&AMD&直接加载

    /* animate */ //直接加载 (function() { var animate = {} //balabala window.animate = animate; })(); //AMD ...

  5. angularjs 1 开发简单案例(包含common.js,service.js,controller.js,page)

    common.js var app = angular.module('app', ['ngFileUpload']) .factory('SV_Common', function ($http) { ...

  6. 封装自己的Common.js工具库

    Code/** * Created by LT on 2013/6/16. * Common.js * 对原生JS对象的扩展 * Object.Array.String.Date.Ajax.Cooki ...

  7. vue.common.js?e881:433 TypeError: Cannot read property 'nodeName' of undefined

    我觉得吧,是这么个原因,就是响应式要找这个node改它的内容,没找着,就报错了. 用computed监控vuex的state属性,绑定到页面上,如果这个属性改了,因为响应式,那么就要更改页面,如果页面 ...

  8. 常用js方法整理common.js

    项目中常用js方法整理成了common.js var h = {}; h.get = function (url, data, ok, error) { $.ajax({ url: url, data ...

  9. 项目中常用js方法整理common.js

    抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...

随机推荐

  1. JavaScript对象之document对象

    DOM对象之document对象 DOM对象:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. 打开网页后,首先 ...

  2. Nignx入门location、root配置

    nginx的配置.首当其冲的就是location配置了,下面是笔记参考的博文链接 http://www.cnblogs.com/sunkeydev/p/5225051.html   location匹 ...

  3. ionic复选框应用

    如图:在项目中我需要实现这个效果布局和功能(进入页面默认全选,点击之后可以不选择) HTML代码: <div class="row" ng-repeat="engi ...

  4. dubbo的简单应用

    一. dubbo简介 dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治理方案的核心框架. 二. 架构 引用dubbo的架构图: Provide ...

  5. HTML4,HTML5,XHTML 之间有什么区别?

    原始日期:2014-10-25 14:12 我来从HTML的历史谈谈他们3者的区别.在HTML的早期发展中,W3C成立之前,很多标准的制定都是在浏览器的开发者们互相讨论的情况下完成的,比如HTML 2 ...

  6. PHP设计模式:工厂方法

    示例代码详见https://github.com/52fhy/design_patterns 工厂方法 工厂方法是针对每一种产品提供一个工厂类.通过不同的工厂实例来创建不同的产品实例. 相比简单工厂, ...

  7. jQuery实现按Enter键触发事件

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  8. json字符串转成数组

    $hour_23 json_decode($hour_23,true);//(第二个参数为true的时候)

  9. Reflect(反射)

    反射.反射,程序员的快乐.反射是无处不在的. 那么什么是反射:通过反射,可以在运行时获得程序或程序集中每一个类型(包括类.结构.委托.接口和枚举等)的成员和成员的信息.有了反射,即可对每一个类型了如指 ...

  10. 音乐API之QQ音乐

    欢迎大家来到我的博客,这是我在博客园写的第一篇文章,但不会是最后一篇,希望大家多多关注我,支持我哦!正文开始,今天我们要讲的是QQ音乐的API,都是来源于官方的地址,以前我也想写一个,但百度谷歌之后都 ...