Require 与 Import 区别

在ES6之前, 社区制定了一些模块加载方案, 主要有CommonJS 和 AMD 两种。 前者用于服务器,后者用于浏览器。 ES6在语言标准俺的层面上,实现了模块功能,而且实现得相当简单,完全可以取代CommonJS 和 AMD 规范, 成为浏览器和服务器通用的模块解决方案。

ES6模块的设计思想是尽量的静态化,是得编译时就能确定模块的依赖关系,以及输入和输出的变量。 CommoJS和AMD模块,都只能在运行时确定这些东西。 比如:CommoneJS模块就是对象,输入时必须查找对象属性。

Require

// CommonJS模块
let { stat, exists, readFile } = require('fs');
 
// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

上面代码的实质是整体加载fs模块(即:加载fs的所有方法),生成一个对象(_fs)然后在从这个对象上面读取3个方法。 这种加载称为“运行时加载”, 因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”。

ES6 import

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

// ES6模块
import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载3个方法,其它方法不加载。 这种加载称为“编译时加载” 或者静态加载, 即 ES6可以在编译时就完成模块加载,效率要比CommonJS模块的加载方式高。 当然,这也导致了没法引用ES6模块本身, 因为它不是对象。

由于ES6模块时编译时加载, 使得静态分析成为可能。 有了它,就能进一步扩宽JavaScript的语法,比如引入宏(macro),和类型检查(type system) 这些只能靠静态分析实现的功能。

require 是赋值过程, 其实require的结果是对象,数字,字符串,函数等,再把require的结果赋值给某个变量
import 是解构过程,但是目前所有的引擎都还没有实现import, 比较常用的方式是使用babel支持ES6

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值