深入浅出ES6教程模块化

Posted 2021-10-24 kelly-sunshine

大家好，本人名叫苏日俪格，大家叫我 （格格） 就好，在上一章节中我们学到了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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。