import和require的基本使用和区别

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 = {
  fn1function(){
       var a = 1;
       return a;
     },
  fn2function({
       var b = 2;
       return b;
     }, 
  c3
}

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

(0)
李, 若俞的头像李, 若俞

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!