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的结果赋值给某个变量
原文始发于微信公众号(前端24):import和require的基本使用和区别
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/217136.html