前端模块化,AMD,CMD 面试总结

摘要:
模块化在JS中实现特定功能并组织业务逻辑的模块化可以称为模块化。CMDCMD提倡密切依赖。只有在使用模块时,中国才会制定requireCMD规范。例如,AMD有一个requireJS,CMD有一个浏览器来实现SeaJS,而SeaJS有与requireJS相同的问题需要解决,只是模块定义方法和模块加载时间不同。1.海洋。js提倡一个模块,一个文件,遵循统一的编写方法。2.CMD在加载模块后不会立即执行模块,而是等待直到遇到require语句。

commonJS,CMD/AMD对应类似的实现是 noedJs(webpack)/RequireJs/SeaJs

 AMD/CMD主要针对浏览器端。

模块化
一个模块化实现特定功能,组织JS中的业务逻辑,都可以称为模块化。这种模块化类似于 java中的包 直接引入,即插即用,不会产生变量冲突,就是如此便捷。

commonJS
commonJS运行于服务器端,node.js的模块系统,就是参照CommonJS规范实现的,每个模块都是一个单独的作用域。
模块只有一个出口,module.exports对象,我们需要把模块希望输出的内容放入该对象。

服务器端一般采用同步加载文件,也就是说需要某个模块,服务器端便停下来,等待它加载再执行。而浏览器端要保证效率,需要采用异步加载,这就需要一个预处理,提前将所需要的模块文件并行加载好。

AMD

AMD推崇依赖前置,在定义模块的时候就要声明其依赖的模块 

同样都是异步加载模块,AMD在加载模块完成后就会执行改模块,所有模块都加载执行完后会进入require的回调函数,执行主逻辑,这样的效果就是依赖模块的执行顺序和书写顺序不一定一致,看网络速度,哪个先下载下来,哪个先执行,但是主逻辑一定在所有依赖加载完成后才执行.

requireJS主要解决两个问题

1、多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器 
2、js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长 

require()函数在加载依赖的函数的时候是异步加载的,这样浏览器不会失去响应,它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

CMD

CMD推崇就近依赖,只有在用到某个模块的时候再去require 

CMD规范是国内发展出来的,就像AMD有个requireJS,CMD有个浏览器的实现SeaJS,SeaJS要解决的问题和requireJS一样,只不过在模块定义方式和模块加载(可以说运行、解析)时机上有所不同 

1.Sea.js 推崇一个模块一个文件,遵循统一的写法 

2.CMD加载完某个模块后没有立即执行而是等到遇到require语句的时再执行。

CMD加载完某个依赖模块后并不执行,只是下载而已,在所有依赖模块加载完成后进入主逻辑,遇到require语句的时候才执行对应的模块,这样模块的执行顺序和书写顺序是完全一致的

 

AMD在加载模块完成后就会执行改模块,所有模块都加载执行完后会进入require的回调函数,执行主逻辑,这样的效果就是依赖模块的执行顺序和书写顺序不一定一致,看网络速度,哪个先下载下来,哪个先执行,但是主逻辑一定在所有依赖加载完成后才执行

这也是很多人说AMD用户体验好,因为没有延迟,依赖模块提前执行了,CMD性能好,因为只有用户需要的时候才执行的原因

ES6 模块与 CommonJS 模块的差异

来自阮一峰ES6教程

CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载,ES6 模块是编译时输出接口
ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。换句话说,ES6 的import有点像 Unix 系统的“符号连接”,原始值变了,import加载的值也会跟着变。因此,ES6 模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块

模块化方案总结

 ESMCommonJSAMDCMDUMD
加载机制编译时运行时提前预加载编译时 & 运行时按需加载-
同步/异步异步同步异步异步,有延迟执行的情况-
适用场合浏览器、服务端服务端浏览器浏览器浏览器、服务端
是否常见☆☆☆☆☆☆

ESM 在语言标准的层面上,成为浏览器和服务端通用的模块解决方案。

模块化的好处

  1. 避免命名冲突,每个模块内的变量仅对自己可见,外部获取依赖模块输出
  2. 按需加载
  3. 解耦、复用、高可维护性



免责声明:文章转载自《前端模块化,AMD,CMD 面试总结》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Socket程序从windows移植到linux下需要注意的unity优化一些总结 (长期更新)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

如何在传统前端项目中进行javascript模块化编程,并引入使用vue.js、elementui,并且不依赖nodejs和webpack?

最近接手一个Web三维项目,前后端分离,前端是传统的前端项目,但又是模块化的开发方式,在修改的过程中,我需要做一些增删改查的功能,又想尽可能少的写css、尽可能少的直接操作DOM元素,所以引入了element-ui和vue,但是又不想依赖nodejs和webpack,不想引入相关配置文件,就实现了一个方案: 如何在传统前端项目中进行javascript模块...

javascript 模块化开发(一)

什么是模块化 将一组模块(及其依赖项)以正确的顺序拼接到一个文件(或一组文件)中的过程。 传统的模块化做法。 模块是实现特定功能的一组属性和方法的封装。 将模块写成一个对象,所有的模块成员都放到这个对象里面。 var module1 = new Object({ _count:0, f1:function(){}, f2:function(){...

ES6新特性:使用export和import实现模块化

  在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库,  而像seaJS是基于CMD规范的模块化库,  两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD的区别, 后面参考给了几个链接;    现在ES6自带了模块化, 也是JS第一次支持module, 在很久以后 ,我们可以直接...

Vuex 模块化与项目实例 (2.0)

Vuex 强调使用单一状态树,即在一个项目里只有一个 store,这个 store 集中管理了项目中所有的数据以及对数据的操作行为。但是这样带来的问题是 store 可能会非常臃肿庞大不易维护,所以就需要对状态树进行模块化的拆分。 首先贴出一个逻辑比较复杂的H5项目:DEMO & 源码 该项目主要包括 banner、feeds、profile 三个...

使用阿里ARouter路由实现组件化(模块化)开发流程

Android平台中对页面、服务提供路由功能的中间件,我的目标是 —— 简单且够用。 这是阿里对Arouter的定位,那么我们一起来梳理一下Arouter使用流程,和使用中我所遇到的一些问题! 先来看看有哪些功能 模块化的要解决的问题 模块间页面跳转(路由); 模块间事件通信; 模块间服务调用; 模块的独立运行; 模块间页面跳转路由拦截(登录) 其...

详解JavaScript模块化开发

转自:http://segmentfault.com/a/1190000000733959 什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得前端开发得到重视,也使得前端项目越来越复杂,然而,Ja...