ES6学习1_理解ES2015(ES6)的Module
2018-02-25 22:22
567 查看
语法
注意:import命令具有提升效果,不管写在哪一行都会提到模块头部首先执行import
import 模块名 from '路径'// 引入变量 默认名称 import {firstName, lastName, year} from './profile'; // 需要 更名使用 `as` 关键字 import { lastName as surname } from './profile'; // 整体加载模块 import * as circle from './circle'; // 直接输出默认(匿名)方法(或变量),可以取一个方法名字,如customName import customName from './export-default'; customName(); // 同时输入默认方法和其他变量 import customName, { otherMethod } from './export-default';
export
输出变量export var firstName = 'Michael';或
var firstName = 'Michael'; export {firstName};方法也是同样。
方法还可以直接以function的方式输出,叫做模块的整体加载
// test.js export function foo() {}; export function foo1() {};引入时可以直接使用
import { foo, foo1 as f } from './test'; foo(); f();输出时可以使用
as重命名变量名
export { v1 as streamV1 }输入默认接口
export default
// export-default.js export default function () { console.log('foo'); }注意: 输出的必须是一个接口(对象或者类或方法),而不能直接是一个变量,如数字,字符串之类的
支持情况
浏览器
截止2016.08.02,所有浏览器均还不支持原生模块化Node.js
Node.js 6以上ES2015模块加载的本质
ES6模块加载的机制,与CommonJS模块完全不同。CommonJS模块输出的是一个值的拷贝,而ES6模块输出的是值的引用。CommonJS模块输出的是被输出值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。ES6模块的运行机制与CommonJS不一样,它遇到模块加载命令import时,不会去执行模块,而是只生成一个动态的只读引用。等到真的需要用到时,再到模块里面去取值,换句话说,ES6的输入有点像Unix系统的“符号连接”,原始值变了,import输入的值也会跟着变。因此,ES6模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。模块的继承
// circleplus.js export * from 'circle'; export var e = 2.71828182846; export default function(x) { return Math.exp(x); }
注意
export *命令会忽略模块的default方法
循环引用
// a.js var b = require('b'); // b.js var a = require('a');原文来自:https://segmentfault.com/a/1190000007717349
相关文章推荐
- ES6学习2_ES2015 Module(模块)
- 理解 ES5, ES2015(ES6) 和 TypeScript
- ECMAScript 学习笔记(2)--ES6新增let、箭头函数理解
- Cannot find module 'babel-p 4000 lugin-transform-es2015
- 基于vscode的node的ES2015(ES6)运行环境搭建
- 学习 React(jsx语法) + es2015 + babel + webpack
- ES2015(ES6)(上)
- ES6部分方法点评(三):babel-preset-es2015-loose可转换且移动端兼容性较好的语法
- 对CommonJs和AMD,CMD的理解,AMD和CMD的区别,CommonJS与ES6的module的区别
- 深入理解ES6学习笔记之块级作用域绑定
- ECMAScript6 (ES6、ES2015)新特性详解
- ES6——模板字符串:`string` ,ES2015新增的符号
- ES6(ES2015) -Generators
- ES6(ES2015)新特性
- ES6学习——模块化:Module Loader API
- ES6还是ES2015?
- ES6中的面向对象class,对新手学习理解大有帮助。
- es 学习 3 别名 理解
- 对于ES6新数据类型Symbol()的理解和学习
- 关于es2015箭头函数的大括号代码块部分的一点理解