今天踩坑了es6模块化编程,走了蛮多弯路,写个笔记总结一下
Javascript不是一种模块化编程语言,在es6以前,它是不支持”类”(class),所以也就没有”模块”(module)了,es6的到来,让JavaScript第一次有了模块化的概念。其中,ES6的模块化分别为导出(export)与导入(import)两个概念。
import导入模块
基本语法
//导入的标识符(也就是大括号里面的变量)与export暴露出的变量名应保持一致
import {标识符1,标识符2} from "本地模块路径"
import语法声明用于从已导出的模块、脚本中导入函数、对象、指定文件(或模块)的原始值。分为命名式导入(名称导入)和默认导入(定义式导入)。
import的语法跟require不同,而且import必须放在文件的最开始,且前面不允许有其他逻辑代码,这和其他所有编程语言风格一致。
可以导入多个被选中的对象、变量,用逗号隔开
import {file} from "my-module";
import {file1, fun1} from "my-module";
通过 * 符号,我们可以导入模块中的全部属性和方法。当导入模块全部导出内容时,就是将导出模块(’my-module.js’)所有的导出绑定内容,插入到当前模块(’myModule’)的作用域中:
import * as myModule from "my-module";
有时候,导出的名称会与使用的其它名称产生冲突,可以用as重命名
// 要同时导入两者,我们至少要将其中一个的名称改掉。
import {file as file1} from "my-module";
import {file as file2 } from "my-module";
可同时导入多个成员并使用别名
import尽量用相对路径!浏览器会按照相对路径去解析绝对路径导致报错
export导出
一个模块就是一个独立的文件,该文件内部的所有变量,外部无法获取,,export关键字用于暴露数据,暴露给其他模块。使用方式是,可以将export放在任何变量,函数或类声明的前面,从而将他们从模块导出。推荐在文件末列出所有导出的成员。
//
export{ class , function , name}
也可以这样:在定义它时没有马上导出它,不必总是导出声明,可以导出引用,下面这段代码也可行
function sum(num1,num2){
return num1+num2;
}
// 之后将其导出
export sum;
特别地!!!
今天踩坑是因为导入了一个模块a,但在a模块中没有导出。。。并且还在b模块中导入了模块a,还用模块a中的类new了实例,报错:is not a constructor(没有构造器实例化对象)。。。
这个大神的深入浅出es6系列都很棒,一定要看!
深入浅出 ES6(十六):模块 Modules