一览js模块化:从CommonJS到ES6
本文由云+社区发表
模块化是指把一个复杂的系统分解到一个一个的模块。
模块化开发的优点:
(1)代码复用,让我们更方便地进行代码管理、同时也便于后面代码的修改和维护。
(2)一个单独的文件就是一个模块,是一个单独的作用域,只向外暴露特定的变量和函数。这样可以避免污染全局变量,减少变量命名冲突。
js模块化规范有:CommonJS、AMD、CMD、ES6的模块系统。本文将依次介绍下每个规范。
0.早期:用script来引入js模块
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
缺点:
(1)加载的时候会停止渲染网页,引入的js文件越多,网页失去响应的时间越长;
(2)会污染全局变量;
(3)js文件之间存在依赖关系,加载是有顺序的,依赖性最大的要放到最后去加载;当项目规模较大时,依赖关系变得错综复杂。
(4)要引入的js文件太多,不美观,代码难以管理。
1.CommonJS 规范
是服务器端模块的规范,由nodejs推广使用。该规范的核心思想是:允许模块通过require方法来同步加载所要依赖的其他模块,然后通过 exports 或module.exports 来导出需要暴露的接口。
CommonJS 还可以细分为 CommonJS1 和 CommonJS2,区别在于 CommonJS1 只能通过 exports.xx = xx 的方式导出,CommonJS2 在 CommonJS1 的基础上加入了module.exports = xx 的导出方式。 CommonJS 通常指 CommonJS2。
采用CommonJS 规范导入导出:
// 导出
module.exports = moduleA.someFunc;
// 导入
const moduleA = require('./moduleA');
实例:
//math.js
var num = 0;
function add(a, b) {
return a + b;
}
module.exports = {
//需要向外暴露的变量、函数
num: num,
add: add
}
可以这样加载:
//引入自定义的模块时,参数包含路径,可省略.js
//引入核心模块时,不需要带路径,如var http = require("http");
var math = require('./math');
math.add(1, 2)//3
实际上,从上面的例子就可以看出,math.add(1,2)必须要等待math.js加载完成,即require是同步的。
在服务器端,模块文件保存在本地磁盘,等待时间就是磁盘的读取时间。但对于浏览器而言,由于模块都放在服务器端,等待时间取决于网上的快慢。因此更合理的方案是异步加载模块。
缺点:
(1)不能并行加载模块,会阻塞浏览器加载;
(2)代码无法直接运行在浏览器环境下,必须通过工具转换成标准的 ES5;
2.AMD和require.js
AMD:异步模块定义。上面已经介绍过,CommonJS是服务器端模块的规范,主要是为了JS在后端的表现制定的,不太适合前端。而AMD就是要为前端JS的表现制定规范。由于不是JavaScript原生支持,使用AMD规范进行页面开发需要用到对应的库函数,也就是require.js(还有个js库:curl.js)。实际上AMD 是 require.js在推广过程中对模块定义的规范化的产出。
AMD采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
require.js也采用require()语句加载模块,但是不同于CommonJS:
// 定义一个模块
define('module', ['dep'], function (dep) {
return exports;
});
// 导入和使用
require(['module'], function (module) {
});
上面示例中的代码改写成AMD形式:
math.js定义一个模块:
define('math', ['jquery'], function (jquery) {//引入jQuery模块
return {
add: function (x, y) {
return x + y;
}
};
});
导入和使用:
require(['math'], function (math) {
math.add(1, 2)
})
math.add()与加载math模块不是同步的,不会阻塞浏览器的加载。
3.CMD和sea.js
CMD:通用模块定义。
国内的玉伯大佬写了sea.js,实际上CMD就是 sea.js在推广过程中对模块定义的规范化的产出。
define(function (require, exports, module) {
// 模块代码
});
说明:
require:可以把其他模块导入进来的一个参数;
exports:可以把模块内的一些属性和方法导出的;
module: 是一个对象,上面存储了与当前模块相关联的一些属性和方法。
上面示例中的代码改写成AMD形式:
define(function (require, exports, module) {
var add = function (a, b) {
return a + b;
}
exports.add = add;
})
//导入和使用
seajs.use(['math.js'], function (math) {
var sum = math.add(1, 2);
});
CMD与AMD的不同的在于:
(1)AMD推崇依赖前置;CMD推崇依赖就近,只有在用到某个模块的时候再去require:
//AMD推崇的依赖关系前置:在定义模块时就要声明要依赖的模块
define(['a', 'b', 'c', 'd'], function (a, b, c, d) { // 依赖必须一开始就写好
a.doSomething()
// 此处省略100行
...
b.doSomething()
...
})
//CMD推崇依赖就近,按需加载,只有在用到某个模块时再去require
define(function (require, exports, modules) {
var a = require('a');
a.doSomething();
// 此处省略100行
...
var b = require("b");//按需加载
b.doSomething();
...
})
(2)AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。
对于依赖的模块,AMD是提前执行,CMD是延迟执行。
具体细节可点击参考
4.ES6模块化
ES6在语言的层面上实现了模块化。浏览器厂商和 Node.js 都宣布要原生支持该规范。它将逐渐取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。
在 ES6 中,使用export关键字来导出模块,使用import关键字引用模块。但是浏览器还没有完全兼容,需要使用babel转换成ES5。
// 导出
export function hello() { };
export default {
// ...
};
// 导入
import { readFile } from 'fs';
import React from 'react';
使用import导入模块时,需要知道要加载的变量名或函数名。
在ES6中还提供了export default,为模块指定默认输出.对应导入模块import时,不需要使用大括号。
上面示例中的代码改写成ES6形式:
//math.js
var num = 0;
var add = function (a, b) {
return a + b;
};
export { num, add };
//导入
import { num, add } from './math';
function test(ele) {
ele.textContent = add(1 + num);
}
缺点
浏览器还没有完全兼容,必须通过工具转换成标准的 ES5 后才能正常运行。
5.小结
本文从script引入js文件讲起,到服务器端模块的规范CommonJs,再到推崇依赖前置的浏览器端模块的规范AMD、推崇依赖就近的浏览器端模块的规范CMD,最后介绍了ES6的模块化。每个介绍中都有各规范基本的用法和一个示例。如有问题,欢迎指正。
此文已由作者授权腾讯云+社区发布
一览js模块化:从CommonJS到ES6的更多相关文章
- JS模块化规范CommonJS,AMD,CMD
模块化是软件系统的属性,这个系统被分解为一组高内聚,低耦合的模块.理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可.一个模块化系统所必须的 ...
- JS模块化:CommonJS和AMD(Require.js)
早期的JS中,是没有模块化的概念的,这一情况直到09年的Node.js横空出世时有了好转,Node.js将JS作为服务端的编程语言,使得JS不得不寻求模块化的解决方案. 模块化概念 在JS中的模块是针 ...
- js模块化规范—commonjs
commonjs规范说明 每个js文件都可当作一个模块 在服务器端: 模块的加载是运行时同步加载的(不会阻塞,等待时间回比较长).在浏览器端: 模块需要提前编译打包处理 commonjs规范基本语法 ...
- js模块化编程之CommonJS和AMD/CMD
js模块化编程commonjs.AMD/CMD与ES6模块规范 一.CommonJS commonjs的require是运行时同步加载,es6的import是静态分析,是在编译时而不是在代码运行时.C ...
- webpack学习2.1 模块化开发(JS模块化&CSS模块化)
一.JS模块化 命名空间,COMMONJS,AMD/CMD/UMD,ES6 module 1.什么是命名空间 库名.类别名.方法名 弊端:在命名空间重复生命,要记住完整的路径名(而且很长) var N ...
- 再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6
Javascript模块化编程,已经成为一个迫切的需求.理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. Javascript社区做了很多努力,在现有的运行环境中,实现” ...
- js 模块化的一些理解和es6模块化学习
模块化 1 IIFE 2 commonjs 3 浏览器中js的模块化 4 简单理解模块加载器的原理 5 es6 之前在参加百度前端技术学院做的小题目的时候,自己写模块的时候 都是写成立即调用表达式( ...
- 深度扫盲JavaScript的模块化(AMD , CMD , CommonJs 和 ES6)
原文地址 https://blog.csdn.net/haochangdi123/article/details/80408874 一.commonJS 1.内存情况 对于基本数据类型,属于复制.即会 ...
- js模块化AMD、CMD、ES6
AMD CMD ES6模块化 各个模块化规范对比理解 一.AMD 在上一篇js模块化入门与commonjs解析与应用中详细的解析了关于commonjs模块化规范,commonjs采用的用同步加载方式, ...
随机推荐
- oracle BLOG图片和CLOG base64码的转换
--BASE64转图片CREATE OR REPLACE FUNCTION DECODE_BASE64(P_CLOB_IN IN CLOB) RETURN BLOB IS V_BLOB BLOB; V ...
- 强联通分量-tarjan算法
定义:在一张有向图中,两个点可以相互到达,则称这两个点强连通:一张有向图上任意两个点可以相互到达,则称这张图为强连通图:非强连通图有极大的强连通子图,成为强联通分量. 如图,{1},{6}分别是一个强 ...
- MySQL PROFILE 跟踪语句各阶段性能开销
PROFILE 可以跟踪查询语句各个阶段 Time,IO,CPU,MEMORY 等资源使用情况,比较详细.所以系统一般不会记录太多.启用是全局的,所以每个连接都保持语句的资源使用情况. 查看 PRO ...
- python_redis简介与安装和使用
一.简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted ...
- hadoop2.7集群安装
1. 按照官方文档对单节点的配置,将etc/hadoop/core-site.xml中的localhost改成node13. http://hadoop.apache.org/docs/r2.7.3/ ...
- MyBatis逆向工程自动生成代码
MyBatis逆向工程根据数据库表自动生成mapper.xml,entity类,mapper类,简直不要 太方便好嘛 下面贴上关键配置代码,以免以后找不到 generator.xml <?xml ...
- 《HTTP权威指南》4-连接管理
TCP连接 TCP/IP是全球计算机及网络设备都在使用的一种常见的分组交换网络分层协议集客户端应用程序可以打开一条TCP/IP连接.连接到可能运行在世界任何地方的服务器应用程序 TCP的可靠数据管道 ...
- JVM垃圾收集器与内存分配策略(一)
在前面的Java自动内存管理机制(上)和Java自动内存管理机制(下)中介绍了关于JVM的一些基础知识,包括运行时数据区域划分和一些简单的参数配置,而其中也谈到了GC,但是没有深入了解,所以这里开始简 ...
- Hadoop Partition函数应用(归档)
一.实例描述 在这个实例里我们使用简单的数据集,里面包含多条数据,每条数据由姓名.年龄.性别和成绩组成.实例要求是按照如下规则归档用户. 1.找出年龄小于20岁中男生和女生的最大分数 2.找出20岁到 ...
- 脑残式网络编程入门(五):每天都在用的Ping命令,它到底是什么?
本文引用了公众号纯洁的微笑作者奎哥的技术文章,感谢原作者的分享. 1.前言 老于网络编程熟手来说,在测试和部署网络通信应用(比如IM聊天.实时音视频等)时,如果发现网络连接超时,第一时间想到的就是 ...