webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add: JS预编译

Browse Source
This commit is contained in:
qianguyihao 2019-12-04 22:54:48 +08:00
parent d4741c9064
commit c2f9247e4a
7 changed files with 196 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
04-JavaScript基础/01-JS简介.md
View File

@ -177,7 +177,7 @@ ECMAScript在2015年6月，发布了ECMAScript 6版本（ES6），语言的能
> 也可以理解成：引入 js 代码，有哪几种方式。 > 也可以理解成：引入 js 代码，有哪几种方式。
方式1、内嵌的方式： **方式1**、内嵌的方式：
页面中，我们可以在`<body>`标签里放入`<script type=”text/javascript”></script>`标签对儿，并在`<script>`里书写JavaScript程序： 页面中，我们可以在`<body>`标签里放入`<script type=”text/javascript”></script>`标签对儿，并在`<script>`里书写JavaScript程序：
@ -201,7 +201,7 @@ text表示纯文本，因为JavaScript也是一个纯文本的语言。
PS：在Sublime Text里，输入`<sc`后，按tab键，可以自动补齐。 PS：在Sublime Text里，输入`<sc`后，按tab键，可以自动补齐。
方式2、引入外部的 JS 文件： **方式2**、引入外部的 JS 文件：
```html ```html
<!DOCTYPE html> <!DOCTYPE html>

142
04-JavaScript基础/02-变量.md
View File

