require和ES6 import的区别

miguel.jiang 发布于2019-08-23 17:19 / 2789人阅读

摘要：模块化的进程里，出现了很多模块化的方案，，。随着标准的发布，的规范也被广泛使用了。只是浏览器的支持程度不高，需要配合转码工具使用。输出可以看出，很重要的一个区别就是一个基本值是否会同步变化，

js模块化的进程里，出现了很多模块化的方案，commonjs，requirejs(AMD),CMD。随着ES6标准的发布，import/export的规范也被广泛使用了。只是浏览器的支持程度不高，需要配合转码工具使用。ES6的模块化和之前社区的commonjs模块化到底有什么区别呢？

Commonjs的require和module.exports

require是个函数，动态加载，也因此

1.require导入是在运行时，理论上可以在任意地方调用require导入模块;
2.require()的路径可以是表达式：require("/app" + "/index");

require返回对应module.exports对象的浅拷贝

1.如果是module.exports里的基本类型的值，会得到该值的副本
2.如果是module.exports里的对象类型的值，会得到该值的引用

ES6的import和export

import在编译时确定导入

1.路径只能是字符串常量
2.import会被提升到文件最顶部
3.导入的变量是只读的

import导入的是值引用，而不是值拷贝

1.模块内部值发生变化，会对应影响到引用的地方
2.import导入与导出需要有一一映射关系，类似解构赋值。

代码说明一下两者的区别

Commonjs

// a.js
let a = 0;
const count = () => {
    a++;
}
setTimeout(function(){
    a++;
    console.log("in module the a is " + a);
}, 500);
module.exports = {
    a,
    count,
};

// b.js
let foo = require("a.js");
foo.count();
setTimeout(function(){
    console.log("in require the a is " + foo.a);
}, 1000);

// 输出
// in the module the a is 2
// in the require the a is 0

因为foo是一份浅拷贝，所以a是require导入时export里a的值；而count是一个函数，foo.count是这个函数的一个引用，所以调用时作用域是它声明处一样，也就是它修改的a是exports里的，而不是foo.a。

Es6 module

// a.js
let a = 0;
const count = () => {
    a++;
}
setTimeout(function(){
    a++;
    console.log("in module the a is " + a);
}, 500);
export {
    a,
    count,
};

// b.js
import { a, count } from "a.js";
count();
setTimeout(function(){
    console.log("in require the a is " + a);
}, 1000);

// 输出
// in the module the a is 2
// in the require the a is 2

可以看出，很重要的一个区别就是一个基本值是否会同步变化，

海外云主机服务器托管 require的用法宽带和专线的区别专线和宽带的区别空间和域名的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104175.html

require，import区别

摘要：，区别遵循的模块化规范不一样模块化规范即为提供一种模块编写模块依赖和模块运行的方案。出现的时间不同相关的规范由于野生性质，在年前后出生。作为的规范，一直沿用至今。这其实要感谢原来项目名叫做，后更名为这个神一般的项目。 require，import区别遵循的模块化规范不一样模块化规范：即为 JavaScript 提供一种模块编写、模块依赖和模块运行的方案。谁让最初的 JavaScri...

Rango 2019-08-20 18:30 评论0 收藏0
前端模块化详解

摘要：提倡依赖前置，在定义模块的时候就要声明其依赖的模块。适用场景按需加载条件加载动态的模块路径注关于模块化，详细见阮一峰的入门模块与模块化区别模块化的规范和两种。模块化开发方便代码的管理，提高代码复用性，降低代码耦合，每个模块都会有自己的作用域。当前流行的模块化规范有CommonJS，AMD，CMD，ES6的import／export CommonJS的主要实践者就是nodejs,一般...

zhangfaliang 2019-08-23 17:11 评论0 收藏0
谈谈Js前端模块化规范

摘要：依赖全部加载完成后，调用回调函数规范异步加载模块规范和很相似，简单，并与和的规范保持了很大的兼容性在规范中，一个模块就是一个文件。抛出问题：在开发中在导入模块时经常使用require和import；导出模块时使用module.exports/exports或者export/export default; 有时候为了引用一个模块会使用require奇怪的是也可以使用import？...

Steve_Wang_ 2019-08-29 16:22 评论0 收藏0
谈谈Js前端模块化规范

摘要：依赖全部加载完成后，调用回调函数规范异步加载模块规范和很相似，简单，并与和的规范保持了很大的兼容性在规范中，一个模块就是一个文件。抛出问题：在开发中在导入模块时经常使用require和import；导出模块时使用module.exports/exports或者export/export default; 有时候为了引用一个模块会使用require奇怪的是也可以使用import？...

NeverSayNever 2019-08-23 11:00 评论0 收藏0