第三方库

名称	文档	简介
jQuery	官网：https://jquery.com/ 中文网：https://jquery.cuishifeng.cn/	操作DOM
Lodash	官网：https://lodash.com/docs 中文网：https://www.lodashjs.com/	工具函数
Animate.css	官网：https://animate.style/	CSS动画效果
Axios	官网：https://axios-http.com/zh/	网络请求
MockJS	官网：http://mockjs.com/	ajax拦截和模拟数据生成
Moment	官网：https://momentjs.com/ 中文网：http://momentjs.cn/	日期处理
ECharts	官网：https://echarts.apache.org/zh	图表📈
animejs	官网：https://animejs.com/	JS动画库
editormd	官网：https://pandao.github.io/editor.md	markdown编辑器
validate	官网：http://validatejs.org/	JS对象验证库
date-fns	官网：https://date-fns.org/	日期处理 支持tree shaking
zepto	官网：https://zeptojs.com/	操作DOM 对移动端支持更好
nprogress	官网：https://github.com/rstacruz/nprogress	进度条插件
qs	官网：https://github.com/ljharb/qs	解析url

对于第三方库，除了下载使用，还可以通过CDN在线使用。内容分发网络（Content Delivery Network）。

CDN站点：

• https://www.bootcdn.cn/

• Procdn（https://procdn.cn/）

• CloudFlare（https://dash.cloudflare.com/login?lang=zh-Hans-CN）

JQuery

• 官网：https://jquery.com/

• 中文网：https://jquery.cuishifeng.cn/

• CDN：https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js

// 获取类样式为container的所有DOM
const container = $(".container")

// 获取container后面的兄弟元素，元素类样式必须包含list
container.nextAll(".list");

// 删除元素
container.remove();

// 找到所有类样式为list元素的后代li元素，给它们加上类样式item
$(".list li").addClass("item");

// 为所有p元素添加一些style
$("p").css({ "color": "#ff0011", "background": "blue" });

// 注册DOMContentLoaded事件
$(function(){ 
	// ...
})

// 给所有li元素注册点击事件
$("li").click(function(){
  // ...
})

// 创建一个a元素，设置其内容为link，然后将它作为子元素追加到类样式为.list的元素中
$("<a>").text("link").appendTo(".list");

Lodash/es-toolkit(新)

内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数，帮助开发者降低JS使用难度。

• Lodash 简介 | Lodash中文文档 | Lodash中文网 (lodashjs.com)

• 官网：https://lodash.com/docs

• 中文网：https://www.lodashjs.com/

• CDN：https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js

编写框架或通用库用到Lodash

Animate/ ==Anime.js/GSAP/==

动画效果

• Animate.css | A cross-browser library of CSS animations.
• CDN：https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css

Hello Animate

animate.css中的动画对行盒无效

• 文档 | anime.js
• Three.js（3D）
• GreenSock Animation Platform (GSAP)

Axios/**Fetch **

基本使用

请求库，封装了网络请求

// 发送 get 请求到 https://study.duyiedu.com/api/herolist，输出响应体的内容
axios.get("https://study.duyiedu.com/api/herolist").then(resp=>{
  console.log(resp.data); // resp.data 为响应体的数据，axios会自动解析JSON格式
})

// 发送 get 请求到 https://study.duyiedu.com/api/user/exists?loginId=abc，输出响应体的内容
axios.get("https://study.duyiedu.com/api/user/exists", {
  params: { // 这里可以配置 query，axios会自动将其进行Url编码
    loginId: "abc"
  },
}).then(resp=>{
  console.log(resp.data); // resp.data 为响应体的数据，axios会自动解析JSON格式
})

// 发送 post 请求到 https://study.duyiedu.com/api/user/reg
// axios 会将第二个参数转换为JSON格式的请求体
axios.post("https://study.duyiedu.com/api/user/reg", {
  loginId: 'abc',
  loginPwd: '123123',
  nickname: '棒棒鸡'
}).then(resp=>{
  console.log(resp.data); // resp.data 为响应体的数据，axios会自动解析JSON格式
})

实例

axios允许开发者先创建一个实例，后续通过使用实例进行请求

这样做的好处是可以预先进行某些配置

// 创建实例
const instance = axios.create({
  baseURL: 'https://study.duyiedu.com/'
});

// 发送 get 请求到 https://study.duyiedu.com/api/herolist，输出响应体的内容
instance.get("/api/herolist").then(resp=>{
  console.log(resp.data); // resp.data 为响应体的数据，axios会自动解析JSON格式
})

拦截器

有时，我们可能需要对所有的请求或响应做一些统一的处理

比如，在请求时，如果发现本地有token，需要附带到请求头

又比如，在拿到响应后，我们仅需要取响应体中的data属性

再比如，如果发生错误，我们需要做一个弹窗显示

这些统一的行为就非常适合使用拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // config 为当前的请求配置
  // 在发送请求之前做些什么
  // 这里，我们添加一个请求头
  const token = localStorage.getItem('token');
  if(token){
    config.headers.authorization = token;
  }
  return config; // 返回处理后的配置
});

// 添加响应拦截器
axios.interceptors.response.use(function (resp) {
    //授权码  
    const token = resp.headers.authorization;
    if(token){
        localStorage.setItem("token",token);
    }
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return resp.data.data; // 仅得到响应体中的data属性
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  alert(error.message); // 弹出错误消息
});

MockJS

拦截不了fetch请求

Moment

日期处理（刚刚、十年前）但是量太大，可以用data

官网：https://momentjs.com/

中文网：http://momentjs.cn/

CDN：https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js

各种语言包：https://www.bootcdn.cn/moment.js/

ECharts

可视化

官网：https://echarts.apache.org/zh

CDN：https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js