mirror of
https://github.com/qianguyihao/Web.git
synced 2024-11-01 13:34:46 +08:00
add(VS Code配置): 突出显示成对的括号
This commit is contained in:
qianguyihao
parent
e6ef3c9113
commit
1482ea8b94
@ -579,7 +579,18 @@ VS Code 会根据你所打开的文件来决定该使用空格还是制表。也
|
||||
|
||||
打开设置项，搜索`files.trimTrailingWhitespace`，将选项勾选，即可在保存文件时自动删除行尾的空格。
|
||||
|
||||
#### 17、突出显示成对的括号
|
||||
|
||||
我们可以用不同颜色显示代码中成对的括号，并用连线标注括号范围。简称**彩虹括号**。
|
||||
|
||||
最早是通过`Bracket Pair Colorizer 2`插件支持的，但是这个插件已经被废弃了，，因为 VS Code 已经内置了该功能。我们可以通过 VS Code的如下配置项，达到效果：
|
||||
|
||||
```json
|
||||
{
|
||||
"editor.bracketPairColorization.enabled": true,
|
||||
"editor.guides.bracketPairs":"active"
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
> 接下来，我们来讲一些更高级的操作。
|
||||
@ -1236,16 +1247,10 @@ ES6 语法智能提示，支持快速输入。
|
||||
|
||||
### 4、代码显示增强插件
|
||||
|
||||
#### Bracket Pair Colorizer 2：突出显示成对的括号【荐】
|
||||
|
||||
`Bracket Pair Colorizer 2`插件：以不同颜色显示成对的括号，并用连线标注括号范围。简称**彩虹括号**。
|
||||
#### highlight-icemode：选中相同的代码时，让高亮显示更加明显
|
||||
|
||||
另外，还有个`Rainbow Brackets`插件，也可以突出显示成对的括号。
|
||||
|
||||
|
||||
#### highlight-icemode：选中相同的代码时，让高亮显示更加明显【荐】
|
||||
|
||||
VSCode 自带的高亮显示，实在是不够显眼。用插件支持一下吧。
|
||||
VSCode 自带的高亮显示，实在是不够显眼。可以用插件支持一下。
|
||||
|
||||
所用了这个插件之后，VS Code 自带的高亮就可以关掉了：
|
||||
|
||||
|
||||
@ -227,7 +227,7 @@ ECMAScript 在 2015 年 6 月，发布了 ECMAScript 6 版本（ES6），语言
|
||||
Brendan Eich 这位天才只用了10天就设计出了 JS，但这门语言当时更像是一个[大杂烩](https://wangdoc.com/javascript/basic/history)：
|
||||
|
||||
- 基本语法：借鉴 C 语言和 Java 语言。
|
||||
- 数据类型和数据结构：借鉴 Java 语言，包括将值分成原始值和对象两大类。
|
||||
- 数据类型和数据结构：借鉴 Java 语言，包括将值分成原始值和对象两大类。
|
||||
- 函数：借鉴 Scheme 语言和 Awk 语言，将函数当作第一等公民，并引入闭包。
|
||||
- 基于原型的继承机制：借鉴 Self 语言（Smalltalk 的一种变种）。
|
||||
- 正则表达式：借鉴 Perl 语言。
|
||||
@ -237,7 +237,6 @@ Brendan Eich 这位天才只用了10天就设计出了 JS，但这门语言当
|
||||
|
||||
十八世纪英国文学家约翰逊博士有一句名言说得好：“这个作品是好的，也是原创的，它的优秀之处并非原创，它的原创之处并不优秀。”（It is both good and original; but the part that is good is not original, and the part that is original is not good.）
|
||||
|
||||
|
||||
后来，随着ES6语法的不断改进，JS语言越来越优秀。ECMA 和 ECMAScript 赋予了 JavaScript 新的能力和活力。
|
||||
|
||||
### JavaScript 的发展：蒸蒸日上
|
||||
@ -289,11 +288,11 @@ JS正在越来越多的场景和环境中得到应用，具体包括：
|
||||
|
||||
### JavaScript 入门易学性
|
||||
|
||||
- JavaScript 对初学者比较友好。可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。
|
||||
- JavaScript 对初学者比较友好。可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。
|
||||
|
||||
- JavaScript 是有界面效果的（相比之下，C 语言只有白底黑字）。
|
||||
- JavaScript 是有界面效果的（相比之下，C 语言只有白底黑字）。
|
||||
|
||||
- JavaScript 的入门较简单（进阶不易）。比如，JS 是**弱变量类型**的语言，变量只需要用 var/let/const 来声明。而 Java 中变量的声明，要根据变量的类型来定义。
|
||||
- JavaScript 的入门较简单（进阶不易）。比如，JS 是**弱变量类型**的语言，变量只需要用 var/let/const 来声明。而 Java 中变量的声明，要根据变量的类型来定义。
|
||||
|
||||
Java 中需要这样定义变量：
|
||||
|
||||
@ -328,11 +327,11 @@ let c;
|
||||
|
||||
JavaScript 基础分为三个部分：
|
||||
|
||||
- **ECMAScript**：JavaScript 的**语法标准**。包括变量、表达式、运算符、函数、if 语句、for 语句等。
|
||||
- **ECMAScript**：JavaScript 的**语法标准**。包括变量、表达式、运算符、函数、if 语句、for 语句等。
|
||||
|
||||
- **DOM**：Document Object Model（文档对象模型），JS 操作**页面上的元素**（标签）的 API。比如让盒子移动、变色、改变大小、轮播图等等。
|
||||
- **DOM**：Document Object Model（文档对象模型），JS 操作**页面上的元素**（标签）的 API。比如让盒子移动、变色、改变大小、轮播图等等。
|
||||
|
||||
- **BOM**：Browser Object Model（浏览器对象模型），JS 操作**浏览器部分功能**的 API。通过 BOM 可以操作浏览器窗口，比如弹框、控制浏览器跳转、获取浏览器分辨率等等。
|
||||
- **BOM**：Browser Object Model（浏览器对象模型），JS 操作**浏览器部分功能**的 API。通过 BOM 可以操作浏览器窗口，比如弹框、控制浏览器跳转、获取浏览器分辨率等等。
|
||||
|
||||
通俗理解就是：ECMAScript 是 JS 的语法；DOM 和 BOM 是浏览器运行环境为 JS 提供的 API。
|
||||
|
||||
@ -342,7 +341,6 @@ JavaScript 基础分为三个部分：
|
||||
2、遵守ECMAScript 标准。
|
||||
3、单线程。
|
||||
|
||||
|
||||
## 参考链接
|
||||
|
||||
- [编程语言的一些概念](https://jameszhan.github.io/2014/09/25/programming-languages-concepts.html)
|
||||
@ -353,7 +351,6 @@ JavaScript 基础分为三个部分：
|
||||
|
||||
|
||||
|
||||
|
||||
- [汇编语言(转) | Xian Rong](https://xianrong.github.io/2017/11/14/%E6%B1%87%E7%BC%96%E8%AF%AD%E8%A8%80%28%E8%BD%AC%29/)
|
||||
|
||||
## 赞赏作者
|
||||
|
||||
@ -38,11 +38,11 @@ JS 代码的书写位置在哪里呢？这个问题，也可以理解成：引
|
||||
|
||||
解释：
|
||||
|
||||
- 可以将单行或少量 JS 代码写在 HTML 标签的事件属性中（以 on 开头的属性），比如放在上面的 `onclick`点击事件中。
|
||||
- 可以将单行或少量 JS 代码写在 HTML 标签的事件属性中（以 on 开头的属性），比如放在上面的 `onclick`点击事件中。
|
||||
|
||||
- 这种书写方式，不推荐使用，原因是：可读性差，尤其是需要编写大量 JS 代码时，很难维护；引号多层嵌套时，也容易出错。
|
||||
- 这种书写方式，不推荐使用，原因是：可读性差，尤其是需要编写大量 JS 代码时，很难维护；引号多层嵌套时，也容易出错。
|
||||
|
||||
- 关于代码中的「引号」，在 HTML 标签中，我们推荐使用双引号，JS 中推荐使用单引号。
|
||||
- 关于代码中的「引号」，在 HTML 标签中，我们推荐使用双引号，JS 中推荐使用单引号。
|
||||
|
||||
### 方式 2、内嵌式（内联式）
|
||||
|
||||
@ -68,11 +68,11 @@ JS 代码的书写位置在哪里呢？这个问题，也可以理解成：引
|
||||
|
||||
解释：
|
||||
|
||||
- text 表示纯文本，因为 JavaScript 代码本身就是纯文本。
|
||||
- tyue属性中的text 表示纯文本，因为 JavaScript 代码本身就是纯文本。当然，type属性可以省略，因为 JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
|
||||
|
||||
- 可以将多行 JS 代码写到 `<script>` 标签中。
|
||||
- 可以将多行 JS 代码写到 `<script>` 标签中。
|
||||
|
||||
- 内嵌式 JS 是学习时常用的书写方式。
|
||||
- 内嵌式 JS 是学习时常用的书写方式。
|
||||
|
||||
### 方式 3：外链式
|
||||
|
||||
@ -91,10 +91,11 @@ JS 代码的书写位置在哪里呢？这个问题，也可以理解成：引
|
||||
</html>
|
||||
```
|
||||
|
||||
**分析**：
|
||||
解释：
|
||||
|
||||
- 上面这段代码，依然是放到 body 标签里，可以和内嵌的 JS 代码并列。
|
||||
- 上方代码的 script 标签已经引入了外部 JS 文件，所以这个标签里面，不可以再写 JS 代码。
|
||||
- 上面这段代码，依然是放到 body 标签里，可以和内嵌的 JS 代码并列。
|
||||
- 上方代码的 script 标签已经引入了外部 JS 文件，所以这个标签里面，不可以再写 JS 代码。
|
||||
- 方式2和方式3不能混用。
|
||||
|
||||
**总结**：
|
||||
|
||||
@ -106,7 +107,9 @@ JS 代码的书写位置在哪里呢？这个问题，也可以理解成：引
|
||||
|
||||
上面的三种方式，有个共同的地方是：JS 代码都是写在 body 标签中的，准确来说，是在页面标签元素（比如 `title` 标签）的后面，在 `</body>`结束标签的前面。
|
||||
|
||||
为什么一般是按这样的顺序来写呢？这是因为：浏览器默认会**从上至下**解析网页（这句话很重要）。当你需要通过 JS 来操作界面上的标签元素时，假如将 JS 代码、`<script>`标签写到`<head>`标签中，或者写在页面标签元素的前面，那么这样的 JS 是无效的，因为标签元素在此时都还没来得及加载，自然无法操作这个元素。
|
||||
为什么一般是按这样的顺序来写呢？这是因为：浏览器默认遵循**HTML文档**的加载顺序，即按照**从上至下**的加载顺序解析网页（这句话很重要）。所以，通常情况下，我们会把JS代码写在 body 内部的末尾。
|
||||
|
||||
然而，当你需要通过 JS 来操作界面上的标签元素时，假如将 JS 代码或者`<script>`标签写到`<head>`标签中，或者写在HTML标签元素的前面，那么这样的 JS 是无效的，因为标签元素在此时都还没来得及加载，自然无法操作这个元素。
|
||||
|
||||
**重点来了：**当你**需要通过 JS 来操作界面上的标签元素**时，如果实在想把 JS 写到`<head>`标签中，那么就必须用 window.onload 将 JS 代码进行包裹。代码格式如下：
|
||||
|
||||
@ -123,20 +126,20 @@ JS 代码的书写位置在哪里呢？这个问题，也可以理解成：引
|
||||
|
||||
我们可以根据具体需要来决定，将 window.onload 写在 `<head>`标签中，或者写在`<script>`标签中。
|
||||
|
||||
### `<noscript> ` 标签：浏览器不支持JS脚本时的降级方案
|
||||
### `<noscript>` 标签：浏览器不支持JS脚本时的降级方案
|
||||
|
||||
`<noscript>` 标签是一种HTML标签，用于提供在浏览器禁用JavaScript或无法执行JavaScript脚本时的替代内容。它允许网页开发人员在需要时向用户显示备用内容。这有助于提高网站的可访问性和用户体验。
|
||||
`<noscript>` 标签是一种HTML标签，用于提供在浏览器禁用JavaScript或无法执行JavaScript脚本时的替代内容。它允开发者在需要时向用户显示备用内容。这有助于提高网站的可访问性和用户体验。
|
||||
|
||||
如果有些浏览器不支持 JS 脚本，或者用户禁用了浏览器的JS脚本（如下图），那么，该如何给用户提供一个友好的提示呢？我们可以通过 `<noscript>` 标签作为**降级**的处理方案。
|
||||
|
||||
|
||||
|
||||
|
||||
`<noscript>` 标签的基础语法：
|
||||
|
||||
```html
|
||||
<noscript>
|
||||
<!-- 降级方案：这里放置备用内容，当浏览器禁用 JS 或者浏览器不支持 JS 时将显示 -->
|
||||
<p>请启用JavaScript以获得最佳网站体验。</p>
|
||||
<!-- 降级方案：这里放置备用内容，当浏览器禁用 JS 或者浏览器不支持 JS 时将显示 -->
|
||||
<p>请启用JavaScript以获得最佳网站体验。</p>
|
||||
</noscript>
|
||||
```
|
||||
|
||||
@ -147,7 +150,7 @@ JS 代码的书写位置在哪里呢？这个问题，也可以理解成：引
|
||||
|
||||
## JavaScript 一些简单的语法规则
|
||||
|
||||
学习程序，是有规律可循的，程序会有有相同的部分，这些部分就是一种规定，不能更改，我们称之为：语法。我们先来了解一个简单的语法规则。
|
||||
学习编程语言，是有规律可循的，程序会有相同的部分，这些部分就是一种规定，不能更改，我们称之为：语法。我们先来了解一个简单的语法规则。
|
||||
|
||||
1、JS 对换行、缩进、空格不敏感。每一条语句以分号结尾。
|
||||
|
||||
@ -170,13 +173,17 @@ JS 代码的书写位置在哪里呢？这个问题，也可以理解成：引
|
||||
</script>
|
||||
```
|
||||
|
||||
2、每一条语句末尾要加上**分号**。虽然分号不是必须加的，但如果不写分号，浏览器会自动添加分号，导致消耗一些系统资源和性能，甚至有可能**添加错误**。
|
||||
2、每一条语句末尾建议加上**分号**。
|
||||
|
||||
3、所有的符号，都是英文的。比如**括号**、引号、分号。
|
||||
当存在换行符（line break）时，大多数情况下可以省略分号，JavaScript 会将换行符理解成“隐式”的分号，进而自动添加分号。
|
||||
|
||||
也就是说，分号不是必须加的，如果不写分号，浏览器会在换行符的位置自动添加分号，但是会消耗一些系统资源和性能，甚至有可能**添加错误**，导致一些奇怪的bug。
|
||||
|
||||
3、所有的符号都是英文的，比如括号、引号、分号。
|
||||
|
||||
如果你用的是搜狗拼音，**建议不要用 shift 切换中英文**（可以在搜狗软件里进行设置），不然很容易输入中文的分号；建议用 ctrl+space 切换中英文输入法。
|
||||
|
||||
4、JS 严格区分大小写。
|
||||
4、JS 严格区分大小写。HTML和CSS不区分大小写，但是 JS 严格区分大小写。
|
||||
|
||||
## 前端代码的注释
|
||||
|
||||
@ -218,12 +225,12 @@ JS 代码的书写位置在哪里呢？这个问题，也可以理解成：引
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
/* 我是 CSS 注释 */
|
||||
p {
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
color: red;
|
||||
}
|
||||
/* 我是 CSS 注释 */
|
||||
p {
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@ -241,8 +248,8 @@ JS 代码的书写位置在哪里呢？这个问题，也可以理解成：引
|
||||
|
||||
```js
|
||||
/*
|
||||
多行注释1
|
||||
多行注释2
|
||||
多行注释1
|
||||
多行注释2
|
||||
*/
|
||||
```
|
||||
|
||||
@ -269,7 +276,7 @@ VS Code --> 首选项 --> 键盘快捷方式 --> 查找“注释”这两个字
|
||||
|
||||
推荐阅读：
|
||||
|
||||
- 代码审查 review 指南：https://lib.jimmysong.io/eng-practices/review/
|
||||
- 代码审查 review 指南：<https://lib.jimmysong.io/eng-practices/review/>
|
||||
|
||||
## JavaScript 输出语句
|
||||
|
||||
@ -341,8 +348,8 @@ console.log(a);
|
||||
|
||||
**alert()和 prompt()的区别：**
|
||||
|
||||
- alert() 语句中可以输出数字和字符串，如果要输出字符串，则必须用引号括起来；prompt()语句中，用户不管输入什么内容，都是字符串。
|
||||
- prompt() 会返回用户输入的内容。我们可以用一个变量，来接收用户输入的内容。
|
||||
- alert() 语句中可以输出数字和字符串，如果要输出字符串，则必须用引号括起来；prompt()语句中，用户不管输入什么内容，都是字符串。
|
||||
- prompt() 会返回用户输入的内容。我们可以用一个变量，来接收用户输入的内容。
|
||||
|
||||
### 网页内容区域输出：document.write()语句
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user