在vue中,我们经常需要导入各种js来调用一下功能或者实现一些代码的复用。那么想要导入其他的js或导出给其他js使用,那就必须要了解ES6中的模块导入和导出。
ES6中引入模块需要在script标签上增加 type="module" 来已入模块化js文件
<script src="./a.js" type="module"></script>
<script src="./index.js" type="module"></script>
1. 直接使用export标记导出元素(常量,变量,函数,类)
export let name="张三";
export function add(n1,n2){
return n1+n2;
}
2. 统一使用 export 对象导出元素(常量,变量,函数,类)
let name2="李斯特";
function pj(str){
return str+',你好';
}
export{
name2,pj
}
3. 使用默认导出default。导出的元素允许导入时修改名称。(一个模块只能有一个default导出)
export default all='这是默认导出';
export default function(n1,n2){
return n1/n2;
}
export default class niu{
niuname='二哈';
run(){
console.log('牛儿走了');
}
eat(){
console.log('牛儿吃草');
}
}
1. 固定名称导入,使用导出的名字来导入元素
import { name } from "./a.js";
console.log(name);
import { name2,add } from "./a.js";
console.log(add(1,2));
2. 导入默认default导出的元素并命名
import niuniu from "./a.js"
let niu2=new niuniu();
niu2.niuname='牛二';
console.log(niu2.niuname);
niu2.eat();
3. 全部导入,将模块的内容全部导入到一个指定的新对象内使用。
import * as b from "./a.js"
console.log(b.pj(b.name2));