@ -33,12 +33,17 @@
### 变量的定义和赋值 ### 变量的定义和赋值
在js中使用`var`关键字来声明一个变量。 - 在ES6之前，统一使用`var`关键字来声明一个变量。
- 在ES6及之后，统一使用 `const`、`let`关键字来声明一个变量。
变量举例如下： 变量举例如下：
```javascript ```javascript
var a = 100; var a = 100; // ES5语法
const b = hello; // ES6 语法
let b = world; // ES6 语法
``` ```
如下图所示： 如下图所示：
@ -147,7 +152,6 @@ implements、import、int、interface、long、native、package、private、prot
**在JS中一共有六种数据类型**： **在JS中一共有六种数据类型**：
- **基本数据类型（值类型）**：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。 - **基本数据类型（值类型）**：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。
- **引用数据类型（引用类型）**：Object 对象。 - **引用数据类型（引用类型）**：Object 对象。
@ -347,9 +351,9 @@ Undefined和任何数值计算的结果为NaN。NaN 与任何值都不相等，
键盘上的`+`可能是连字符，也可能是数字的加号。如下： 键盘上的`+`可能是连字符，也可能是数字的加号。如下：
``` ```
console.log("我" + "爱" + "你"); //连字符，把三个独立的汉字，连接在一起了 console.log("我" + "爱" + "你"); //连字符，把三个独立的汉字，连接在一起了
console.log("我+爱+你"); //原样输出 console.log("我+爱+你"); //原样输出
console.log(1+2+3); //输出6 console.log(1+2+3); //输出6
``` ```
输出： 输出：
@ -365,30 +369,30 @@ Undefined和任何数值计算的结果为NaN。NaN 与任何值都不相等，
举例1： 举例1：
```javascript ```javascript
var a = "1"; var a = "1";
var b = 2; var b = 2;
console.log(a + b); console.log(a + b);
``` ```
控制台输出： 控制台输出：
``` ```
12 12
``` ```
举例2： 举例2：
``` ```
var a = 1; var a = 1;
var b = 2; var b = 2;
console.log("a" + b); //"a"就不是变量了！所以就是"a"+2 输出a2 console.log("a" + b); //"a"就不是变量了！所以就是"a"+2 输出a2
``` ```
控制台输出： 控制台输出：
``` ```
a2 a2
``` ```
于是我们明白了，在变量中加入字符串进行拼接，可以被同化为字符串。【重要】 于是我们明白了，在变量中加入字符串进行拼接，可以被同化为字符串。【重要】
@ -401,14 +405,14 @@ Undefined和任何数值计算的结果为NaN。NaN 与任何值都不相等，
也就是说，`-`、`*`、`/`、`%``这几个符号会自动进行隐式转换。例如： 也就是说，`-`、`*`、`/`、`%``这几个符号会自动进行隐式转换。例如：
```javascript ```javascript
var a = "4" + 3 - 6; var a = "4" + 3 - 6;
console.log(a); console.log(a);
``` ```
输出结果： 输出结果：
```javascript ```javascript
37 37
``` ```
虽然程序可以对`-`、`*`、`/`、`%``这几个符号自动进行“隐式转换”；但作为程序员，我们最好自己完成转换，方便程序的可读性。 虽然程序可以对`-`、`*`、`/`、`%``这几个符号自动进行“隐式转换”；但作为程序员，我们最好自己完成转换，方便程序的可读性。
@ -423,14 +427,14 @@ true 和 false。主要用来做逻辑判断。
代码： 代码：
```javascript ```javascript
var a = true; var a = true;
console.log(typeof a); console.log(typeof a);
``` ```
控制台输出结果： 控制台输出结果：
``` ```
boolean boolean
``` ```
@ -467,7 +471,7 @@ null和undefined有最大的相似性。看看null == undefined的结果(true)
语句： 语句：
``` ```
a = b; a = b;
``` ```
把b的值赋给a，b不变。 把b的值赋给a，b不变。
@ -479,101 +483,101 @@ null和undefined有最大的相似性。看看null == undefined的结果(true)
举例1： 举例1：
``` ```
//a b c //a b c
var a = 1; //1 var a = 1; //1
var b = 2; //1 2 var b = 2; //1 2
var c = 3; //1 2 3 var c = 3; //1 2 3
a = b + c; //5 2 3 a = b + c; //5 2 3
b = c - a; //5 -2 3 b = c - a; //5 -2 3
c = a * b; //5 -2 -10 c = a * b; //5 -2 -10
console.log(a); console.log(a);
console.log(b); console.log(b);
console.log(c); console.log(c);
``` ```
输出： 输出：
``` ```
5 5
-2 -2
-10 -10
``` ```
举例2： 举例2：
``` ```
//a b c //a b c
var a = 1; var a = 1;
var b = 2; var b = 2;
var c = 3; //1 2 3 var c = 3; //1 2 3
a = a + b; //3 2 3 a = a + b; //3 2 3
b = b + a; //3 5 3 b = b + a; //3 5 3
c = c + b; //3 5 8 c = c + b; //3 5 8
console.log(a); //3 console.log(a); //3
console.log(b); //5 console.log(b); //5
console.log(c); //8 console.log(c); //8
``` ```
输出： 输出：
``` ```
3 3
5 5
8 8
``` ```
举例3： 举例3：
``` ```
//a b //a b
var a = "1"; var a = "1";
var b = 2; //"1" 2 var b = 2; //"1" 2
a = a + b; //"12" 2 a = a + b; //"12" 2
b = b + a; //"12" "212" b = b + a; //"12" "212"
console.log(a); //输出12 console.log(a); //输出12
console.log(b); //输出212 console.log(b); //输出212
``` ```
输出： 输出：
``` ```
12 12
212 212
``` ```
举例4： 举例4：
``` ```
//a b //a b
var a = "1"; var a = "1";
var b = 2; var b = 2;
a = b + a; //"21" 2 a = b + a; //"21" 2
b = b + a; //"21" "221" b = b + a; //"21" "221"
console.log(a); //21 console.log(a); //21
console.log(b) //221 console.log(b) //221
``` ```
效果： 效果：
``` ```
21 21
221 221
``` ```
举例5：（这个例子比较特殊，字符串减去数字） 举例5：（这个例子比较特殊，字符串减去数字）
``` ```
var a = "3"; var a = "3";
var b = 2; var b = 2;
console.log(a-b); console.log(a-b);
``` ```
效果：（注意，字符串 - 数值 = 数值） 效果：（注意，字符串 - 数值 = 数值）
``` ```
1 1
``` ```

