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。