ES6的模块化

一、定义一个模块

当我们创建一个全新的JS模块时，我们需要给这个模块创建一个接口供别的JS模块调用它，配置接口需要用到 export 命令或者 export default 命令

export命令：将指定函数暴露出去，同时一个JS页面只能有一个export命令，语法：

let username = ‘zhangsan’;

function fn() {

console.log(‘我是函数’)；

}

const obj = {

a:1,

b:2

};

class Person {

constructor() {

this.name = ‘wangwu’;

}

init() {

console.log(this.name);

}

}

export {

username,

fn,

obj,

Person

} // 大括号内就是暴露出去的内容

export default：只能暴露一个变量或者函数，和export命令不共存且也只能存在一个，用这个命令函数可以省略函数名，语法：

export default function() {

console.log(‘zhangsan’);

}

二、调用模块

import命令用于调用别的模块已经暴露的接口，如果一个模块暴露的是多个变量名或者函数，想要全部调用就需要知道暴露的变量名和接口。语法：

important {

暴露的函数名或变量名

} from ‘模块存在的路径（相对路径）’

例子：

import {

obj,

Person,

username,

fn,

} from’./define_module.js’;

console.log(username);

fn();

console.log(obj);

newPerson().init();

三、加载模块

HTML页面加载ES6模块也需要通过script标签，通过src地址引入，并且还要加上 type=’module’ 属性。

模块可以放在任意位置加载，因为是异步加载，不会造成浏览器堵塞。

四、模块化的其他问题

1.改变我们引入的模块中函数或者变量的名称

import {

fn as fn1,

username as user

} // as前的是原名，as后的是重命名