javasript require与import详解

javasript require与import详解

前言

在javascript中，导入模块可使用require或者import，但两者之间有什么区别呢？

产生背景

要弄清两者之间的区别，首先需要弄明白两者是如何产生的，同样是导入模块，为何要定义两个关键字？

下面这张图可以很好的说明require与import之间的关联

企业微信截图_163852141824.png

require与module.exports是一对，它们是CommonJS中定义的关键字；import与export是一对，它们是ES6定义的标准；它们产生的原因都是为了让javascript项目可以模块化，使js不只是能在浏览器端编写一些简单的脚本，还可以运用js编写更加庞大的项目。

下面有对模块化更加详细的解释：

什么是模块化？
模块化就是将变量和函数 放入不同的文件中 
模块的作用域是私有的 内部定义的代码只能在当前文件中使用 外部使用那么需要将此模块暴露出去

模块化的好处：
减少全局变量  
避免变量名和函数命名冲突
提高代码的复用性和维护性

到这里，可能又会有小伙伴产生疑问了，CommonJS与ES6又有什么区别与联系？

• CommonJS是由JavaScript社区创造并维护的，CommonJS代码并不能直接在浏览器运行，需要通过第三方库进行转义才行

  CommonJS产生的原因
  
  JavaScript是一个强大面向对象语言，它有很多快速高效的解释器。官方JavaScript标准定义的API是为了构建基于浏览器的应用程序。然而，并没有定于一个用于更广泛的应用程序的标准库。CommonJS API定义很多普通应用程序（主要指非浏览器的应用）使用的API，从而填补了这个空白。它的终极目标是提供一个类似Python，Ruby和Java标准库。这样的话，开发者可以使用CommonJS API编写应用程序，然后这些应用可以运行在不同的JavaScript解释器和不同的主机环境中。在兼容CommonJS的系统中，你可以实用JavaScript程序开发：服务器端JavaScript应用程序命令行工具、图形界面应用程序、混合应用程序（如，Titanium或Adobe AIR）
  

• ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了，ES6代码可以直接在现代浏览器上运行

  ECMAScript和JavaScript到底是什么关系？简单来说，ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。
  1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。
  ES6的目标，是使得JavaScript语言可以用来编写大型的复杂的应用程序，成为企业级开发语言。
  

CommonJS很早就产生了，nodejs就是基于CommonJS进行开发的（为什么不使用ES6？因为ES6还没发布），因此在使用nodejs编写代码时，使用的是require与module.exports，对于两者，有一句比较有趣的外文解释：

I will make it simple,

Import and Export are ES6 features(Next gen JS).
Require is old school method of importing code from other files

代码中的表现

在vue项目中，使用require与import都可以导入模块，那么它们之间的差异是什么呢？

• require一定要配合module.exports使用，import则需要和export配合使用，它们之间不能交叉，否则将会报错

  // a.js
  const a = 100;
  module.exports = { a };
  
  // b.js
  const { a } = require('./b');
  console.log(a); // 输出100
  

  // a.js
  const a = 100;
  export default a;
  
  // b.js
  import a from './a';
  console.log(a); // 输出100
  

• require只会在第一次加载时运行，之后加载都是直接获取缓存（导出对象）

  // a.js
  console.log("a");
  
  // b.js
  require("./a.js");
  
  // c.js
  require("./a.js");
  require("./b.js");
  
  // 输出： a
  

  虽然导入了两次 a.js，结果只有打印了一次a

• require的导出不是动态绑定的

  // a.js
  let counter = 0;
  function incCounter() {
    counter++;
  }
  
  module.exports = { counter, incCounter };
  
  // b.js
  const { counter, incCounter } = require("./a.js");
  
  console.log(counter);
  incCounter();
  console.log(counter);
  
  // 输出：0 0
  

  打印结果均为 0

• import用于异步加载，返回一个 Promise 对象，只会在第一次加载时运行

  // a.mjs
  console.log("a");
  
  // b.mjs
  import "./a.mjs";
  
  // c.mjs
  import "./a.mjs";
  import "./b.mjs";
  
  // 输出：a
  

  虽然导入了两次 a.mjs，但是只打印了一次 a

• import的数据是动态绑定的

  // a.mjs
  let counter = 0;
  function incCounter() {
    counter++;
  }
  
  export { counter, incCounter };
  
  // b.mjs
  import { counter, incCounter } from "./a.mjs";
  
  console.log(counter);
  incCounter();
  console.log(counter);
  
  //输出：0 1
  

  a.js中的变量变化同步映射到了b.js

总结

import与require在第一次导入模块时都会执行模块代码，多次导入不会重复执行，两者的区别在于require会缓存首次的结果，import导出的是一个Promise

在vue开发中建议使用import与export，毕竟require算是较为过时了，node在未来的规划中，也计划推出对ES6语法的支持，import与export才是未来