ES6语法之模块化（ES module）

一、ES6模块化（ES module）

1.ES6模块语法3 种用法：

• 默认导出与默认导入
• 按需导出与按需导入
• 直接导入并执行模块中的代码

1.1默认导出与默认导入

默认导出的语法： export default 默认导出的成员
默认导入的语法： import 接收名称 from '模块路径'

• 导出

export default{
	name:"张三",				
	play:function(){
		console.log(name+"在干什么");
		}  			
}

• 导入

// 默认导入时的接收名称可以任意名称，只要是合法的成员名称即可
import result from './xxx.js'
console.log(result)

注意点:

• 每个模块中，只允许使用唯一的一个 export default
• 默认导入时的接收名称可以任意的合法名称
• 导入时不需要加{}

1.2按需导出与按需导入

• 按需导出的语法：

export const a = 10;
export const b = false;
export const fn = function(){
	console.log("导出的内容");
}
//可以有多个export

• 按需导入的语法：

import { a,b,fn as getData } from 'xxx.js'

注意点:

• 每个模块中可以有多个export导出
• 按需导入的成员名称必须和按需导出的名称保持一致
• 按需导入的成员必须放到{}里
• 按需导入时，可以使用 as 关键字进行重命名

1.3直接导入并执行模块中的代码

如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。
可以直接导入并执行模块代码，示例代码如下：import '模块的路径'

//xxx.css
.demo_img{
	width:100%
}
// 导入该模块
import './xxx.css'