首页 > 代码库 > 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)——模块化