ES6 入门

时间 2019-11-06

原文原文链接

在es6以前，若是咱们须要引入一个外部的库，多是像下面这样子的：css

引入Jqueryhtml

而后在js中能够像下面这样使用：es6

$(function(){ $('.aaa').on('click',function(){ //... }); }); 在es6以前，几乎全部的第三方类库，都是经过上面这种形式引入的。这种形式的引入会有下面一些问题：web

全局变量污染每一个第三方的类库基本都是定义了一个惟一的全局变量，而后将全部的函数，属性都封装到这个变量上面。 script标签顺序有严格的依赖全部的类库基本上都须要依赖jQuery，在引入本身的类库文件以前必须引入jQuery的类库。建立es6的模块在es6的规范中，引入了模块的概念。chrome

例如如今我有一个a.js文件，这里面封装了一个模块，而后须要给外部提供一些接口。内容以下：express

let p1 = 'abc'; const m1 = { fn:()=>{ console.log('from a module...p1='+p1); } };npm

export { m1 };跨域

使用es6模块上面咱们已经写好了一个模块，下面来看一下如何使用这个模块。 **注意：**在chrome浏览器中，默认是不支持模块的。浏览器

解决办法：在chrome浏览器中访问：chrome://flags/ 而后找到Experimental Web Platform features项，点击启用。重启浏览器以后生效。

接下来咱们再建立一个模块和一个用来使用这些模块的html页面

b.js的内容以下：

//导入a.js模块 import { m1 } from './a.js';

//调用模块的方法 m1.fn();

index.html的内容以下：

<!doctype html>

<html> <head> <script type="module" src="./b.js"></script> </head> </html> 注意：

这里的script标签的type必须是module才行。须要使用一个web服务器来运行上面的内容，不然浏览器会报跨域的错误这里推荐使用轻量级的http-server做为web服务器来运行上面的内容。使用如下命令安装http-server:

cnpm install -g http-server 若是你没有安装cnpm的话，请先安装cnpm。到此，咱们来看一下咱们的目录结构：输入图片说明

在此目录下运行：

http-server 而后访问：http://127.0.0.1:8080

查看下图：输入图片说明

从上图中能够看出，此时模块b的做用域链的活动对象中，包含了导入的模块a，也就是说，此时在b模块中，能够访问到a模块。

控制台输出以下：输入图片说明到此，咱们已经初步了解了es6模块的建立已经使用。

import和export 参考连接：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

在模块中，除了能够像上面a.js中那样，导出一个模块，还支持如下导出方式：

export { name1, name2, …, nameN };

export { variable1 as name1, variable2 as name2, …, nameN };

export let name1, name2, …, nameN;

export let name1 = …, name2 = …, …, nameN;

export default expression;

export default function (…) { … }

export default function name1(…) { … }

export { name1 as default, … };

export * from …;

export { name1, name2, …, nameN } from …;

export { import1 as name1, import2 as name2, …, nameN } from …;

除了像b.js中那样，导入一个模块以外，还支持如下方式的导入：

import defaultMember from "module-name"; import * as name from "module-name"; import { member } from "module-name"; import { member as alias } from "module-name"; import { member1 , member2 } from "module-name"; import { member1 , member2 as alias2 , [...] } from "module-name"; import defaultMember, { member [ , [...] ] } from "module-name"; import defaultMember, * as name from "module-name"; import "module-name"; 下面具体来看几种方式的使用：

第一种：导出多个成员将a.js的内容修改成以下：

let p1 = 'abc'; const m1 = { fn:()=>{ console.log('from a module...p1='+p1); } };

export { m1 , p1 }; b.js的内容修改成以下：

//导入a.js模块 import { m1,p1 } from './a.js';

//调用模块的方法 m1.fn();

console.log(p1); 刷新页面，查看控制台输出：输入图片说明

第二种：经过as指定导出别名修改a.js的内容，改成以下：

let p1 = 'abc'; const m1 = { fn:()=>{ console.log('from a module...p1='+p1); } };

export { m1 as m, p1 as p }; as能够指定导出别名。

b.js修改以下：

//导入a.js模块 import { m , p } from './a.js';

//调用模块的方法 m.fn();

console.log(p); 注意，import语句中，导入的名称必须和export导出的一致。

将b.js修改

第三种：默认导出修改a.js内容以下：

let p1 = 'abc'; const m1 = { fn:()=>{ console.log('from a module...p1='+p1); } };

export default { m1 } 注意，默认导出只能导出一个成员。

修改b.js内容以下：

//导入a.js模块 import abc from'./a.js';

//调用模块的方法 abc.m1.fn();

看下图：输入图片说明

从图中能够看出，导入的对象层级结构，发现和上面的状况不同。这是由于，这里的abc至关于定义的一个变量用来接收a模块中的默认导出对象。相似下面的赋值语句：

let abc = {m1:{...}} 也就是说export default其实就是导出了一个名称为default的对象。类型下面的代码：

//a const default = {...}

//b const abc = default; 注意这里不能使用{abc}的形式导入。

将b.js修改成以下内容：

//导入a.js模块 import * as m1 from'./a.js';

看下图：效果图

会发现对象的层级又多了一层。仔细看会发现，此时m1的类型为Module。也就是说，这种状况是将a模块导入，而后赋值给了m1。相似下面的代码：

//a const a: Module = { default:{m1:{...}} }; const abc = a ;

1. ES6快速入门 ES6 快速入门
2. ES6入门
3. es6 入门
4. es6入门
5. ES6快速入门
6. ES6入门笔记
7. es6快速入门
8. Es6入门之proxy
9. ES6入门之Proxy
10. es6 语法入门
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用