深入浅出ES6教程模块化

最新推荐文章于 2024-10-23 09:17:04 发布

weixin_30387423

最新推荐文章于 2024-10-23 09:17:04 发布

阅读量95

点赞数

原文链接：http://www.cnblogs.com/kelly-sunshine/p/10767791.html

版权

大家好，本人名叫苏日俪格，大家叫我 （格格） 就好，在上一章节中我们学到了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。