ES6学习笔记——模块化

Posted 2020-08-17 worldly1013

　　最近学习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";