ES6 24.Module模块化

要点：1.浏览器加载   2.Node加载

一、ES6模块化

1.ES6支持模块化设计，也能其它后端语言一样使用导入导出的功能

2.先创建一个要被导入的模块module.js ：

export let name='Mr.Lee'; //导出这个变量

 

3.再创建一个普通的 .js 文件，比如24.js ,然后导入module.js;

import { name } from "./module.js";

console.log(name);

 

4.最后，在   .html  文件要加载24.js 文件，才有效，注意type格式

 <script type="module" src="./24.js"></script>

 

ps:注意，这种导入导出的方式属于ES6 模块，仅支持浏览器模式

 

5.除了导出变量、常量之外，还可以导出函数、类等功能

export let name='Mr.Lee'; //导出这个变量

export function sum(x,y){
    return x+y;
}
export class Person{
    constructor(name){
        this.name=name;
    }
    run(){
        return 'name:'+this.name;
    }
}

//24.js
import {name,sum,Person} from "./module.js";
console.log(name);
console.log(sum(10,20));
console.log((new Person('Mr.Lee')).run());

 

6.也支持使用 * 号，将所有导出的内容全部加载进来

import * as obj from './module.js';

console.log(obj.name);
console.log(obj.sum(10,20));
console.log((new obj.Person('Mr.Lee')).run());

 

 7.支持别名设定，设定别名后，源名即失效了

import {name as user} from './module.js';

console.log(user);  //name无效了

 

8.统一导出方案，不需要再每个导出的内容设置 export;

let name='Mr.Lee'; //导出这个变量

function sum(x,y){
    return x+y;
}
class Person{
    constructor(name){
        this.name=name;
    }
    run(){
        return 'name:'+this.name;
    }
}
export {
    name,
    sum,
    Person
}

 

9.可以给导出设置一个默认值，导入部分就不用花括号了

export default name;
export {
    sum,
    Person
}

 import name from './module.js';
 import {sum,Person} from './module.js';
 console.log(name); 
 console.log(sum(10,20));
console.log((new Person('Mr.Lee')).run());

 

二、Node加载

1.Node下有自己的导出和导入的加载模式：CommonJS 规范：

let name='Mr.Lee'; //导出这个变量

//新建 common.js
module.exports={
    name:'Mr.Lee'
}

//24.js
const name= require('./common.js');
console.log(name);  //{ name: 'Mr.Lee' }