一,模块化介绍
1.历史上,JavaScript
一直没有模块(module
)体系,ES6
在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS
和 AMD
规范,成为浏览器和服务器通用的模块解决方案。
2.模块化的作用就是将一个大程序拆分成互相依赖的小文件。
3.ES6
的模块自动采用严格模式,不管你有没有在模块头部加上"use strict"
;
4.ES6
模块化基本由两个命令完成:export
和 import
二,模块的导出 export
1.export
规定模块对外接口,下面两种写法皆可
// detalis.js
{
export var name='max';
export var age =27;
}
//details.js
{
var name='max';
var age =27;
export {name,age}
}
2.错误的写法
{
var a = 1;
export a; // 报错
var a = 1;
export {a}; // 正确
}
3.默认导出export default
,一个模块只能有一个默认导出,对于默认导出,导入的名称可以和导出的名称不一致
export default function a(){
return "默认导出一个方法"
}
import myFn from "./test.js";//注意这里默认导出不需要用{}。
4.整体导出*
可以用*
实现整体导出
{
export * as ex from 'kkk.js'
}
5.export
语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。
三,模块的导入 import
1.import
用于导入模块的功能,后面的from
可以接受路径也可以接受模块名,如果是模块名则必须有相关配置文件指示模块名路径。
2.对于不是使用default
导出的,我们必须使用原名导出,对于使用default
导出的,不能使用{}
包裹起来导出。
{
import { name, age } from './details.js' // 相对路径
import Vue from 'vue' // 模块名
}
对于使用export default
导出的
{
import name from './details.js' // 不用使用括号
}
3.对于不是使用default
导出的,我们必须使用原名导出,但是我们可以用 as
为引入的模块更名
{
import { name as n } from './details.js'
}
4.import
语句是静态分析的,在编译时就会执行,会被提到文件头部。
四,import()
函数
1.import
命令:import
命令会被 JavaScript
引擎静态分析,先于模块内的其他语句执行,放在代码块或者条件语句中会报错。
2.import()
函数:import()
函数是在运行时执行,也就是说,什么时候运行到这一句,就会加载指定的模块。
3.import()
函数接受的参数是需要导入模块的路径,返回一个Promise
对象,因此可以进行Promise
的所以操作。Promise
对象返回的参数就是导出的模块
import('modules.js').then(module=>{...})
4.基于运行时加载,我们可以完成下面的操作
(1)按需加载
if(needModule){
import('modules.js').then({a,b}=>{...})
}
(2)条件加载
if(needa){
import('modules.js').then(a=>{...})
}else{
import('modules.js').then(others=>{...})
}
(3)动态的模块路径
const fn =(location)=>location
import(fn()).then(others=>{...})