知道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. caffe源码学习之Proto数据格式【1】

    前言: 由于业务需要,接触caffe已经有接近半年,一直忙着阅读各种论文,重现大大小小的模型. 期间也总结过一些caffe源码学习笔记,断断续续,这次打算系统的记录一下caffe源码学习笔记,巩固一下 ...

  2. javascript中event.clientX和event.clientY用法的注意事项

    今天做项目用到了event.clientX和event.clientY,给元素定位,用定位的时候,让top和left等于事件元素的的坐标 <!DOCTYPE html> <html& ...

  3. Facebook开源Zstandard新型压缩算法代替Zlib 简单使用

    简介 Zstandard(缩写为Zstd)是由Facebook的Yann Collet开发的一个无损数据压缩算法.Zstandard在设计上与DEFLATE(.zip.gzip)算法有着差不多的压缩比 ...

  4. JavaScript对象之document对象

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

  5. JS键盘事件对象之keyCode、charCode、which属性对比

    先说一些有关键盘事件的事项:用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这 ...

  6. jQuery Ajax封装(附带加载提示和请求结果提示模版)

    1.创建HTML文件(demo) <!doctype html> <html lang="en"> <head> <meta charse ...

  7. @JsonIgnoreProperties忽略转换到json的属性

    bean转换到json忽略指定属性 @JsonIgnoreProperties(value={"attrName"})

  8. Mac QQ 怎么清除聊天记录

    在 Mac 电脑上登录 QQ 以后,点击顶部菜单中“应用”下的“消息管理器”选项,如图所示

  9. Spring事务管理注意小事项

    在service类前加上@Transactional,声明这个service所有方法需要事务管理.每一个业务方法开始时都会打开一个事务. Spring默认情况下会对运行期例外(RunTimeExcep ...

  10. SQL手动注入解析

    作者:震灵 注入环境:DVWA 探测步骤: 1.首先探测是否可以注入以及注入方式 原SQL语句为 SELECT * FROM xxx WHERE a=''; 注入后为 SELECT * FROM xx ...