28
04-JavaScript基础/03-变量的强制类型转换.md → 04-JavaScript基础/03-typeof和变量的强制类型转换.md
View File

@ -2,7 +2,33 @@
强制类型转换：将一个数据类型强制转换为其他的数据类型。 强制类型转换：将一个数据类型强制转换为其他的数据类型。
类型转换主要指，将其他的数据类型，转换为：String、Number、Boolean。你会把某个数据类型转换成 null 或者 undefined 吗？不会，因为这样做，没有意义。 类型转换主要指，将指定的数据类型，转换为：String、Number、Boolean。你会把某个数据类型转换成 null 或者 undefined 吗？不会，因为这样做，没有意义。
## typeof 运算符
> 我们先来讲一下 typeof，再讲类型转换。
`typeof()`表示“**获取变量的类型**”，返回的是小写，语法为：
```
typeof 变量
```
**返回结果**：
- `typeof 数值`的返回结果：number
- `typeof 字符串`的返回结果：string
- `typeof 布尔型`的返回结果：boolean
- `typeof undefined`的返回结果：undefined
- `typeof null`的返回结果：object
在JavaScript中，只要是数，就是 number 数值型的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是 number 类型的。
## 其他的简单类型 --> String ## 其他的简单类型 --> String

17
04-JavaScript基础/04-运算符.md
View File

@ -181,7 +181,7 @@ typeof就是典型的一元运算符，因为后面只跟一个操作数。
（1）正号不会对数字产生任何影响。比如说，`2`和`+2`是一样的。 （1）正号不会对数字产生任何影响。比如说，`2`和`+2`是一样的。
（2）我们可以对一个其他的数据类型使用`+`，来将其转换为number【小技巧】。比如： （2）我们可以对一个其他的数据类型使用`+`，来将其转换为number【重要的小技巧】。比如：
```javascript ```javascript
var a = true; var a = true;
@ -199,9 +199,15 @@ typeof就是典型的一元运算符，因为后面只跟一个操作数。
打印结果： 打印结果：
```
a：1
number
![](http://img.smyhvae.com/20181221_2050.png) -----------------
b：18
number
```
### 负号 `-` ### 负号 `-`
@ -426,7 +432,7 @@ PS：所以说，当你尝试去比较`"123"`和`"56"`这两个字符串时，
console.log("56" > "123"); // true console.log("56" > "123"); // true
``` ```
**因此**：当我们在比较两个字符串型的数字时，**一定一定要先转型**，比如 `parseInt()`。 **因此**：当我们在比较两个字符串型的数字时，**一定一定要先转型**再比较大小，比如 `parseInt()`。
（3）任何值和NaN做任何比较都是false。 （3）任何值和NaN做任何比较都是false。
@ -437,7 +443,7 @@ console.log("56" > "123"); // true
（1）`== `这个符号，还可以验证字符串是否相同。例如： （1）`== `这个符号，还可以验证字符串是否相同。例如：
``` ```
console.log("我爱你中国" == "我爱你中国"); //输出结果为true console.log("我爱你中国" == "我爱你中国"); // 输出结果为true
``` ```
（2）`== `这个符号并不严谨，会将不同类型的东西，**转为相同类型**进行比较（大部分情况下，都是转换为数字）。例如： （2）`== `这个符号并不严谨，会将不同类型的东西，**转为相同类型**进行比较（大部分情况下，都是转换为数字）。例如：
@ -525,10 +531,8 @@ console.log(isNaN(b)); //false
运算符的优先级如下：（越往上，优先级越高） 运算符的优先级如下：（越往上，优先级越高）
- `.`、`[]`、`new` - `.`、`[]`、`new`
- () - ()
- ++、-- - ++、--
@ -564,7 +568,6 @@ console.log(isNaN(b)); //false
备注：你在实际写代码的时候，如果不清楚哪个优先级更高，可以把括号运用上。 备注：你在实际写代码的时候，如果不清楚哪个优先级更高，可以把括号运用上。
## Unicode 编码表 ## Unicode 编码表
> 这一段中，我们来讲引申的内容：Unicode编码的使用。 > 这一段中，我们来讲引申的内容：Unicode编码的使用。

