深刻浅出ES6教程模块化

你们好，本人名叫苏日俪格，你们叫我 （格格） 就好，在上一章节中咱们学到了Promise的用法，下面咱们一块儿来继续学习模块化：

JavaScript自己是不支持模块化的，只不事后来一些社区的大佬制定了一个模块规范，主要分为两种，一个是用于服务器的CommonJs,好比nodeJs中的require；另外一个是用于客户端的AMD，好比requireJs。后来ES6提供了通用的模块化方案：
ES6专门提供了import和export这两个小可爱

小白：那么它们都是用来作什么的呢？怎么用的呢？
格格：首先要开启服务器，整个流程是在服务器下进行的，Apache也好，编辑器自带的也好；下面就让咱们带着疑问一块儿来看一下：

export：它是用来定义模块的，能够导出对象、函数、类、字符串等等：

// 1.js export const a = 1; console.log(a); // 1.html <script type="module"> import './1.js'; </script> 

上面的这个例子中，这两个文件是在同一目录下，可是引入的时候前面要加上(./)当前路径，不加就会报错，别问我为何，大概是甲鱼的臀部，下面来看一下导出多个对象的例子：

// 1.js const a = 1; let b = 2; function show(){ console.log(10); } export { a, b as c, show } show(); // 10 console.log(a); // 1 console.log(b); // 2 console.log(c); // c is not defined 由于在这个js里他仍是b，只不过导出到另一个文件里才叫c // 1.html <script type="module"> import {a,c,show} from './1.js'; show(); // 10 console.log(a); // 1 console.log(c); // 2 console.log(b); // b is not defined 已经将导入的b改名为c，因此这里叫c </script> 

上面的例子中能够将export导出的内容经过as进行改名

小白：import也能够有这样的操做么？
格格：那是必须的呀，他们都是一家子的，这可不能偏爱啊

import导入的也能够经过as更名：

// 1.html
<script type="module"> import * as goto from './1.js'; // * 表明1.js中导出的所有的内容，可是不能直接输出*，必须更名 console.log(goto); // 整个json对象 console.log(goto.a); // 1 goto.show(); // 10 </script> 

导出的方式还有另一种：export default {}
那么export和export default的区别就是：前者导出的东西须要在导入的时候加{}，然后者则不须要：

// 1.js
const a = 1;
const b = 2;
const c = 3;
export {a,b}
export default c;
// 1.html
<script type="module"> import c,{a,b} from './1.js'; // 同时导入export和export default的时候，必须把默认的放在前面 console.log(a,b,c); // 1 2 3 </script> 

另外，import除了以上特性以外，还有：
引入的路径既能够是相对路径也能够是绝对路径，还能够是网络路径，好比引入网上的jquery.js；
import还拥有提高特性，就像是var变量提高同样，在实行代码以前会被提到代码的顶部
import能够动态引入，可是import不能放入放到代码块哦

小白：什么是动态引入？
格格：动态引入其实就是基于promise语法，根据promise机制来实现动态引入，首先来看一个例子：

// 1.html
<script type="module"> import('./1.js').then(res =>{ console.log(res.a); // 1 }); </script> 

有了这种机制就能够实现按需加载，好比先载入jquery.js再使用jquery的方法，或者根据条件选择动态加载哪一个模块；
关于模块还须要强调的一点就是它默认就是严格模式，也就是默认在顶部有一个‘use strict’

小白：什么是严格模式？
格格：所谓严格模式也就是改掉一些编程很差的习惯，能够理解为把一个山寨的土匪收编为正规军的感受：

严格模式相关规定仍是挺多的：

• 变量必须声明后再使用
• 函数的参数不能有同名属性，不然报错
• 不能使用with语句
• 不能对只读属性赋值，不然报错
• 不能使用前缀0表示八进制数，不然报错
• 不能删除不可删除的属性，不然报错
• 不能删除变量delete prop，会报错，只能删除属性delete global[prop]
• eval不会在它的外层做用域引入变量
• eval和arguments不能被从新赋值
• arguments不会自动反映函数参数的变化
• 不能使用arguments.callee
• 不能使用arguments.caller
• 禁止this指向全局对象
• 不能使用fn.caller和fn.arguments获取函数调用的堆栈
• 增长了保留字（好比protected、static和interface）
• 其中，尤为须要注意this的限制。ES6 模块之中，顶层的this指向undefined，即不该该在顶层代码使用this。

做者：苏日俪格 连接：https://www.jianshu.com/p/6c1b0e2b53c3 来源：简书 简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。