重庆网站建设mswzjs,网站域名名字,做物流哪个网站推广效果好,wordpress默认安装目录关于JavaScript 的模块化规范#xff0c;可以移步至#xff1a; 【JavaScript高级】模块化规范「一文让你彻底搞懂前端模块化规范 区别」 下面进入正题
require 与 import 两种引入模块方式#xff0c;到底有什么区别呢#xff1f;
大致可以分为以下几个方面#… 关于JavaScript 的模块化规范可以移步至 【JavaScript高级】模块化规范「一文让你彻底搞懂前端模块化规范 区别」 下面进入正题
require 与 import 两种引入模块方式到底有什么区别呢
大致可以分为以下几个方面
一、写法上 require/exports 的用法 const path require(path)
exports.path path
module.exports pathimport/export 的用法 import path from path
import {default as path} from path
import * as path from path
import { dirname } from path
import { dirname as dir } from path
import path, {dirname} from pathexport default path
export const path
export function dirname
export {dirname}
export * from path二、执行顺序 require不具有提升效果到底加载哪一个模块只有运行时才知道。 const path ./ fileName;
const myModual require(path);import具有提升效果会提升到整个模块的头部首先执行。 // import 的执行早于foo的调用。本质就是 import 命令是编译阶段执行的在代码运行之前。foo();import { foo } from my_module;三、输入值的区别 require 输入的变量基本类型数据是赋值引用类型为浅拷贝可修改。 import 输入的变量都是只读的如果输入 a 是一个对象允许改写对象属性。 // a.js
let obj {foo() {console.log(obj...foo);}
}
export {obj
}// b.js
import { obj } from /a.js// 非法操作
obj {}; // Syntax Error : a is read-only;
// Uncaught TypeError: Assignment to constant variable.// 合法操作
obj.foo hello; 四、是否可以使用表达式或变量 require可以使用表达式和变量 let a require(./a.js)
a.add()let b require(./b.js)
b.getSum()import静态执行不能使用表达式和变量因为这些都是只有在运行时才能得到结果的语法结构。 // 报错
import { f oo } from my_module;// 报错
let module my_module;
import { foo } from module;// 报错
if (x 1) {import { foo } from module1;
} else {import { foo } from module2;
}总结
require/exports 和 import/export 本质上的区别实际上也就是 CommonJS 规范与 ES Module 的区别。
浏览器在不做任何处理时默认是不支持 import 和 requirebabel 会将 ES6 模块规范转化成 CommonJS 规范webpack、gulp 以及其他构建工具会对 CommonJS 进行处理使之支持浏览器环境 它们有三个重大差异。 CommonJS 模块输出的是一个值的拷贝ES Module 输出的是值的引用。CommonJS 模块是运行时加载ES Module 是编译时输出接口。 导致该差异是因为 CommonJS 加载的是一个对象即 module.exports 属性该对象只有在脚本运行完才会生成。而 ES Module 不是对象它的对外接口只是一种静态定义在代码静态解析阶段就会生成。 CommonJS 模块的 require() 是同步加载模块ES Module 的 import 命令是异步加载有一个独立的模块依赖的解析阶段。 关于 CommonJS 规范与 ES Module 的区别大家可以移步至 【JavaScript高级】模块化规范「一文让你彻底搞懂前端模块化规范 区别」 进行阅读。
