ES6基础入门教程（二十）Module模块化语法

js本身做为编程语言存在一个很大的弊端，就是他完全不支持模块化。现在连css都有一个@import（在一个css中引入另外一个css），js却没有，这点让人十分的蛋疼。
于是在es6中添加了js模块化解决方案：

import和export

这里注意一个地方，你用export和import输出和接收的，都是一个对象，不能直接export name这种写法，应该是export {name}

简单例子：
这是你的主js 主js通过import加载

import {myrequire,addfun,jianfun} from "../js/require1.js"

这是你的次js 次要js通过export把你需要暴露的内容输出出去

const myrequire = 1;
const addfun=(x)=>{
    return x+2;
}
// 第一种export的方式
export {myrequire,addfun};
// 第二种export的方式
export function jianfun(x){
    return x-2;
}

关键字：as 改名

export {
    myrequire,
    addfun as addfunction
};

// 输出的时候，方法名是可以修改的，通过as改。

整体加载

除了通过import {name,name…} from name.js以外，可以一次性加载一个js中的所有对外方法。
只不过加载过来的时候指定一个名字即可：

方法js：

const jia =(x,y)=>{
    return x+y;
}
const jian =(x)=>{
    return x-y;
}
const cheng =(x)=>{
    return x*y;
}
const chu =(x)=>{
    return x/y;
}
export {jia,jian,cheng,chu}

调用js

import * as fangfa from "../js/require1.js"

// 调用通过fangfa.jia
console.log(fangfa.jia(1,1));

不知道你有没有发现。如果你import的内容必须跟export中饭回来的内容一样。
如果我要是不知道名字是啥，那我怎么办。我能不能自己给他定一个名字？？？

答案是：可以！

const jia =(x,y)=>{
    return x+y;
}
const jian =(x)=>{
    return x-y;
}
const cheng =(x)=>{
    return x*y;
}
const chu =(x)=>{
    return x/y;
}
export default {jia,jian,cheng,chu}

你输出方法的时候，前面加上default就可以了。

import fangfa from "../js/require1.js"

console.log(fangfa.jia(1,1));

或者你残暴一点，直接：

export default function(){
    console.log("123");
}

这样都是可以的。

混合使用的时候：

let a =function(){
    console.log(123);
}
let b =function(){
    console.log(555);
}
let c =function(){
    console.log(789);
}
// 在defalut 上定义多个时候的方式
export default {a,b}
export {c};

注意，读取定义到default上的时候，是不需要加{}号的
如果你需要读取default和非default的时候这么写

import d,{c} from "../js/require1.js"

d.b();
c();

另外需要注意的：
使用时一定要灵活，只要是js都可以互相调，不是非得在vue中，
一个js还可以作为接口转发器：

export { foo, bar } from 'my_module';
// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };
上面代码中，export和import语句可以结合在一起，写成一行。但需要注意的是，写成一行以后，foo和bar实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar。