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

你可能感兴趣的:(Javascript)