标题

1
2
3
4
5
6
7
8
9
10
11
12
13

# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

使用 # 号可表示 1-6 级标题，一级标题对应一个 # 号，二级标题对应两个 # 号，以此类推

段落

Markdown 段落没有特殊的格式，直接编写文字就好，段落的换行是使用两个以上空格加上回车

当然也可以在段落后面使用一个空行来表示重新开始一个段落

粗体斜体

1
2
3
4
5
6
7
8
9
10
11
12
13

*斜体*

_斜体_

**粗体**

__粗体__

***斜粗体***

___斜粗体___

分割线删除线

1
2
3
4
5
6
7
8
9
10
11
12
13

---------------------------------------------------------

---

-----

___

---

---

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西

1
2
3

~~删除线~~

如果段落上的文字要添加删除线，只需要在文字的两端加上两个波浪线~~即可

1
2
3

<u>下划线</u>

下划线可以通过 HTML 的 <u> 标签来实现

脚注

1
2
3

脚注[^脚注类似这样]

脚注是对文本的补充说明

1
2
3

[^脚注类似这样]: 对对对

列表

1
2
3
4

* 无序列表
* and

或者

1
2
3
4

+ s
+ d

或者

1
2
3
4

- s
- d

无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记，这些标记后面要添加一个空格，然后再填写内容

1
2
3
4
5

1. d
2. e
3. r

有序列表使用数字并加上 . 号来表示

列表嵌套只需在子列表中的选项前面添加四个空格即可

1
2
3
4
5
6
7

1. 1
    - ss
    - ss
    - e
2.  w

引用

1
2
3
4
5
6
7
8
9
10
11
12
13

> def
>
> end
>
> > d
> >
> > e
> >
> > > get
> > >
> > > end

Markdown 区块引用是在段落开头使用 > 符号 ，然后后面紧跟一个空格符号

区块是可以嵌套的，一个 > 符号是最外层，两个 > 符号是第一层嵌套，以此类推

区块中使用列表，正常使用即可

列表中使用区块，需要在 > 前添加四个空格的缩进

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

* 第一项

  > d
  > 菜鸟教程
  > 学的不仅是技术更是梦想

* 第二项

* >


* > d
  >
  > dd

* d

代码

段落上的一个函数或片段的代码可以用反引号把它包起来

1
2
3

`printf()`

代码区块使用 ``` 包裹一段代码，并指定一种语言（也可以不指定）符

1
2
3

```javascript
document.getElementByTagName("video")[0].click()

1
2
3
4
5
6
7
8
9
10
11

# 链接

