js的模块化规范常见的有:AMD,CMD,commonJS,UMD,es6

前期在没有模块化的时候,js文件十分庞大,于是就按功能抽离划分为多个js文件。

但是在html页面通过script的方式加载大量js文件会出项许多问题,例如文件之间的相互依赖问题,浏览器的阻塞问题,接着就有了模块化规范。

对于前端拥有AMD,CMD,UMD,ES6的import/export

1)AMD

AMD是requireJS倡导的一种模块化规范,推崇依赖前置;在requireJS中模块是通过define来进行定义的,如果模块之间相互依赖,需要先将依赖模块导入进来,待导入完毕之后,在通过回掉函数的方式执行后面的代码,有效的解决了模块依赖的问题。

// CModuleJS

define(['AModuleJs','BModuleJS'], // AModuleJs,BModuleJS分别对应两个js文件(模块),运行至此已经下载完成,可直接使用
function (AModuleJs, BModuleJS) {
var a = AModuleJs();
var b = BModuleJS;
var c = a + b;
})
}

 参考链接:http://www.cnblogs.com/evaling/p/6722760.html

2)CMD

CMD则是seaJS倡导的一种解决模块之间相互依赖规范,推崇依赖就近;在seaJS中一个脚本文件就是一个模块,所有的模块代码写在define的回调函数中,传递三个参数require,exports,module,通过使用 module.exports(exports) 对象向外暴露。

require 函数加载模块的时候,会自动拿到模块内部的 module.exports 对象

// main.js

define(function (require, exports, module) {
var moduleA = require('add.js') // //等待add.js下载、执行完
console.log(moduleA.add(10,20))
})

// add.js

define(function (require, exports, module) {
function add(a, b){
return a+b;
}
module.exports.add = add;
})

参考链接:https://www.cnblogs.com/jingh/p/6024873.html

比较两者的异同?
相同:都是js模块化的异步加载方式
不同:可以看出AMD规范是在所有以来文件加载完毕之后才执行回调函数,cmd是按需加载,代码执行到了就加载

优缺分析:
AMD:
缺点:
a)前期模块初始化的时间相对较长(需要加载所有依赖的文件)
b)如果某一个依赖文件出错,会导致整个代码无法执行,资源浪费(双刃剑)
c)有时候加载的依赖项由于代码变更可能会没被用到(else,case分支),但是忘记修改,会造成资源浪费
优点:
a)提前加载依赖文件可以提前发现错误,解决问题(双刃剑)  

CMD:
优点:
a)延迟按需加载,代码执行到了就加载,可节省资源(用不到的就不加载)
缺点:
a)不能提前暴露错误,降低开发效率

3)commonJS

commonJS服务器端(nodeJS)的js模块规范,同步加载方式。因为nodeJS会被部署在服务端不存在js模块下载阻塞的问题,但是浏览器则是本地客户机存在下载js文件阻塞的问题。

4)UMD

更像是一种语法糖首先判断程序环境是否是nodeJS环境如果是就使用commonJS规范,在判断是否支持AMD,如果是就使用AMD规范,否则就全局注册。

function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.Vue = factory());
}

5)ES6模块化规范 

使用import/export语法,在文件顶部导入需要的模块,特点是:静态化,在编译时候(决定import 不能放在执行代码中)确定模块之间的以来关系,以及输入输出变量。

commonJS,AMD,CMD都是在执行阶段导入模块,确定依赖关系。

参考链接:https://segmentfault.com/a/1190000015991869

 

