React 筆記 export 和 import 基本語法

一、ES6的模塊化的基本規則或特點

• 每一個模塊只加載一次， 每一個JS只執行一次， 如果下次再去加載同目錄下同文件，直接從內存中讀取。 一個模塊就是一個單例，或者說就是一個對象；
• 每一個模塊內聲明的變量都是局部變量， 不會污染全局作用域模塊內部的變量或者函數可以通過export導出
• 一個模塊可以導入別的模塊

二、幾種import和export的基本語法

第一種導出

lib.js

let bar = "stringBar"; let foo = "stringFoo"; let sum = 1; let fn0 = function() { console.log("fn0"); } let fn1 = function() { console.log("fn1"); } let fnSum = function() { sum = sum + 1; return sum; } export{ bar, foo ,fn0, fn1, fnSum} 

main.js

import {bar,foo, fn0, fn1, fnSum} from "./lib"; import {fnSum as fnSum1} from "./lib"; console.log(bar+"_"+foo); fn0(); //fn0 fn1(); //fn1 console.log(fnSum()); //2 console.log(fnSum()); //3 console.log(fnSum1()); //4 

第二種導出

lib.js

let fn0 = function() { console.log("fn0"); }; let obj0 = {} export { fn0 as foo, obj0 as bar}; 

main.js

import {foo, bar} from "./lib"; foo(); //fn0 bar.name = '123'; console.log(bar);//Object {name: "123"} 

第三種導出的方式

lib.js

export let foo = ()=> {console.log("fnFoo") ;return "foo"},bar = "stringBar"; 

main.js

import {foo, bar} from "./lib"; console.log(foo()); console.log(bar); 

第四種導出的方式

lib.js

export default "string" 

main.js

import defaultString from "./lib"; console.log(defaultString); 

第五種導出方式

lib.js

let fn = () => "string"; export {fn as default}; 

main.js

import defaultFn from "./lib"; console.log(defaultFn()); 

第六種導出方式

other.js

export let foo = "stringFoo"; export let fnFoo = function() {console.log("fnFoo")}; 

lib.js

export * from "./other"; 

main.js

import {foo, fnFoo} from "./lib"; console.log(foo); console.log(fnFoo()); 

第七種導出方式

import * as obj from "./lib"; console.log(obj); 

三、 ES6導入的模塊都是屬於引用

lib.js

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