JS JavaScript模块化(ES Module/CommonJS/AMD/CMD)
前言
前端开发中,起初只要在script
标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,
jQuery,Ajax,Node.Js,MVC,MVVM
等的助力也使得前端开发得到重视,也使得前端项目越来越复杂,
然而,JavaScript
却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,那么什么是模块呢?
一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。
一、AMD 规范
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
模块将被异步加载,模块加载不影响后面语句的运行。
所有依赖某些模块的语句均放置在回调函数中。
用法:
- 定义模块:define(id?, dependencies?, factory)
- 加载模块:require([module], factory)
// a.js // 依赖有三个默认的,即"require", "exports", "module"。顺序个数均可视情况 // 如果忽略则factory默认此三个传入参数 // id一般是不传的,默认是文件名 define(["b", "require", "exports"], function(b, require, exports) {console.log("a.js执行");console.log(b); // 暴露api可以使用exports、module.exports、returnexports.a = function() {return require("b");} }) // b.js define(function() {console.log('b.js执行');console.log(require);console.log(exports);console.log(module);return 'b'; }) // index.js // 支持Modules/Wrappings写法,注意dependencies得是空的,且factory参数不可空 define(function(require, exports, module) {console.log('index.js执行');var a = require('a');var b = require('b'); }) // index.js require(['a', 'b'], function(a, b) {console.log('index.js执行'); })
二、CMD 规范
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
在 CMD 规范中,一个模块就是一个文件。
用法:
- 定义模块:define(factory)
/ require, exports, module参数顺序不可乱 // 暴露api方法可以使用exports、module.exports、return // 与requirejs不同的是,若是未暴露,则返回{},requirejs返回undefined define(function(require, exports, module) {console.log('a.js执行');console.log(require);console.log(exports);console.log(module); }) // b.js // define(function(require, module, exports) {console.log('b.js执行');console.log(require);console.log(exports);console.log(module); }) // index.js define(function(require) {var a = require('a');var b = require('b');console.log(a);console.log(b); })
三、CommonJs 规范
CommonJs 是服务器端模块的规范。
Node.js 采用了这个规范。Node.JS首先采用了js模块化的概念。
根据 CommonJs 规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为 global 对象的属性。
用法:
- 输出模块:module.exports
- 加载模块:require
// 导出使用module.exports,也可以exports。exports指向module.exports;即exports = module.exports // 就是在此对象上挂属性 // commonjs module.exports.add = function add(params) {return ++params; } exports.sub = function sub(params) {return --params; }// 加载模块使用require('xxx')。相对、绝对路径均可。默认引用js,可以不写.js后缀 // index.js var common = require('./commonjs'); console.log(common.sub(1)); console.log(common.add(1));
四、ES Module
ES6 在语言标准的层面上,实现了模块功能,成为浏览器和服务器通用的模块解决方案,完全可以取代 CommonJS 和 AMD 规范。
基本特点:
- 每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取;
- 每一个模块内声明的变量都是局部变量, 不会污染全局作用域;
- 模块内部的变量或者函数可以通过export导出;
- 一个模块可以导入别的模块
用法:
- 输出模块:export
- 加载模块:import
// module export function fn1(){return "这是 fn1"; }export function fn2(){return "这是 fn2" ; }// main.js //逐一加载 import { fn1, fn2 } from './module';console.log( fn1()); console.log( fn2());//整体加载 import * as all from './module';console.log( all.fn1() ); console.log( all.fn2() );
动态加载模块:
// 普通写法 import('./module').then(({ a }) => {}) // async、await const { a } = await import('./module');
五、各模块之间的区别
1、CommonJS 与 AMD/CMD 的差异
- CommonJS:是同步加载(代码在本地,加载时间基本等于硬盘读取时间)。
- AMD / CMD:是异步加载
2、AMD 与 CMD 的差异
- AMD是提前执行,CMD是延迟执行
- AMD推荐依赖前置,CMD推荐依赖就近
3、CommonJS 与 ES Module 的差异
- CommonJS 模块是对象,是运行时加载,运行时才把模块挂载在 exports 之上(加载整个模块的所有),加载模块其实就是查找对象属性
- ES Module 不是对象,是使用 export 显示指定输出,再通过 import 输入,此法为编译时加载
- CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
- CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
3、各模块用法上的区别
详见各模块介绍...
随笔整理自
https://www.jianshu.com/p/da2ac9ad2960
感谢博主分享!
转载于:https://www.cnblogs.com/gaosirs/p/10772675.html
JS JavaScript模块化(ES Module/CommonJS/AMD/CMD)相关推荐
- 关于JavaScript的模块(CommonJS, AMD, CMD, ES6模块)的理解
Javascript模块化就是解决将代码进行分隔,作用域隔离,模块之间的依赖管理等多个方面问题. 这样的优点不言而喻:1.可维护性2.命名空间私有化,可以避免污染全局环境3.代码重用,通过模块可以方便 ...
- commonjs是什么_JavaScript模块化标准CommonJS/AMD/CMD/UMD/ES6Module的区别
JS-模块化进程 随着js技术的不断发展,途中会遇到各种问题,比如模块化. 那什么是模块化呢,他们的目的是什么? 定义:如何把一段代码封装成一个有用的单元,以及如何注册此模块的能力.输出的值依赖引用: ...
- CommonJS,AMD,CMD,ES6,require 和 import 详解
CommonJS,AMD,CMD,ES6 commonJS用同步的方式加载模块.在服务端,模块文件都存在本地磁盘,读取非常快,所以这样做不会有问题.但是在浏览器端,限于网络原因,更合理的方案是使用异步 ...
- Javascript模块化编程系列二: 模块化的标准化(CommonJS AMD)
前言 Javascript模块化编程系列一: 模块化的驱动 在前一篇介绍了为什么要进行Javascript模块化编程.至于如何实现模块化,不同的开发组织和个人具体的实现方式肯定是不一样.如何统一一个规 ...
- 模块化:ES Module与commonJS
模块化以及模块化开发: 模块化开发的目的是将程序划分成一个个小的结构,这个结构有属于自己的代码逻辑,有自己的作用域,不会影响到其他的结构,这个结构希望暴露的变量,函数,对象给其他结构使用,也可以通过某 ...
- 前端模块化- ES Module 和 CommonJS 的使用
ES Module 导入 导入的值不能重新赋值,类似于使用 const 声明过一样. 命名导入 导入特定项 import { something } from './module.js'; 导入特定项 ...
- 模块格式:CommonJS AMD CMD UMD ES6
皆为前端工程化中定义模块(module)的规则,如:模块标识,模块依赖,模块实现,模块对外接口,模块加载: 实现时有:异步,同步,依赖前置,依赖就近,预执行,懒执行,软依赖,硬依赖,模块对象支持类型等 ...
- CommonJS/AMD/CMD/UMD
为什么会有这几种模式? 起源:Javascript模块化 模块化就是把复杂问题分解成不同模块,这样可维护性高,从而达到高复用,低耦合. 1.Commonjs CommonJS是服务器端模块的规范,No ...
- 关于 CommonJS AMD CMD UMD 规范的差异总结
根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的. // foo.js var ...
最新文章
- 详解何恺明团队4篇大作 !(附代码)| 从特征金字塔网络、Mask R-CNN到学习分割一切
- Linux ibm mq 教程,IBM MQ 使用指南
- 【控制】《鲁棒控制-线性矩阵不等式处理方法》-俞立老师-第8章-鲁棒方差控制
- Spring Boot @ConfigurationProperties注解的使用
- 汇编语言中常见的标志位: CF, PF, AF, ZF, SF,TF,IF,DF, OF
- 【渝粤教育】 国家开放大学2020年春季 1080工程数学(本) 参考试题
- loadrunner接口性能测试分享
- Bootstrap响应式内嵌元素
- SSO的几种跨域方案
- u盘怎样修复服务器系统,高手教你怎么修复U盘的MBR
- 个人带领团队做过的事
- 反汇编工具OD(OllyDebug)
- 深入解析淘宝Diamond之客户端架构
- 【跨境电商】如何创建吸引人的免费送货电子邮件营销
- Linux系统安全工具之:Sxid和Skey
- java透视图_Eclipse透视图
- 利用excel与Pandas完成实现数据透视表(文末赠书)
- zblog采集-织梦全自动采集插件-织梦免费采集插件
- 新浪云php与微信,新浪SAE php能够获取微信的头像,但是在本地运行代码获取不到?...
- 实现 RSA 算法之改进和优化(第三章)(老物)