js的模块化规范的更多相关文章

  1. [JavaScript] 后端js的模块化规范CommonJs

    CommonJs概述 主要是单个文件定义的变量,函数,类都是私有的,其他文件不可见,单位的作用域 通过 exports(modules.exports)对外暴露接口,通过 require 加载模块 n ...

  2. JS 模块化 - 02 Common JS 模块化规范

    1 Common JS 介绍 Common JS 是模块化规范之一.每个文件都是一个作用域,文件里面定义的变量/函数都是私有的,对其他模块不可见.Common JS 规范在 Node 端和浏览器端有不 ...

  3. JS模块化规范CommonJS,AMD,CMD

    模块化是软件系统的属性,这个系统被分解为一组高内聚,低耦合的模块.理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可.一个模块化系统所必须的 ...

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

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

  5. Node.js实战项目学习系列(3) CommonJS 模块化规范

    前言 想开始编写Node.js代码,那么我们就必须先熟悉它的模块化规范CommonJS,本文将详细讲解CommonJS规范 本文代码 >>> github 地址 CommonJS N ...

  6. js模块化规范—概念和模块化进化史以及模块化的问题

    模块的概念 一个复杂的项目开发中,会写很多js文件,一个js文件执行某些特定的功能,那么每个js都可以称为一个模块,这就是模块的概念 每个js模块内部数据/实现是私有的, 只是向外部暴露一些接口(方法 ...

  7. JS模块化规范CMD之SeaJS

    1. 在接触规范之前,我们用模块化来封装代码大多为如下: ;(function (形参模块名, 依赖项, 依赖项) { // 通过 形参模块名 修改模块 window.模块名 = 形参模块名 })(w ...

  8. 一文彻底搞懂JS前端5大模块化规范及其区别

    码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14577243.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...

  9. Javascript模块化规范

    Javascript模块化规范 一.前端js模块化由来与演变 CommonJS 原来叫 ServerJS,推出 Modules/1.0 规范后,在 Node.js 等环境下取得了很不错的实践.09年下 ...

随机推荐

  1. python学习笔记(七)---编辑器pycharm的安装

    百度经验网址: https://jingyan.baidu.com/article/0f5fb0993624176d8234ea6c.html 其中 添加 “0.0.0.0 account.jetbr ...

  2. Oracle 备份与恢复 15 个典型问题

    1.问:Oracle11g数据库数据量有50T,每天增量50g左右,该如何制定备份方案,如何验证备份的有效性? 答:50T的数据也不大,运营商的地市级市数据基本都在100T以上了,只要备份环境允许的话 ...

  3. DevExpress v17.2新版亮点——Data Access

    用户界面套包DevExpress v17.2日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了Data Access v17.2 的新功能,快来下载试用新版本! 新的API可在 ...

  4. React Native笔记整理

    判断一个APP页面时原生还是H5:http://www.cnblogs.com/sonice-cinsy/p/5671324.html 写给移动开发者的React Native指南:http://bl ...

  5. Ubuntu:搜狗输入法不能输入中文

    搜狗输入法不能输入中文 问题描述 可以打开搜狗输入法,可以打英文,但是不能切换成中文. 其他输入法正常使用(这个可以判断是不是fcitx是不是出现错误). 有一个关于sogou的内部错误提示 解决方法 ...

  6. 不使用ref

    为什么 尽量避免ref? 使用ref原因:react功能来访问DOM元素,这种功能的需求往往来自于提交表单的操作,再提交表单的时候,需要读取当前表单中input元素的值 而react的产生就是为了避免 ...

  7. Ubuntu终端点击确定按钮的方法

    Ubuntu终端里出现需要点击 确定 按钮的时候,直接鼠标点击 确定 是不生效的,这个时候需要利用tab键选中这个 确定 按钮,然后回车键就可以了.

  8. 学习magento要学哪些知识

    php框架水平,具体点的就是大名鼎鼎的ZF框架.别急,先还是熟悉下OSC吧,主要是热身下商城的那些业务流的知识,基本的数据流程.自己做模板的话CSS2.0水平还不能太低.JS框架JQ吧相对简单点.当然 ...

  9. PS如何批量处理图片

    喜爱摄影的朋友可能都有这样的体会,相机里面存了大量的图片,一般都是2048×1536或者更大像素的照片,每张都有1M以上,如果设置的清晰度高,则照片就更大,这样的图片是无法上传到博客中的(博客要求每张 ...

  10. .NET 除了用 Task 之外,如何自己写一个可以 await 的对象?

    .NET 中的 async / await 写异步代码用起来真的很爽,就像写同步一样.我们可以在各种各样的异步代码中看到 Task 返回值,这样大家便可以使用 await 等待这个方法.不过,有时需要 ...