js中require 和 import 的区别
两个都是为了 js 模块化的编程
require 是 CommonJS 语法,CommonJS的模块是对象,输入时必须查找对象属性
require 是运行时加载
let {start, exists, readFile } = require(‘fs’)
运行时加载,
整体加载 fs 模块,生成一个对象 “_fs” ,然后从对象中读取方法,有运行时才能得到这个对象,不能在编译时候做到静态化
ES6 模块不是对象,而是通过export命令显示指定输出带嘛,再通过import 输入
从fs 加载start exists, readFile 三个方法,其他不加载
Es6 模块默认使用严格模式
Es6 模块中,顶层this 指向undefined ,不应该在顶层代码使用this
Export 用以规定模块的对外接口,import 用于输入其他模块提供的功能
Export 时独立的文件,改文件内部的所有变量外部都无法获取,如果希望获取某个变量必须要export
Export var xx= ‘aa’
// or 大括号指定要输出的一组变量
Var aa = ‘aa’
Var bb = ‘bb’
Export {aa, bb}
还可以输出 函数 或者 类
可以只{ } 批量输出,也可以用as 重命名
Export 命令规定的是对外接口,必须与模块内部变量建立一一对应的关系
Export 语句的输出接口,都是和其对应的值是动态绑定关系,即通该接口获取到的都是模块内部实时显示的值
Export 可以位于模块的任何位置,但是必须是在顶层模块,不能在其他作用域内
Import 有提升效果,回提升到头部,首先执行(编译阶段)
Import 是静态执行,不能使用变量和表达式,即在运行的时候才能拿到结果的语法结构
module 整体加载
可以用 指定某个对象,所有的变量都会加在这个对象上
import as circle from ‘./circle’;
export default
直接为模块指定输出,不需要知道模块的变量名和函数名
其他模块加载的时候,import 命令可以为该匿名函数指定任意的名字
import customName from ‘./export-default’;
// 第一组
export default function crc32() { // 输出
// …
}
import crc32 from ‘crc32’; // 输入
// 第二组
export function crc32() { // 输出
// …
};
import {crc32} from ‘crc32’; // 输入
使用export default 时 ,import 语句不使用大括号
Import 和 export 只能用在模块的顶层,不能在代码块中
这样的设计,可以提高编译效率,但是咩有办法实现运行时加载
Require 是运行时加载,所以import 命令没办法代替require 动态加载功能
所以引入了 import() 函数
Import (xxx)
import() 和 import 接受同样的参数
Import() 返回一个promise对象
const main = ‘xxxx’
import(./xxx/xxx/xx.js
)
.then(module => {
module.loadPage(xx)
})
.catch(err => {
///
console.log(err)
})
import() 适用的场合
(1) 按需加载
button.addEventListener(‘click’, event => {
import(‘./dialogBox.js’)
.then(dialogBox => {
dialogBox.open();
})
.catch(error => {
/ Error handling /
})
});
2)条件加载 if…else..
if (condition) {
import(‘moduleA’).then(…);
} else {
import(‘moduleB’).then(…);
}
require 动态加载 全部加载,
es6 import 静态???
提升 需要在代码顶使用 不能在作用域 和代码块内 需要放在顶层
export 可以位于代码的任何位置,但是必须在顶层模块
es6 模块的设计思想,是尽量的静态化,使得编译的时候就能确认模块的依赖关系,以及输入和输出的变量
es6 顶层this 指向undefined
语法
{} 指定从其他模块倒入的变量名,必须和被导入的模块接口名称相同
import {xxx} from ‘xxxx’
import * as xx from ‘xxx’
(2) 可以在 export 不命名 export default
// a.js
export default {
}
// 在import 取名 并且 此处。名字不需要大括号
import demo1 from ‘a.js’
(3)
export function demo2 () {
}
import {xx} from ‘demo2’
es6 import() 可以实现动态加载 1、按需加载 2、调价加载
列举了一些错误语法
export 1 x
var a = 1
export a x
错误的原因是 : 没有提供对外的接口
(1)
var a = 1
export {a}
(2)
export var m = 1
(3)
var a = 1
export { n as m }
https://www.cnblogs.com/ariel-zhang/p/7127714.html
https://www.cnblogs.com/sunshq/p/7922182.html