阅读 1086

import和require的基本使用和区别

在 ES6 中 module 成为标准,使用 import 引入模块,使用 export 语句导出接口,但是在node 环境中,每个文件就是一个模块,采用的是 CommonJS 规范,使用 require 引入模块,使用 module.exports 导出接口。import 和 require 都是被模块化所使用

import

静态 import语句用于导入由另一个模块导出的绑定。无论是否声明了 strict mode ,导入的模块都运行在严格模式下。在浏览器中,import 语句只能在声明了 type="module" 的 script 的标签中使用,是初始化加载依赖项的最优选择 动态 import()类似于函数,它不需要依赖 type="module" 的script标签,在需要按照一定的条件或者按需加载模块时,动态import() 是非常有用的 在创建JavaScript模块时,export 语句用于从模块中导出函数、对象或原始值,以便其他程序可以通过 import 语句使用它们。导出的模块都处于严格模式, export语句不能用在嵌入式脚本中

基本使用:

静态import:

//导入模块的默认导出接口
import defaultExport from "module-name";

//导入整个模块整体并命名
import * as name from "module-name";

//导入单个的接口
import { export } from "module-name";

//导入单个接口并命名
import { export as alias } from "module-name";

//导入两个接口
import { export1 , export2 } from "module-name";

//导入多个接口并为其中的接口命名
import { export1 , export2 as alias2 , [...] } from "module-name";

//导入模块的默认导出接口和其他多个接口
import defaultExport, { export [ , [...] ] } from "module-name";

//导入模块的默认导出接口和整个模块整体并命名
import defaultExport, * as name from "module-name";

//导入运行模块的全局代码,而不导入模块中的任何接口
import "module-name";
复制代码

export导出语句:

//导出单个接口
export let name1, name2, …, nameN;
export let name1 = …, name2 = …, …, nameN;
export function FunctionName(){...}
export class ClassName {...}

//导出接口列表
export { name1, name2, …, nameN };

//重命名导出接口
export { variable1 as name1, variable2 as name2, …, nameN };

//默认导出接口
export default expression;
export default function () { … } 
export default function name1() { … } 
export { name1 as default, … };

//模块重定向
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;
复制代码

动态import:

//像调用函数一样来动态的导入模块,将返回一个promise(这是一个处于第三阶段的提案)
var promise = import("module-name");

//支持await关键字
var module = await import('module-name');
复制代码

require

requirejs是一个JavaScript模块加载器,它非常适合在浏览器中使用,但它也可以用在其他脚本环境,就像 Rhino and Node。使用 requirejs 加载模块化脚本将提高代码的加载速度和质量 require导入的内容为module.exports导出的内容,module.exports 后面的内容是什么,require的结果就是什么,对象、数字、字符串、函数……再把require的结果赋值给某个变量

基本使用:

require导入: a.js

//导入b.js(.js可省略)模块并赋值给变量d
var d = require('b');
console.log(d.a());  //1
console.log(d.b());  //2
console.log(d.c);  //3
复制代码

module.exports导出: b.js

module.exports = {
  fn1: function(){
       var a = 1;
       return a;
     },
  fn2: function() {
       var b = 2;
       return b;
     }, 
  c: 3
}
复制代码

import和require的区别

遵循规范:

import是ES6的一个语法标准,兼容浏览器需要转化成ES5的语法 require采用CommonJS/AMD规范

调用时间:

import是编译时调用,必须放在代码的开头 require是运行时调用,可以运用在代码的任何地方

实现过程:

import是解构过程,由于浏览器兼容问题,需要在node中用babel将ES6语法转化成为ES5语法再执行 require是赋值过程,require的结果就是module.exports后面的内容,例如对象、函数、字符串、数组等,最终把require的结果赋值给某个变量

文章分类
前端
文章标签