面试题目:
module.exports、exports、export 三者的区别是什么?
答案解析:
模块化进程
想要了解三者的区别,需要了解下他们产生的背景。
以前JS本身没有模块化的概念和相关API,开发者一般都是在html
中引入多个script
标签,业务逻辑复杂时,就会带来很多问题,比如:
全局作用域下容易造成变量冲突
文件只能按照
script
的书写顺序进行加载开发人员必须主观解决模块和代码库的依赖关系
在大型项目中各种资源难以管理,长期积累的问题导致代码库混乱不堪
2009年 Node.js
出现,node
里面的模块系统遵循的是CommonJS
规范
CommonJS定义的模块分为: 模块标识(
module
)、模块定义(exports
) 、模块引用(require
)
CommonJS是主要为了JS在后端的表现制定的,是不适合前端的 ,所以出现了AMD、CMD、UMD等等一系列可以在浏览器等终端实现的异步加载的模块化方案,我们最熟悉的require.js
就是AMD的产物,seajs
是CMD的产物。
exports 和 module.exports
node中一个文件被认为是一个模块,执行时会给文件内生成
exports
和module
两个对象,module
对象内部会创建一个exports属性。两者间的关系可以认为是
exports = module.exports = {};
![内存结构示意图 640?wx_fmt=other](https://i-blog.csdnimg.cn/blog_migrate/b0c6f453a538f0af53d6403d408d44fe.jpeg)
一个node模块,我们可以认为首行定义了exports
和module.exports
两个对象:
// module1.js
let a = 2;
let add = function () {
a++;
}
console.log(module.exports); //能打印出结果为:{}
console.log(exports); //能打印出结果为:{}
// module1.js 可改写为如下代码
var exports = module.exports = {};
let a = 2;
let add = function () {
a++;
}
console.log(module.exports); //能打印出结果为:{}
console.log(exports); //能打印出结果为:{}
既然exports
和module.exports
两个对象指向同一个对象,require
导入的是谁呢?一起看下下面代码
// test.js
module.exports = {
a: 100
}
exports = {
a: 200
}
// app.js
let test = require('./test');
console.log(test); // 打印为 {a : 100}
从上面可知,require
导出的内容是module.exports
的指向的内存块内容,并不是exports
的。
ES6中的模块导出 export
export
是ES6中的导出,与它对应的导入是 import
,常见的还有一个export default
export与export default均可用于导出常量、函数、文件、模块等
在一个文件或模块中,export、import可以有多个,export default仅有一个
通过export方式导出,在导入时要加{ },export default则不需要
export能直接导出变量表达式,export default不行。
总结
综上可知:
export / import
:是ES6中的导入导出。module.exports / exports
: 只有 node 支持的导出,二者指向同一个对象。与他们对应的导入是require
,模块最终导入的是module.exports
对象。
目前的浏览器几乎都不支持 ES6 的模块机制,所以我们要用 Babel 把 ES6 的模块机制转换成 CommonJS 的形式,然后使用 Browserify 或者 Webpack 这样的打包工具把他们打包起来。达到模块化加载效果类似于
seajs
代码
扫一扫 关注我的公众号【前端名狮】,更多精彩内容陪伴你!