深入浅出ES6教程模块化

大家好,本人名叫苏日俪格,大家叫我 (格格) 就好,在上一章节中我们学到了Promise的用法,下面我们一起来继续学习模块化:

JavaScript本身是不支持模块化的,只不过后来一些社区的大佬制定了一个模块规范,主要分为两种,一个是用于服务器的CommonJs,比如nodeJs中的require;另一个是用于客户端的AMD,比如requireJs。后来ES6提供了通用的模块化方案:
ES6专门提供了importexport这两个小可爱

小白:那么它们都是用来做什么的呢?怎么用的呢?
格格:首先要开启服务器,整个流程是在服务器下进行的,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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

转载于:https://www.cnblogs.com/kelly-sunshine/p/10767791.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值