推荐资料
ECMAScript 6 入门 (没有更好的,阮一峰老师的)
【声明】这篇文章是我学习后的总结,谢谢
1. module
【摘】历史上,JavaScript
一直没有模块(module
)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby
的require
、Python
的import
,甚至就连 CSS
都有@import
,但是 JavaScript
任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。
在 ES6
之前,社区制定了一些模块加载方案,最主要的有 CommonJS
和 AMD
两种。前者用于服务器,后者用于浏览器。ES6
在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS
和 AMD
规范,成为浏览器和服务器通用的模块解决方案。
CommonJs 基本用法可以参考:
FE - 走向Node与Webpack 之路 - CommonJS 模块化
CommonJs 与 ES6 模块化原理区别:
- ES6 : 静态加载,使得编译时就能确定模块的依赖关系,以及输入和输出的变量
- CommonJs : 动态加载,只有运行时才去加载和确定依赖关系;
2. export & import
- export : 规定模块的对外接口
- import : 输入其他模块提供的功能
基本用法:
example-export.js
var filename = 'f1';
var filename2 = 'f2';
function add(x, y) {
return x + y;
}
export var file1='fff'; //right
export funcation addX(){ //right
return 'addx';
}
export function area(x, y) { //right
return x * y;
}
export function ference(x, y) { //right
return (x + y) * 2;
}
//同时提供多个变量和方法(组合成接口形式才可以(使用{}))
export {filename, filename2,add}
// 对外提供的是一个接口,不能是一个值
export filename; // error
export {filename}; //right
// 提供函数
export add; //error
export {add}; //right
example-import.js
//导入接口中的变量 : as 取别名 , from 后路径可以是绝对路径 后缀可以不加
import {filename, filename2 as f2} from "./example";
console.log(filename);
console.log(f2);
//整体导入: 取别名
import * as reac from "./example";
console.log(reac.area(1, 2));
console.log(reac.ference(1, 2));
export defualt
为模块指定默认输出;
export
export default function foo() { // 指定默认输出
console.log('export default!')
}
export default function () { // 指定默认输出
console.log('export default!')
}
export function hi(name) { // 正常输出
console.log(name + ' say hi!');
}
function hello(){
return 'hello';
}
let a='123aa';
let b='123bb';
export {a as default,b} //指定默认输出
export defualt let c ='123cc'; //默认输出值
export default hello; //默认输出方法
export default 42; //right
export 42; //error
import
//1.默认输出没有名字: 自定义名字
import a from "./example";
//如果 example 提供的default 是函数,直接调用 a(x,x);
//2.默认输出没有名字,和其他有名字的 : 有名字的还需要使用{}
import a,{foo} "./example"
//3.假如知道 aa 是 default的
import {defualt as aa,foo} from "./example"
//等同于 import aa,{foo} from "./example"
模块间继承
同时使用export 和 import
//从example 导入 ,改名后,导出
export {area as reactArea} from './example';
//从example 导入,整体导出
export * from './example';
//从example导入后,作为默认输出
export {default} from './example';
常量
//export
export const db = {
name: 'yuan',
pass: 'no'
}
//import
import {db} from './example'
console.log(db.name+' | '+db.pass);
3.node 加载
【摘】在静态分析阶段,一个模块脚本只要有一行import或export语句,Node 就会认为该脚本为 ES6 模块,否则就为 CommonJS 模块。如果不输出任何接口,但是希望被 Node 认为是 ES6 模块,可以在脚本中加一行语句。
export {};
import 加载 CommonJs 模块
【摘】使用import
命令加载 CommonJS
模块,Node
会自动将module.exports
属性,当作模块的默认输出,即等同于export default
。
// a.js
module.exports = {
foo: 'hello',
bar: 'world'
};
// 等同于
export default {
foo: 'hello',
bar: 'world'
};
import * as baz from './a';
require 命令加载 ES6 模块
采用require命令加载 ES6 模块时,ES6 模块的所有输出接口,会成为输入对象的属性。
// es.js
let foo = {bar:'my-default'};
export default foo;
foo = null;
// cjs.js
const es_namespace = require('./es');
console.log(es_namespace.default);
// {bar:'my-default'}