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