4
04-JavaScript基础/10-作用域.md
View File

@ -20,7 +20,7 @@
在全局作用域中： 在全局作用域中：
- 创建的**变量**都会作为window对象的属性保存。 - 创建的**变量**都会作为window对象的属性保存。比如在全局作用域内写 `var a = 100`，这里的 `a` 等价于 `window.a`。
- 创建的**函数**都会作为window对象的方法保存。 - 创建的**函数**都会作为window对象的方法保存。
@ -38,7 +38,7 @@
``` ```
打印结果：undefined。（说明变量 a 被 被提前声明了，只是尚未被赋值） 打印结果：undefined。（既然没报错，说明变量 a 被 被提前声明了，只是尚未被赋值）
举例2： 举例2：

80
04-JavaScript基础/10.2-预编译及变量提升详解.md Normal file
View File

@ -0,0 +1,80 @@
> 我们在上一篇文章《作用域》中简单讲过“变量提升”，今天来讲一下预编译，这对我们深入理解变量提升会有帮助。
## JavaScript 运行三部曲
- 语法分析
- 预编译
- 解释执行
## 预编译前奏
> 在讲预编译前，我们先来普及下面两句话。
### 两个规律
**规律1、任何变量，如果未经声明就赋值，此变量是属于 window 的属性**。（注意，无论在哪个作用域内赋值）
比如说，如果我们直接在代码里写 `console.log(a)`，这肯定会报错的，提示找不到 `a`。但如果我直接写 `a = 100`，这就不会报错，此时，这个 `a` 就是 `window.a`。
**规律2、一切声明的全局变量，全是window的属性**。（注意，我说的是在全局作用域内声明的变量，不是说局部变量）
比如说，当我定义 `var a = 200` 时，这此时这个 `a` 就是 `window.a`。
由此，我们可以看出：**window 代表了全局作用域**。
### 举例
掌握了上面两句话之后，我们再来看看下面的例子。
```javascript
function foo() {
var a = b = 100; // 连续赋值
}
foo();
console.log(window.a); // 在全局范围内访问 a
console.log(window.b); // 在全局范围内访问 b
```
上方代码的打印结果：
```
undefined
100
```
**解释**：
`var a = b = 100` 这行**连续赋值**的代码等价于 `var a = (b = 100)`，其执行顺序是：
（1）先把 100 赋值给 b；
（2）再声明变量 a；
（3）再把 b 的值赋值给 a。
我们可以看到，b 是未经声明的变量就被赋值了，此时，根据规律1，这个 b 是属于 `window.b`；而 a 的作用域仅限于 foo() 函数内部，不属于 window。所以也就有了这样的打印结果。
## 参考链接
- JavaScript预编译原理分析：<https://blog.csdn.net/q1056843325/article/details/52951114>
- <https://segmentfault.com/a/1190000018001871>
- 预编译及变量提升：<https://juejin.im/post/5aa6693df265da23884cb571>
- <https://juejin.im/post/5adaf8215188256712781830>
- <https://www.qqzmly.com/archives/1521>
- 宏任务&微任务相关：<https://segmentfault.com/a/1190000018134157>

2
18-推荐链接/02-GitHub项目推荐.md
View File

@ -10,6 +10,8 @@
- 优秀的JS代码规范：<https://github.com/ryanmcdermott/clean-code-javascript> - 优秀的JS代码规范：<https://github.com/ryanmcdermott/clean-code-javascript>
- 据说这个项目，是宝藏：<https://github.com/dexteryy/spellbook-of-modern-webdev>
## TS ## TS