【js模块化import export语法总结】

内置的模块化语法

内置的语法使得开发人员可以在浏览器中使用模块化，但是需要在script标签中使用type="module"属性告知浏览器使用的是模块化

export导出

• 默认导出
• 命名导出
• 各种导出的语法之间不会相互影响，可以有任意多个导出
• 默认导出只能有一个

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName() {...}
export class ClassName {...}
 
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
 //合并模块
 //有时你会想要将模块聚合在一起。您可能有多个级别的依赖项，您希望简化事物，将多个子模块组合到一个父模块中。这可以在父模块中使用以下的导出语法：
 // 这实际上是导入后跟导出的简写，即“我导入模块 x.mjs，然后重新导出部分或全部导出”。
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
//a.js
//输出单个变量
export var a='A';

//输出多个变量
var b='b';
var c='c';
var d='d';
export{b,c,d};

//重命名输出
export{b as b1,c as c1,d as d1}

//输出单个函数
export function fn() { 
    this.name="jack ma";
    console.log('fn');
 }
function fn1(){

}
function fn2(){
     
}
function fn3(){
     
}
//输出多个函数
export {fn1,fn2,fn3}

//输出class
export class modules{
    constructor(){

    }
}

import导入

• 导入默认模块时，变量名可以重新自定义，不要求和模块导出时的变量名一致，一般保持一致，但非必须
• 在浏览器中使用时，路径需要书写完整(./或者…/开头，扩展名结尾)

import defaultExport from "module-name";//导入使用默认导出名称的导出
 import * as name from "module-name";//导入带有别名的所有导出
 import { export } from "module-name";//导入单个导出
 import { export as alias } from "module-name";//导入单个带有别名的导出
 import { export1 , export2 } from "module-name";//导入多个导出
 import { export1 , export2 as alias2 , [...] } from "module-name";//导出时重命名多个
 import defaultExport, { export [ , [...] ] } from "module-name";//
 import defaultExport, * as name from "module-name";
 import "module-name";
//导入全部变量
import * as alls from './a.js';
console.log(alls);

//导入指定的变量
import{a,b,c} from './a.js'
console.log(a,b,c)

//导入指定的变量并重命名
import{a as a1,b as b1,c as c1} from './a.js'
console.log(a1,b1,c1)

import导入的模块都是引用

export let counter = 3;
export function incCounter() {
    counter++;
}
export function setCounter(value) {
    counter = value;
}


//main.js
import { counter, incCounter ,setCounter} from './lib';

// The imported value `counter` is live
console.log(counter); // 3
incCounter();
console.log(counter); // 4
setCounter(0);
console.log(counter); // 0

可以看见，当变量counter改变时，导入的模块也会跟着改变，所以导入的值类型的模块肯定也是采用的引用模式

参考链接：
1.简书 ES6 import和export的基本语法
2.CSDN import和export的用法
3.MDN Web->开发技术-> JavaScript ->JavaScript 指南->JavaScript 模块