https://juejin.im/post/5998625f518825244d20327c
什么是模块
自动运行在严格模式下并且没有办法退出运行的 JavaScript 代码。在模块的顶部, this 的值是 undefined;模块不支持 HTML 代码风格的代码注释。模块仅导入和导出你需要的绑定。
导出
用 export 导出
// 导出数据
export const NAME = "柚子";
// 这个 age 变量是此模块私有的
let age = 18;
// 导出函数
export function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b
}
// 导出引用
export subtract;
任何未显式到处的变量、函数或类都是模块私有的,外部无法访问。
导入
用 import 导入
语法:
import { NAME, add, subtract } from './example.js';
// 此语句的含义是,从 example.js 文件中导入需要的标识符。
// 可以导入一个或多个
add(1, 2) // 3
NAME = 1; // 抛错,不能给导入的绑定重新赋值
导入整个模块
import * as example from './example.js';
cconsole.log(example.NAME); // 柚子
example.add(1, 2) // 3
这种导入格式被称为命名空间导入;在 example.js 文件中不存在 example 对象,所以它作为 example.js 中所有导出成员的命名空间对象而被创建。
import { NAME } from './example.js';
import { add } from './example.js';
import { subtract } from './example.js';
不管 import 语句中把一个模块写了几次,该模块都只对执行一次。
注意: export 语句不允许出现在 if 语句中,也不能在一条语句中使用 import,只能在顶部使用它。
if(isTrue) {
export add; // 这样写会报错
}
function importSomething() {
import { add } from './example.js'; // 这样写会报错
}
重命名
通过 as 关键字来指定函数在模块外应该被叫做什么名字
// example.js
function sum(a, b) {
return a + b
}
export { sum as add }; // 这里 sum 是本地名称,add 是导出时使用的名称
// app.js
import { add } from './example.js';
// 在导入的时候,必须要使用 add
// example.js
export function sum(a, b) {
return a + b
}
// app.js
import { sum as add } from './example.js';
// 在导入时用 add 来重命名 sum
add(1, 2) // 3
默认值
每个模块只能有一个默认的导出值。
default 表示这是一个默认的导出。
// 导出默认值
export default function(a, b) {
return a + b;
}
也可以是:
// 导出默认值
function sum(a, b) {
return a + b;
}
export default sum;
如果要导入默认值的话,就不能加中括号了:
import sum from './example.js';
如果文件中既有默认值,也有非默认值:
export let age = 18;
export default function(a, b) {
return a + b;
}
那么导入的时候就需要这样写:
import add, { age } from './example.js';
// 在 import 语句中,默认值必须排在非默认值之前
结尾
所以,看完了上面的解析之后,现在知道下面的写法是什么意思了吧。
import React, { Component, PropTypes } from 'react';
export default class App extends Component {
}
什么是模块
自动运行在严格模式下并且没有办法退出运行的 JavaScript 代码。在模块的顶部, this 的值是 undefined;模块不支持 HTML 代码风格的代码注释。模块仅导入和导出你需要的绑定。
导出
用 export 导出
// 导出数据
export const NAME = "柚子";
// 这个 age 变量是此模块私有的
let age = 18;
// 导出函数
export function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b
}
// 导出引用
export subtract;
任何未显式到处的变量、函数或类都是模块私有的,外部无法访问。
导入
用 import 导入
语法:
import { NAME, add, subtract } from './example.js';
// 此语句的含义是,从 example.js 文件中导入需要的标识符。
// 可以导入一个或多个
add(1, 2) // 3
NAME = 1; // 抛错,不能给导入的绑定重新赋值
导入整个模块
import * as example from './example.js';
cconsole.log(example.NAME); // 柚子
example.add(1, 2) // 3
这种导入格式被称为命名空间导入;在 example.js 文件中不存在 example 对象,所以它作为 example.js 中所有导出成员的命名空间对象而被创建。
import { NAME } from './example.js';
import { add } from './example.js';
import { subtract } from './example.js';
不管 import 语句中把一个模块写了几次,该模块都只对执行一次。
注意: export 语句不允许出现在 if 语句中,也不能在一条语句中使用 import,只能在顶部使用它。
if(isTrue) {
export add; // 这样写会报错
}
function importSomething() {
import { add } from './example.js'; // 这样写会报错
}
重命名
通过 as 关键字来指定函数在模块外应该被叫做什么名字
// example.js
function sum(a, b) {
return a + b
}
export { sum as add }; // 这里 sum 是本地名称,add 是导出时使用的名称
// app.js
import { add } from './example.js';
// 在导入的时候,必须要使用 add
// example.js
export function sum(a, b) {
return a + b
}
// app.js
import { sum as add } from './example.js';
// 在导入时用 add 来重命名 sum
add(1, 2) // 3
默认值
每个模块只能有一个默认的导出值。
default 表示这是一个默认的导出。
// 导出默认值
export default function(a, b) {
return a + b;
}
也可以是:
// 导出默认值
function sum(a, b) {
return a + b;
}
export default sum;
如果要导入默认值的话,就不能加中括号了:
import sum from './example.js';
如果文件中既有默认值,也有非默认值:
export let age = 18;
export default function(a, b) {
return a + b;
}
那么导入的时候就需要这样写:
import add, { age } from './example.js';
// 在 import 语句中,默认值必须排在非默认值之前
结尾
所以,看完了上面的解析之后,现在知道下面的写法是什么意思了吧。
import React, { Component, PropTypes } from 'react';
export default class App extends Component {
}