JS中require和import的区别

1. ES6模块的设计思想是尽可能静态，这样模块的依赖关系，以及输入输出变量就可以在编译时确定。

Require 是CommonJS 的语法。 CommonJS模块是对象，输入时必须找到对象属性。

//CommonJS 模块let { stat, Exists, readFile }=require('fs'); //相当于let _fs=require('fs');让stat=_fs.stat;让存在=_fs.exists; let readfile=_fs.readfile;above：整体加载fs模块（即加载所有fs方法），生成一个对象'_fs'，然后从这个对象中读取三个方法。这称为“运行时加载”，因为只有运行时才能获取这个对象，无法在编译时将其设为静态。

ES6 模块不是对象。而是通过export命令显示指定的输出代码，然后通过import输入。

import { stat, Exists, readFile } from 'fs';上图：从fs 中加载“stat, Exists, readFile” 三个方法，其他方法未加载，

在ES6模块中，顶层的this指向未定义的，即顶层代码中不应该使用this。

模块主要由导入和导出两个命令组成。导出用于指定模块的外部接口。 import命令用于输入其他模块提供的功能。

3.出口

模块是一个独立的文件，文件内部的所有变量都无法从外部获取。如果想要得到某个变量，就必须通过export输出。

//profile.jsexport varfirstName='Michael';export varlastName='Jackson';export varyear=1958;或者使用更好的方法：使用大括号指定一组要导出的变量

//profile.jsvar firstName='Michael'; var 姓氏='杰克逊';变量年份=1958；导出{名字，姓氏，年份}；除了导出变量之外，还可以导出函数或者类（class），

导出函数乘法（x，y）{返回x * y;};您还可以批量输出，它也必须包含在大括号中，或者您可以将其重命名为：

函数v1() { . }函数v2() { . }导出{ v1 作为streamV1，v2 作为streamV2，v2 作为streamLatestVersion };Attention:

export命令指定外部接口，必须与模块内部变量建立一一对应关系。

//写方法一export var m=1;//写方法二var m=1;export {m};//写方法三var n=1;export {n as m};//报错export 1; //报告错误var m=1;出口米；报错的原因是：没有提供外部接口，第一种直接输出1，第二种虽然有变量m，但仍然直接输出1，导致无法解构。

同样，函数和类的输出也必须遵循这种写法。

//报错function f() {}export f;//正确的export function f() {};//正确的function f() {}export {f}; 并且：export语句输出的接口都是对应的对它们的值是动态绑定关系，即所有通过这个接口获取的实时值都在模块内部。

位置：导出模块可以位于模块中的任何位置，但必须位于模块的顶层。如果在其他范围内，就会报错。

function foo() { export default 'bar' //语法错误}foo()4.导入命令

当export定义了模块对外的接口后，其他JS文件就可以通过import来加载这个模块了。

//main.jsimport {firstName, lastName,year} from './profile';function setName(element) { element.textContent=firstName + ' ' + lastName;} import 命令接受一对大括号，它指定要导入的内容从其他模块导入的变量名必须与导入模块的外部接口名称（profile.js）相同。

如果要重命名导入的变量，可以使用as关键字，

从'./profile'导入{lastName作为姓氏}； import后的“from”可以指定要导入的模块的路径名，可以是绝对路径，也可以是相对路径。js 路径可以省略。如果只有模块名，没有路径，需要通过配置文件来指定。

注意，import命令具有提升作用，会提升到整个模块的头部并首先执行。 （在编译阶段执行）

因为import 是静态执行的，所以不能使用表达式和变量，即只能在运行时获取结果的语法结构（例如if.else.）

5、模块整体加载

除了指定加载一个输出值外，还可以使用(*)指定一个对象，所有变量都会加载到这个对象上。

//圆.js。导出两个函数export function area(radius) { return Math.PI * radius * radius;}导出函数circumference(radius) { return 2 * Math.PI * radius;}//main.js加载到模块中import { area ,circle } from './circle';console.log('圆面积：' + area(4));console.log('圆周长：' + Peripheral(14));//上面的写法是一一指定需求的加载方式，整体加载写如下。 import * ascircle from './circle';console.log('圆面积：'+circle.area(4));console.log('圆周长：'+circle.circumference(14));注意，模块整体负载所在的对象（上例中的圆圈）应该是可静态分析的，因此不允许在运行时发生更改。

import * ascircle from './circle';//不允许下面两行circle.foo='hello';circle.area=function () {};6.export default

在前面的示例中，使用import 时，您需要知道模块中要加载的变量或函数的名称。用户可能不想阅读源代码，而只想直接使用界面。他们可以使用导出默认命令来指定模块的输出。

//export-default.jsexport default function () { console.log('foo');} 当其他模块加载此模块时，import 命令可以为匿名函数指定任意名称。

//import-default.jsimport customName from './export-default';customName(); //'foo' 导出默认值也可以在非匿名函数之前使用。

我们来比较一下默认输出和正常输出。

//第一组导出默认function crc32() { //输出//.}import crc32 from 'crc32'; //输入//第二组export function crc32() { //输出//. };import {crc32} from 'crc32'; //从输入中可以看到，使用export default时，import语句不需要使用大括号。

*****导入和导出命令只能在模块的顶层使用，不能在代码块内使用。否则会报语法错误。

这样的设计可以提高编译效率，但是没有办法实现运行时加载。

因为require是在运行时加载的，所以import命令无法替代require的动态加载功能。

因此引入了import() 函数。完成动态加载。

import(specifier)specifier 用于指定要加载的模块的位置。 import 可以接受哪些参数？ Import() 可以接受相同的参数。

import() 返回一个Promise 对象。

const main=document.querySelector('main');import(`./section-modules/${someVariable}.js`) .then(module={ module.loadPageInto(main); }) .catch(err={ main.textContent=err.message; });7.import()函数的适用场合

1）按需加载：

button.addEventListener('click', event={ import('./dialogBox.js') .then(dialogBox={dialogBox.open(); }) .catch(error={ /* 错误处理*/})} );上图：导入模块在事件监听函数中。仅当用户单击按钮时才会加载该模块。

2）条件加载：