```markdown

    [链接](https://www.runoob.com)

    <https://www.runoob.com>

    [1]:https://www.runoob.com

可以通过变量来设置一个链接，变量赋值在文档末尾进行[IT][1]

图片

1
2
3

![Oh](https://pics6.baidu.com/feed/72f082025aafa40f99cb5d63e6222f4679f019ca.jpeg?token=6d0ab25f666cf492c9ff83d037cb74e0)

表格

1
2
3
4
5
6
7
8
9

| b1   | b2   | b3   | b4   |
| ---- | ---- | ---- | ---- |
| d1   | d2   | d3   | d4   |

| b1   | b2   | b3   | b4   |
| :---- | ----: | :----: | ---- |
| d1   | d2   | d3   | d4   |

计算机网络

通信：互联网

• 主体：服务器、客户端浏览器
• 内容：内容
• 方式：响应方式

通信协议：通信遵循的规则约定|通信格式

超文本：网页内容

超文本传输协议：网页内容传输协议 HTTP协议客户端与服务器间进行网页内容传输时需遵守的传输格式 提交&响应

HTTP 请求

HTTP协议模型：请求/响应 交互模型

HTTP 请求消息

HTTP 请求报文

• 请求行：以空格分隔

  • 请求方式：GET、POST等
  • URL：域名之后的url部分
  • 协议版本

• 请求头部：以回车符&换行符分隔，以键值对组成，键值对以冒号分隔

  • Host：服务器域名

  • User-Agent：说明客户端的浏览器类型

  • Connection：客户端与服务器的连接方式

  • Content-Type：发送到服务器的数据格式

  • Content-Length：请求体大小

  • Accept：客户端可接受的返回数据类型

  • Accept-Language：客户端可接收的语言文本类型

  • Accept-Encoding：客户端可接受的内容压缩编码形式

• 空行：回车符or换行符

• 请求体：POST有、GET无

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

GET / HTTP/1.1
Host: www.baidu.com
Connection: keep-alive
Cache-Control: max-age=0
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
DNT: 1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.81 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: none
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cookie: BIDUPSID=028E86627DA4BB24A78F13047AE65439; PSTM=1628179856; BD_UPN=12314753; __yjs_duid=1_0275df3f717d1e5149c8d0bc2305f82d1628213742697; BAIDUID=D5D732CC5CBECD9277FA4AF82CF82B37:FG=1; BDUSS=JzeWVqZmpKdC1kRmFDN2VKRDl4R3d5YUR5WnJzVjV6dWRsdE5tSlotUXdNZGxoRVFBQUFBJCQAAAAAAQAAAAEAAACSPpQhzOy~1bXE1MYxMDAwMDEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADCksWEwpLFhQ3; BDUSS_BFESS=JzeWVqZmpKdC1kRmFDN2VKRDl4R3d5YUR5WnJzVjV6dWRsdE5tSlotUXdNZGxoRVFBQUFBJCQAAAAAAQAAAAEAAACSPpQhzOy~1bXE1MYxMDAwMDEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADCksWEwpLFhQ3; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; BAIDUID_BFESS=D5D732CC5CBECD9277FA4AF82CF82B37:FG=1; BD_HOME=1; H_PS_PSSID=35834_35106_31253_35765_35489_34584_35491_35871_35246_35905_35796_35316_26350_35884_35724_35879_35746; sug=3; sugstore=0; ORIGIN=0; bdime=0; BA_HECTOR=8004al2520258h0lb41h0s1c90q

HTTP 响应消息：HTTP 响应报文

• 状态行
  • 协议版本
  • 状态码：200等
  • 状态码描述
• 响应头部
• 空行
• 响应体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

HTTP/1.1 200 OK
Bdpagetype: 2
Bdqid: 0xbde875de000166a1
Cache-Control: private
Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html;charset=utf-8
Date: Thu, 17 Feb 2022 08:52:39 GMT
Expires: Thu, 17 Feb 2022 08:52:39 GMT
Server: BWS/1.1
Set-Cookie: BDSVRTM=302; path=/
Set-Cookie: BD_HOME=1; path=/
Set-Cookie: H_PS_PSSID=35834_35106_31253_35765_35489_34584_35491_35871_35246_35905_35796_35316_26350_35884_35724_35879_35746; path=/; domain=.baidu.com
Strict-Transport-Security: max-age=172800
Traceid: 1645087959064662324213684317064108533409
X-Frame-Options: sameorigin
X-Ua-Compatible: IE=Edge,chrome=1
Transfer-Encoding: chunked

请求方法

• GET 查询 - 获取服务器资源

请求数据放在数据头内

• POST 新增 - 提交资源

请求数据放在请求体内

• PUT 修改 - 提交新资源并替换
• DELETE 删除 - 移除资源

请求删除指定的资源

响应状态码

用于标识响应状态

三十进制：字，first类型，then细分

• 1** 信息：收到请并需继续操作（少见）
• 2** 成功：请求成功接收并处理
  • 200 OK 请求成功
  • 201 Created 已创建
• 3** 重定向：需进一步操作以完成请求
  • 301 Moved Permanently 永久移动 使用新URL
  • 302 Found 临时移动 仍使用原有URL
  • 304 Not Modified 未修改 会直接访问缓存内资源
• 4** 客户端错误：请求包含语法错误或无法完成请求
  • 400 Bad Request 语义有误or请求参数有误
  • 401 Unauthorized 需用户验证
  • 403 Forbidden 拒绝执行请求
  • 404 Not Found 无法找到资源
  • 408 Request Timeout 请求超时
• 5** 服务器错误：服务器处理请求出错
  • 500 Internal Server Error 服务器内部错误，无法完成请求
  • 501 Not Implemented 不支持请求方法
  • 503 Service Unavailable 服务器暂时无法处理：超载or系统维护

跨域与 JSONP

同源策略

同源：两页面协议、域名、端口相同

浏览器网页默认端口 80

同源策略：浏览器安全功能-限制来源同一个加载文档脚本与其他源资源的交互

• 阻止读取非同源网页的 cookie、localstorage 与 indexedDB
• 阻止接触非同源网页的 DOM
• 阻止向非同源地址发送 Ajax 请求

跨域：非同源

浏览器会拦截跨域请求回来的数据

JSONP

JSON 的一种使用模式，实现跨域数据访问

由于 script 标签允许请求非同源的 js 脚本

利用 script 标签请求，并传递一个回调函数名作为参数；服务器端把数据作为回调函数参数包装后返回；浏览器自动执行回调函数代码，即实现数据渲染

JSONP：兼容性好、只支持 GET 请求

CORS：支持 GET 与 POST，不兼容低版本浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="divCustomers"></div>
<script type="text/javascript">
  function callbackFunction(result, methodName) {
    var html = "<ul>";
    for (var i = 0; i < result.length; i++) {
      html += "<li>" + result[i] + "</li>";
    }
    html += "</ul>";
    document.getElementById("divCustomers").innerHTML = html;
  }
</script>
<script
  type="text/javascript"
  src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"
></script>

jQuery 实现用户端

采用动态创建与移除 script 标签：向 head 内添加 script 标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<div id="divCustomers"></div>
<script>
  $.getJSON(
    "https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?",
    function (data) {
      var html = "<ul>";
      for (var i = 0; i < data.length; i++) {
        html += "<li>" + data[i] + "</li>";
      }
      html += "</ul>";

      $("#divCustomers").html(html);
    }
  );
</script>

<script>
  $.ajax({
      url: 'https:www.sky.icu',
      dataType: 'jsonp', // 必需
      success: (res) => {
          console.log(e);
      },
      jsonp: 'callback'  // 发送至服务器参数名称：可选
      jsonpCallback: 'jQueryxxx',  // 自定义回调函数名称：可选
  })
</script>
<!-- 会自动带一个jQueryXXXX的回调函数名称 -->

服务器端

1
2
3
4
5
6
7
8
9

<?php
    header('Content-type: application/json');
    //获取回调函数名
    $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
    //json数据
    $json_data = '["customername1","customername2"]';
    //输出jsonp格式的数据
    echo $jsoncallback . "(" . $json_data . ")";
?>

节流

节流，就是指连续触发事件但是在 n 秒中只执行一次函数

减少事件触发频率

• 使得鼠标事件仅在单位时间内触发一次
• 降低监测滚动条位置的频率

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// 时间戳
function throttle(func, delay) {
  let prev = 0; // 上次触发时间
  return function (...args) {
    const now = Date.now();
    if (now - prev > delay) {
      last = now;
      func.apply(this, args);
    }
  };
}

// 定时器
function throttle(func, delay) {
  let timeout = null;
  return function (...args) {
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(this, args);
      });
    }
  };
}

防抖

防抖，就是指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

常用于搜索

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// 非立即执行
// 触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
function debounce(func, delay) {
  let timer = null; // 上次调用指向的计时器
  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 立即执行
// 触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果
function debounce(func, delay) {
  let timer = null;
  return function (...args) {
    if (timer) clearTimeOut(timer);
    const cal = !timer;
    timer = setTimeOut(() => {
      timer = null;
    }, delay);
    if (cal) func.apply(this, args);
  };
}

AJAX

Ajax 简介

AJAX = Asynchronous JavaScript And XML

1. 网页中发生一个事件（页面加载、按钮点击）
2. 由 JavaScript 创建 XMLHttpRequest 对象
3. XMLHttpRequest 对象向 web 服务器发送请求
4. 服务器处理该请求
5. 服务器将响应发送回网页
6. 由 JavaScript 读取响应
7. 由 JavaScript 执行正确的动作（比如更新页面）

Ajax 使用

XMLHttpRequest 对象用于同后台服务器交换数据

1
2
3
4
5
6
7
8
9
10
11
12
13

let request = new XMLHttpRequest();

request.open('POST', 'https://www.baidu.com', true);

request.setRequestHeader('Content-Type', 'application/json');

request.onreadystatechange = function() {
    if(this.readyState === 4 && this.status === 200) {
        console.log(this.responseText)
    }
}

request.send({});

• readyState 请求状态
  • 0：已创建对象未调用open方法
  • 1：已调用open方法
  • 2：已调用send方法已接收响应头
  • 3：数据接收中
  • 4：请求完成，数据接收完成或失败
• status 服务器响应状态
• responseText 请求返回的数据

请求数据类型 Content-Type

• application/x-www-form-urlencoded

url 末尾加， ? 接 = 连接的键值对， 以 & 分隔多个参数

https://www.baidu.com?id=1&name=Lily

中文字符等会进行 URL 编码

使用 decodeURL() 编码，encodeURL() 解码

Ajax 默认请求数据类型

• application/json

json 数据类型

• multipart/form-data

常用于上传文件

Ajax 新特性

• 设置请求时限

1
2
3
4
5
6

// 请求时限
request.timeout = 3000;
// 超时回调函数
request.ontimeout = (e) => {
    console.log(e);
}

• 使用 FormData 对象管理表单

1
2

let data = new FormData();
data.append('key', value);

• 上传文件

1
2
3
4
5
6
7
8

// 获取文件
let files = document.querySelector('input[type=file]').files;
// 检测文件是否已选中
if(files.length <= 0)
    return alert('ERROR');
// 创建 FormData 实例
let data = new FormData();
data.append('file', files[0]);

• 获取数据传输进度信息

1
2
3
4
5
6
7
8

request.upload.onprogress = function (e) {
    // lengthComputable 表示上传的资源是否具有可计算的长度
    if(e.lengthComputable) {
        // loaded 已传输的子节
        // total 需传输的总子节
        let percentComplete = Math.ceil((e.loaded / e.total) * 100);
    }
}

jQuery 的 Ajax

• $.ajax() 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

$('#button').on('click', function () {

    const files = $('#file')[0].files;
    if(files.length <= 0) {
        return;
    }

    const data = new formData();
    data.append('file', files[0]);

    $.ajax({
        method: 'POST',
        url: 'https://www.baidu.com',
        data: data,
        // 内容编码类型
        // 默认值: "application/x-www-form-urlencoded"
        contentType: false,
        // 是否进行url编码
        // 默认值: true
        processData: false,
        success: function (res) {
            console.log(res);
        },
    });

});

• $(document).ajaxStart() 方法

在 Ajax 请求发送前执行函数

1
2
3

$(document).ajaxStart(function () {
    $('#loading').show();
});

• $(document).ajaxStop() 方法

在 Ajax 请求结束执行函数

axios

专注于网络数据请求的库

目前最主流的

官方网站

• axios.get & axios.post

1
2
3
4
5
6
7
8
9
10
11
12

axios.get(url, params)
    .then(function (res) {
        // 处理成功情况
        console.log(res);
    })
    .catch(function (err) {
        // 处理错误情况
        console.log(err);
    })
    .then(function () {
        // 总是会执行
    });

axios.get(url[, config])

axios.post(url[, data[, config]])

• axios({})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// promise 语法
axios({
    url: '',
    method: '',
    params: {},    // GET 数据：url参数
    data: {},    // POST 数据：默认json参数对象
}).then(res => {
    // do something with res.data
});

// async-await 语法
const {data} = await axios({
    url: '',
    method: '',
    params: {},
    data: {},
});
// do something with data

正则表达式

正则表达式是使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串的搜索模式

语法

/正则表达式主体/修饰符(可选)

字符串方法

• search() 搜索字符串，返回匹配的字符串下标或-1

1

'123456'.search(/234/)   // 1

• replace() 替换匹配的字符串，返回修改后的字符串

1

'123456'.replace(/345/, 'abc')   // 12abc6

• split() 从指定位置分割字符串，返回一个数组
• match() 搜索字符串，返回由所有子串组成的数组或null

正则表达式修饰符

• i 忽略区别大小写
• g 执行全局匹配
• m 执行多行匹配

正则表达式元字符

• . 查找单个非换行符字符

• \d 查找数字

• \s 查找空白字符

• \b 匹配单词边界

• \w 查找数字、大小写字母及下划线

正则表达式量词

• n+ 匹配一个或多个字符串n
• n* 匹配零个或多个字符串n
• n? 匹配零个或一个字符串n
• ^ 匹配字符串开始(第一个字符)
• $ 匹配字符串结束(最后一个字符)

正则表达式括号

• [0-9] 匹配任何0-9数字
• [a-zA-Z] [A-z] 匹配任意大小写字母
• [abc] 查找[]内的任意字符
• [^abc] 查找[]外的任意字符
• (x|y) 查找()内任意选项

RegExp 对象及其方法

• test() 匹配字符串是否符合给定模式

返回一个布尔值

• exec() 匹配字符串中正则表达式的匹配

返回一个包含搜索结果数组，未查找到返回null

参考链接

MDN 正则表达式

菜鸟教程 正则表达式

W3school 正则表达式

基础

• 学习资料

初学时可以参考菜鸟教程及W3School文档

学习到一定程度后推荐使用MDN（特别是英文文档，因为中文文档存在更新不及时的情况）或参考相应的官方文档

• IDE

推荐使用 VSCode IDE

亦可使用 WebStorm IDE（可以申请学生版）

HTML

HTML 作为前端三件套之一，是非常重要的部分

学习角度来说，主要是掌握 HTML 的基本语法及常用元素，以及语义化标签的概念，此外，后续对一些 Web API 也需要有足够的了解，如 Web Storage API、Web Worker API、SVG 和 Canvas

CSS

CSS 作为前端三件套之一，是非常重要的部分

学习角度来说，主要是掌握 CSS 的选择器、盒模型、浮动布局、定位、弹性盒子布局、响应式设计等有足够的了解

JavaScript

JavaScript 作为前端三件套之一，是非常重要的部分

学习角度来说，主要是掌握 JavaScript 的基本语法，同时特别注意 JavaScript 的语言特性，并关注 ES6 的发展，此外还需要了解浏览器的 BOM 模型和 DOM 模型、浏览器事件机制、异步编程等方法

Ajax

Ajax 是前端中主流的物理请求方式，主要包括 XMLHttpRequest API 和 Fetch API 两种，此外可以了解一下前端常用的 axios 网络请求库

学习角度来说，主要是了解 XMLHttpRequest 的基本使用以及封装，Fetch 可以作为进阶了解

计算机网络基础

前端中计算机网络也是重要的一部分

学习角度来说，主要了解 OSI 七层网络模型与 TCP/IP 五层网络模型、HTTP 请求方法和请求头及响应头以及状态码、HTTP 协议及 HTTPS 协议、DNS 协议、TCP 协议与 UDP 协议、WebSocket 协议等

Git

Git 是编程领域中目前最主流的版本管理工具，基本上不管是日常开发还是工作开发都在广泛地使用 Git

同时，Github 作为全球最大的技术交流平台，积极参与社区建设也是很重要的一环

学习角度来说，主要了解一些 Git 的基本概念、一些 Git 的基本命令以及 GitHub 的基本操作

Node.js

Node.js 允许在浏览器之外的环境运行 JavaScript 代码

学习角度来说，主要了解 Node.js 的使用以及一些 Node.js 的常见模块

包管理工具

目前主流的包管理工具主要是 npm yarn pnpm

学习角度来说，主要了解 npm 的基本使用及常用指令；yarn 和 pnpm 与 npm 大同小异，可作为进阶内容了解

项目构建工具

目前主流的项目构建工具主要是 webpack vite

学习角度来说，两者都有必要学习，webpack 主要关注其基本概念，vite 主要关注其基本原理

Vue

Vue 框架是国内主流的前端框架之一，被一些中小互联网企业广泛使用

学习角度来说，学习 Vue 可以直接从 Vue3 composition API 开始，除了了解 Vue 的基本开发之外，还需要重点了 Vue 的基本原理，此外需要注意 Vue 的性能优化

TypeScript

TypeScript 是目前前端领域使用最广泛的 JavaScript 超集语言，主要是解决 JavaScript 弱语言的问题，增加了强大且自由的类型系统，在一些大型互联网公司的大型项目中使用非常广泛

学习角度来说，学习 TypeScript，类似与学习 JavaScript，主要是对语言特性的学习；但就 TypeScript 而言，不需要专门去了解类型体操

React

React 框架是国内主流的前端框架之一，被一些大型互联网企业广泛使用

学习角度来说，学习 React 可以直接从 React functional component 开始，除了了解 React 的基本开发之外，此外需要注意 React 的性能优化

参考

黑马程序员前端学习路线 个人比较推荐这个学习路线，更加突出重点
尚硅谷前端学习路线 个人觉得这个的内容非常全面，但需要注意没必要都学习其中的内容

我的个人博客正式开通啦！