ES Module
历史上,JavaScript一直没有模块体系(module),无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,唯独javascript没有,在这之前我们都是借助第三方工具(require.js等)来实现模块化开发,直到ES6 module的出现,成为浏览器和服务器通用的模块解决方案,完全可以取代 CommonJS 和 AMD 规范
基本特点
- 每一个模块只加载一次, 并执行一次,再次加载同一文件,直接从内存中读取;
- 每一个模块内声明的变量都是局部变量, 不会污染全局作用域;
- 通过export导出模块,通过import导入模块
- ES6模块只支持静态导入和导出,只可以在模块的最外层作用域使用import和export
,
export
export命令用于规定模块的对外接口,只允许导出最外层函数、类以及var、let或const声明的变量,可多次export,export出去后自动成为模块对象的属性
-
注意: export后只能跟function、class、var、let、const、default、{}
-
基本用法
//base.js
var myName = 'xwen';
var age = 1995;
// 多次export
export {myName};
export let gender="女";
export function show(){
console.log(666);
}
- as
通常情况下,export输出的变量就是本来的名字,但是可以使用as关键字重命名
function show(){
console.log('my name is show');
}
export {show as showName};
- default
为模块指定默认输出,这样就可以在使用 import 令的时候,不必知道所要加载的变量名或函数名
export default {
data:{
path:'/src/'
}
}
*
作为中转模块导出,把某个模块的所有相属性/方法导出
export * from './md.js';
import
import命令用于导入其他模块提供的功能,格式:
import <module> from <url>
- url 支持格式
// 支持
import base from 'http://xwen.com/js/base.js';
import base from '/js/base.js';
import base from './base.js';
import base from '../base.js';
// 不支持
import base from 'base.js';
import base from 'js/base.js';
- 基本用法
//从模块对象中导入属性为default的值,并赋值给变量res,无则得到undefined
import res from './base.js';
//导入模块对象中属性为myName的值并赋值给变量myName
import {myName} from './base.js';
console.log(myName,res);
- as 修改变量名
//导入模块对象中属性为myName的值并赋值给变量username
import {myName as username} from './base.js';
*
导入整个模块对象
//导入整个模块对象,并赋值给myModule变量
import * as myModule from './base.js';
在html中使用ES Module
- 浏览器支持ES Module
在
<script>
标签中指定type="module"
<script type="module">
import res from './base.js';
console.log(res)
</script>
<script type="module" src="js/base.js"></script>
- 浏览器不支持ES Module
利用webpack等工具转换成ES5后引入(推荐)