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。
网友评论