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

深入浅出ES6教程模块化的更多相关文章

  1. 深入浅出ES6教程『async函数』

    大家好,本人名叫苏日俪格,大家叫我 (格格) 就好,在上一章节中我们学到了Symbol & generator的用法,下面我们一起来继续学习async函数: async [ə'zɪŋk]:这个 ...

  2. [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法

    什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loade ...

  3. [译]使用6to5,让今天就来写ES6的模块化开发!

    http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...

  4. 使用6to5,让今天就来写ES6的模块化开发!

    http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...

  5. 深入浅出ES6(十七):展望未来

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 出于对文章长度的考虑,我们还保留了一些尚未提及的新特性,在最后的这篇文章中我会集 ...

  6. 深入浅出ES6(十五):子类 Subclassing

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 在之前的文章<深入浅出ES6(十三):类 Class>中,我们一起深 ...

  7. 深入浅出ES6(十一):生成器 Generators,续篇

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 欢迎回到深入浅出ES6专栏,望你在ES6探索之旅中收获知识与快乐!程序员们在工作 ...

  8. 深入浅出ES6(十):集合

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 前段时间,官方名为“ECMA-262,第六版,ECMAScript 2015语言 ...

  9. 深入浅出ES6(八):Symbols

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 你是否知道ES6中的Symbols是什么,它有什么作用呢?我相信你很可能不知道, ...

随机推荐

  1. SmartSql Redis 分布式缓存

    安装 SmartSql.Cache.Redis Install-Package SmartSql.Cache.Redis Cache 配置 <Cache Id="T_Test.Redi ...

  2. 简单工厂模式(Simple Factory Pattern)

    简单工厂模式概述 定义:定义一个工厂类,他可以根据参数的不同返回不同类的实例,被创建的实例通常都具有共同的父类 在简单工厂模式中用于被创建实例的方法通常为静态(static)方法,因此简单工厂模式又被 ...

  3. Java的内存泄露

    Java的内存泄露 1.静态集合类引起内存泄漏 像HashMap.Vector等的使用最容易出现内存泄露,这些静态变量的生命周期和应用程序一致,他们所引用的所有的对象Object也不能被释放,因为他们 ...

  4. 2018-09-15 Java源码英翻中库以及服务原型

    服务很简单, 只为演示这个库, 源码在: program-in-chinese/code_translator_service. 在Postman测试效果: 演示服务地址: 74.91.17.250: ...

  5. SQL Server的Linked Server支持使用SEQUENCE吗?

    SQL Server的Linked Server支持使用SEQUENCE吗?   SQL Server 2012开始支持序列(SEQUENCE),今天遇到有个同事咨询,能否在LINKED SERVER ...

  6. 如何给Windows2016新建IIS并建立网站

    首先在菜单按钮旁右击-----点击Control Panel(控制面板) 点击Turn Windows features on or off 开始设置环境!!!!! 认真勾选参数!!! 然后点击安装! ...

  7. IM开发者的零基础通信技术入门(二):通信交换技术的百年发展史(下)

    1.系列文章引言 1.1 适合谁来阅读? 本系列文章尽量使用最浅显易懂的文字.图片来组织内容,力求通信技术零基础的人群也能看懂.但个人建议,至少稍微了解过网络通信方面的知识后再看,会更有收获.如果您大 ...

  8. WinServer配置MySQL主从同步

    为什么要配置主从同步? 如果一台数据库服务器挂了,还有一个备用 为了方便配置,我采用两台WinServer2003虚拟机: 1.前期准备工作:安装好镜像文件,VMTOOLS,MySQL5.5 我这里以 ...

  9. vs 2017

    Enterprise: NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Professional: KBJFW-NXHK6-W4WJM-CRMQB-G3CDH

  10. javaScript设计模式之面向对象编程(object-oriented programming,OOP)(一)

    面试的时候,总会被问到,你对javascript面向对象的理解? 面向对象编程(object-oriented programming,OOP)是一种程序设计范型.它讲对象作为程序的设计基本单元,讲程 ...