React学习笔记_export和import总结

强力推荐

nodejs 视频

react 视频

export和import总结

一、 ES6的模块化的基本规则或特点

• 每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；
• 每一个模块内声明的变量都是局部变量， 不会污染全局作用域
• 模块内部的变量或者函数可以通过export导出
• 一个模块可以导入别的模块

lib.js

//导出常量
export const sqrt = Math.sqrt;

//导出函数
export function square(x) {
    return x * x;
}

//导出函数
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

main.js

import {sqrt} from './lib'

import { square, diag } from './lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

二、 几种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 使用* export{接口}* 导出接口
• main.js 使用 * import{接口} * 导入接口

第二种导出

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"}

• export接口的时候， 我们可以使用 XX as YY， 把导出的接口名字改了

第三种导出的方式

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);

• 直接在export的地方定义导出的函数，或者变量

第四种导出的方式

lib.js

export default "string"

main.js

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

• 使用export default导出.
• 相当于是匿名.
• js模块文件就只有一个

第五种导出方式

lib.js

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

main.js

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

• export也能默认导出函数
• 每一个模块的默认接口就一个

第六种导出方式

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