大家好,本人名叫苏日俪格,大家叫我 (格格) 就好,在上一章节中我们学到了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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
深入浅出ES6教程模块化的更多相关文章
-
深入浅出ES6教程『async函数』
大家好,本人名叫苏日俪格,大家叫我 (格格) 就好,在上一章节中我们学到了Symbol & generator的用法,下面我们一起来继续学习async函数: async [ə'zɪŋk]:这个 ...
-
[js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loade ...
-
[译]使用6to5,让今天就来写ES6的模块化开发!
http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...
-
使用6to5,让今天就来写ES6的模块化开发!
http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...
-
深入浅出ES6(十七):展望未来
作者 Jason Orendorff github主页 https://github.com/jorendorff 出于对文章长度的考虑,我们还保留了一些尚未提及的新特性,在最后的这篇文章中我会集 ...
-
深入浅出ES6(十五):子类 Subclassing
作者 Jason Orendorff github主页 https://github.com/jorendorff 在之前的文章<深入浅出ES6(十三):类 Class>中,我们一起深 ...
-
深入浅出ES6(十一):生成器 Generators,续篇
作者 Jason Orendorff github主页 https://github.com/jorendorff 欢迎回到深入浅出ES6专栏,望你在ES6探索之旅中收获知识与快乐!程序员们在工作 ...
-
深入浅出ES6(十):集合
作者 Jason Orendorff github主页 https://github.com/jorendorff 前段时间,官方名为“ECMA-262,第六版,ECMAScript 2015语言 ...
-
深入浅出ES6(八):Symbols
作者 Jason Orendorff github主页 https://github.com/jorendorff 你是否知道ES6中的Symbols是什么,它有什么作用呢?我相信你很可能不知道, ...
随机推荐
-
.NET 项目代码风格要求
原文:http://kb.cnblogs.com/page/179593/ 项目代码风格要求 PDF版下载:项目代码风格要求V1.0.pdf 代码风格没有正确与否,重要的是整齐划一,这是我拟的一份&l ...
-
iOS学习笔记-精华整理
iOS学习笔记总结整理 一.内存管理情况 1- autorelease,当用户的代码在持续运行时,自动释放池是不会被销毁的,这段时间内用户可以安全地使用自动释放的对象.当用户的代码运行告一段 落,开始 ...
-
Codeforces Round #265 (Div. 1) C. Substitutes in Number dp
题目链接: http://codeforces.com/contest/464/problem/C J. Substitutes in Number time limit per test 1 sec ...
-
Canvas中点到点的路径运动
/*随机生成两个点,然后以两点为端点,进行运动,主要使用了SetInterval,对画布进行不断的擦除描绘的操作*/1 <!DOCTYPE html> <html xmlns=&qu ...
-
C++的类为什么要用指针
这个问题原来是这样的: C++的对象和C#不同,C++的对象是放在栈区的,C#的对象是引用类型. 这就意味着,C++进行类型转换的时候,由于调用了复制构造函数,其转换后,对象会丢弃一部分信息. 派生类 ...
-
jQuery学习笔记—— .html(),.text()和.val()的使用
本节内容主要介绍的是如何使用jQuery中的.html(),.text()和.val()三种方法,用于读取,修改元素的html结构,元素的文本内容,以及表单元素的value值的方法.jQuery中为我 ...
-
Servlet.service() for servlet [jsp] in context with path [/Healthy_manager] threw exception [Unable to compile class for JSP] with root cause java.lang.IllegalArgumentException: Page directive: inval
严重: Servlet.service() for servlet [jsp] in context with path [/Healthy_manager] threw exception [Una ...
-
Python3的bytes和str之别
Python3不会以任意隐式的方式混用str和bytes,正是这使得:两者的区分特别清晰,在使用Python时不能拼接字符串和字节包,也无法搜索字节包里面的字符串(反之亦然),也不能讲字符串传入参数为 ...
-
ORACLE常用监控语句(未完待续)
--查询日志的切换频率 select t1.RECID as srecid ,t2.RECID as erecid ,t1.FIRST_TIME as stime ...
-
使用百度地图SDK出现的问题及解决方法
1. 第一个错误信息如下: java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.baiduma ...