javascript中的模块系统
简介
在很久以前,js只是简单的作为浏览器的交互操作而存在,一般都是非常短小的脚本,所以都是独立存在的。
但是随着现代浏览器的发展,特别是nodejs的出现,js可以做的事情变得越来越多也越来越复杂。于是我们就需要模块系统来组织不同用途的脚本,进行逻辑的区分和引用。
今天将会给大家介绍一下js中的模块系统。
CommonJS和Nodejs
CommonJS是由Mozilla公司在2009年1月份提出来了。没错,就是那个firfox的公司。
最初的名字叫做ServerJS,在2009年8月的时候为了表示这个标准的通用性,改名为CommonJS。
CommonJS最主要的应用就是服务端的nodejs了。浏览器端是不直接支持CommonJS的,如果要在浏览器端使用,则需要进行转换。
CommonJS使用require()来引入模块,使用module.exports来导出模块。
我们看一个CommonJS的例子:
require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;
注意,CommonJS是同步加载的。
AMD异步模块加载
AMD的全称是Asynchronous Module Definition 。它提供了一个异步加载模块的模式。
AMD是RequireJS在推广过程中对模块定义的规范化产出。
异步加载的好处就是可以在需要使用模块的时候再进行加载,从而减少了一次性全部加载的时间,尤其是在浏览器端,可以提升用户的体验。
看下AMD加载模块的定义:
define(id?, dependencies?, factory);
AMD是通过define来定义和加载依赖模块的。
其中id表示要定义的模块的名字,dependencies表示这个模块的依赖模块,factory是一个函数,用来初始化模块或者对象。
我们看一个例子:
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
exports.verb = function() {
return beta.verb();
//Or:
return require("beta").verb();
}
});
这个例子中,我们定义了一个alpha模块,这个模块需要依赖"require", "exports", "beta"三个模块。
并且在factory中导出了beta模块的verb方法。
define中id和dependencies都不是必须的:
//无id
define(["alpha"], function (alpha) {
return {
verb: function(){
return alpha.verb() + 2;
}
};
});
//无依赖
define({
add: function(x, y){
return x + y;
}
});
甚至我们可以在AMD中使用CommonJS:
define(function (require, exports, module) {
var a = require('a'),
b = require('b');
exports.action = function () {};
});
定义完之后,AMD使用require来加载模块:
require([dependencies], function(){});
第一个参数是依赖模块,第二个参数是回调函数,会在前面的依赖模块都加载完毕之后进行调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。
require(["module", "../file"], function(module, file) { /* ... */ });
require加载模块是异步加载的,但是后面的回调函数只会在所有的模块都加载完毕之后才运行。
CMD
CMD是SeaJS在推广过程中对模块定义的规范化产出。它的全称是Common Module Definition。
CMD也是使用define来定义模块的,CMD推崇一个文件作为一个模块:
define(id?, deps?, factory)
看起来和AMD的define很类似,都有id,依赖模块和factory。
这里的factory是一个函数,带有三个参数,function(require, exports, module)
我们可以在factory中通过require来加载需要使用的模块,通过exports来导出对外暴露的模块,module表示的是当前模块。
我们看一个例子:
// 定义模块 myModule.js
define(function(require, exports, module) {
var $ = require('jquery.js')
$('div').addClass('active');
});
// 加载模块
seajs.use(['myModule.js'], function(my){
});
所以总结下AMD和CMD的区别就是,AMD前置要加载的依赖模块,在定义模块的时候就要声明其依赖的模块。
而CMD加载完某个依赖模块后并不执行,只是下载而已,只有在用到的时候才使用require进行执行。
ES modules和现代浏览器
ES6和现代浏览器对模块化的支持是通过import和export来实现的。
首先看下import和export在浏览器中支持的情况:
首先我们看下怎么使用export导出要暴露的变量或者方法:
export const name = 'square';
export function draw(ctx, length, x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, length, length);
return {
length: length,
x: x,
y: y,
color: color
};
}
基本上,我们可以使用export导出var, let, const变量或者function甚至class。前提是这些变量或者函数处于top-level。
更简单的办法就是将所有要export的放在一行表示:
export { name, draw, reportArea, reportPerimeter };
export实际上有两种方式,named和default。上面的例子中的export是named格式,因为都有自己的名字。
下面看下怎么使用export导出默认的值:
// export feature declared earlier as default
export { myFunction as default };
// export individual features as default
export default function () { ... }
export default class { .. }
named可以导出多个对象,而default只可以导出一个对象。
导出之后,我们就可以使用import来导入了:
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
如果导出的时候选择的是default,那么我们在import的时候可以使用任何名字:
// file test.js
let k; export default k = 12;
// some other file
import m from './test'; // 因为导出的是default,所以这里我们可以使用import m来引入
console.log(m); // will log 12
我们可以在一个module中使用import和export从不同的模块中导入,然后在同一个模块中导出,这样第三方程序只需要导入这一个模块即可。
export { default as function1,
function2 } from 'bar.js';
上面的export from 等价于:
import { default as function1,
function2 } from 'bar.js';
export { function1, function2 };
上面的例子中,我们需要分别import function1 function2才能够使用,实际上,我们可以使用下面的方式将所有的import作为Module对象的属性:
import * as Module from './modules/module.js';
Module.function1()
Module.function2()
然后function1,function2就变成了Module的属性,直接使用即可。
在HTML中使用module和要注意的问题
怎么在HTML中引入module呢?我们有两种方式,第一种是使用src选项:
<script type="module" src="main.js"></script>
第二种直接把module的内容放到script标签中。
<script type="module">
/* JavaScript module code here */
</script>
注意,两种script标签的类型都是module。
在使用script来加载module的时候,默认就是defer的,所以不需要显示加上defer属性。
如果你在测试的时候使用file:// 来加载本地文件的话,因为JS模块安全性的要求,很有可能得到一个CORS错误。
最后,import() 还可以作为函数使用,来动态加载模块:
squareBtn.addEventListener('click', () => {
import('./modules/square.js').then((Module) => {
let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
square1.draw();
square1.reportArea();
square1.reportPerimeter();
})
});
本文作者:flydean程序那些事
本文链接:http://www.flydean.com/js-modules/
本文来源:flydean的博客
欢迎关注我的公众号:「程序那些事」最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的小技巧等你来发现!
javascript中的模块系统的更多相关文章
- Nodejs中的模块系统
一.模块化的定义 ①具有文件作用域 ②具有通信规则:加载和导出规则 二.CommonJS模块规范 1.nodejs中的模块系统,具有文件作用域,也具有通信规则,使用require方法加载模块,使用ex ...
- Node中的模块系统
加载require var 自定义变量名称 = require('模块') 两个作用: 执行被加载模块的代码 得到被加载模块中的exports导出接口对象 导出exports node中是模块作用域, ...
- 第九章:Javascript类和模块
(过年了,祝大家新年好!) 第6章详细介绍了javascript对象,每个javascript对象都是一个属性集合,相互之间没有任何联系.在javascript中也可以定义对象的类,让每个对象都共享某 ...
- 实现javascript下的模块组织
前面的话 java有类文件.Python有import关键词.Ruby有require关键词.C#有using关键词.PHP有include和require.CSS有@import关键词,但是对ES5 ...
- 深入ES6 模块系统
深入ES6 模块系统 本文转载自:众成翻译 译者:neck 链接:http://www.zcfy.cc/article/4436 原文:https://ponyfoo.com/articles/es6 ...
- 彻底搞清楚javascript中的require、import和export(js模块加载规范的前世今生)
为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Javascript不是一种模块化编程语言,在es6以前,它是不支持”类”(class),所以也 ...
- JavaScript中模块“写法”
在JavaScript模块到底是什么 event = function() { // do more return { bind: function() {}, unbind: function() ...
- 如何设计一个高内聚低耦合的模块——MegEngine 中自定义 Op 系统的实践经验
作者:褚超群 | 旷视科技 MegEngine 架构师 背景介绍 在算法研究的过程中,算法同学们可能经常会尝试定义各种新的神经网络层(neural network layer),比如 Layer No ...
- JavaScript中为什么使用立即执行函数来封装模块?
最近在学习JavaScript基础,在学习到面向对象编程时,学习到在JavaScript中实现模块化的方法,其中一个重要的点是如何封装私有变量. 实现封装私有变量的方法主要是: 使用构造函数 func ...
随机推荐
- Codeforces Round #683 (Div. 2, by Meet IT)【ABCD】
比赛链接:https://codeforces.com/contest/1447 A. Add Candies 题意 \(1\) 到 \(n\) 个袋子里依次有 \(1\) 到 \(n\) 个糖果,可 ...
- zoj3777 Problem Arrangement(状压dp,思路赞)
The 11th Zhejiang Provincial Collegiate Programming Contest is coming! As a problem setter, Edward i ...
- 2019 Multi-University Training Contest 5——permutation 2
传送门 题意: t组输入,之后每组例子有三个数n.x.y代表在一个以x为开头y为结尾的长为n的数组里面,开头和结尾数据已经固定,让你从1--n中找其他数据填入数组中 (每个数据不能重复使用),使它满足 ...
- LianLianKan HDU - 4272 状压dp
题意:长度为n(n<=1000)的栈,栈顶元素可以与下面1~5个数中相同的元素消去,问最后能都完全消去. 题解: 比如这个序列12345678910112这个位置的最远可匹配位置能到11为什么呢 ...
- 记一次亲身体验的勒索病毒事件 StopV2勒索病毒
昨天给笔记本装了 windows server 2016 操作系统,配置的差不多之后,想使用注册机激活系统.使用了几个本地以前下载的注册机激活失败后,尝试上网搜索. 于是找到下面这个网站(这个网站下载 ...
- 大数据去重(data deduplication)方案
数据去重(data deduplication)是大数据领域司空见惯的问题了.除了统计UV等传统用法之外,去重的意义更在于消除不可靠数据源产生的脏数据--即重复上报数据或重复投递数据的影响,使计算产生 ...
- 国产网络损伤仪SandStorm -- 为什么数据流还是走Bypass链路?
如果你在使用网络损伤仪SandStorm测试移动互联网的应用程序或者在仿真所谓"弱网测试"的时候,发现所有的数据流还是在走Bypass链路,并没有预期地走自己创建的仿真链路,那么你 ...
- [Golang]-8 工作池、速率限制、原子计数器、互斥锁
目录 工作池 速率限制 原子计数器 互斥锁 工作池 在这个例子中,我们将看到如何使用 Go 协程和通道实现一个工作池 . func worker(id int, jobs <-chan int, ...
- codeforces 14D(搜索+求树的直径模板)
D. Two Paths time limit per test 2 seconds memory limit per test 64 megabytes input standard input o ...
- 高并发之Semaphore、Exchanger、LockSupport
本系列研究总结高并发下的几种同步锁的使用以及之间的区别,分别是:ReentrantLock.CountDownLatch.CyclicBarrier.Phaser.ReadWriteLock.Stam ...