首页 > 代码库 > ES6学习笔记(1)——模块化
ES6学习笔记(1)——模块化
最近学习ReactJS经常遇见ES6语法,为了尽快弄懂ReactJS,因此想方设法绕过ES6,但是随着学习的深入,需要查阅的资料越来越多,发现大部分与之相关的框架和学习资料都是采用ES6写的,终究发现这是一个绕不过去的坎啊。ES6是JavaScript新一代的标准规范,其主要变化为:变量的解构赋值、箭头函数、Generator函数、Promise对象、类与继承、模块化这几个大方面,我学习时为了能看懂ES6写的代码,就先从这几个大的方面开始下手了,细节部分随着应用的需要再去查阅资料,学习参考资料为:ES6标准入门第二版(阮一峰)
一、严格模式
ES6模块自动采用严格模式,不管有没有在模块头部加上 " use strict "
二、export与import命令
模块功能主要由两个命令构成:export和import。export命令用于规定模块对外接口,import命令用于输入其他模块提供的功能。
export:
export命令可以用来输出变量、函数或者类:
1.输出变量
export var a = 1 ; export var b = 2 ; export var c = 3 ;
其等效写法为:
var a = 1; var b = 2 ; var c = 3 ; export {a,b,c} ;
2.输出函数或类
export function name(x,y){ return x * y ; }
可以使用关键字as重命名函数的对外接口:
function name(x,y){ return x * y ; } export name as rename ;
注意:export命令不能出现在块级作用域内,其语句输出的值是动态绑定,绑定其所在的模块。
import:
import命令可以用来加载使用export命令定义的具有对外接口的模块
import {a,b,c} from ‘export.js‘
当模块没有默认输出时,模块导入的变量名必须与被导入模块(export.js)对外接口名字相同
import使用as关键字可以重新命名
注意:import命令具有提升效应
export default:
export default:为模块指定默认输出,当使用import命令加载模块时,不必需要知道原来模块的输出变量或者函数名字,可以自己取名字,而且import命令后不需要加大括号。
注意:一个模块只能有一个默认输出
export function exp(){ //... } import {exp} from "exp"; export default function exp(){ //... } import exp from "exp";
ES6学习笔记(1)——模块化