ES6的子產品化管理

ES6的export

export用于對外輸出本子產品（一個檔案可以了解為一個子產品）變量的接口

1.1 export

// export/index.js
const a = "123";
const fn = () => window.location.href;

export { fn };

// show/index.js
const ex = require("./export/index");
import x from "./export/index";
import { fn } from "./export/index";
console.log(ex, "export1"); // {fn: ƒ, __esModule: true} "export1"
console.log(x, "export-x"); // undefined "export-x"
console.log(fn, "export-fn"); // function() { return window.location.href; } "export-x"
           

1.2 export default

// export/index1.js
const a = "123";
const fn = () => window.location.href;
export default fn;


// show/index1.js
const ex1 = require("./export/index1");
import x from "./export/index1";

console.log(ex1, "export1"); 
// {default: ƒ, __esModule: true} "export1"
console.log(x, "export2"); 
// ƒ fn() {return window.location.href;} "export2"
           

export 可以導出的是一個對象中包含的多個 屬性，方法。

export default 隻能導出 一個 可以不具名的 對象。

import {fn} from ‘./xxx/xxx’ ( export 導出方式的 引用方式 )

import fn from ‘./xxx/xxx1’ ( export default 導出方式的 引用方式 )