进入GitHub项目仓库（欢迎star和提pr）
1. 搜索功能的实现
- 搜索框实现了防抖功能。
- 输入过程中对suggest词进行高亮显示功能。
2. 视频列表相关功能
- 通过vue-lazyload模块实现视频列表封面的懒加载。
- 二次封装了better-scroll组件，实现了视频列表的滚动加载功能，主要实现方式是通过监听滚动长度和列表当前长度的差距，当监听到差值为0时，发送请求并将获取到的视频列表追加到当前列表。
3. 关于页面中需要请求多个api问题
在一个场景中，需要页面请求多个接口，并且按顺序返回得到相应数据，当大家都知道发送的请求一般来说都是异步请求，所以，可以通过Promise.all方法去达到这个要求，将每个请求封装成一个个的promise对象，然后存入一个含有iterator接口的集合对象中，例如Array数组，再传递如Promise.all中，当全部的Promise状态变为Fulfilled时，则触发promise.all对象的resolve方法并改变状态为Fulfilled，如果其中一个promise状态为Rejected，则会将该实力的结果传递到你的回到中，如果改promise对象自身实现了catch方法，那么他被Rejected时不会被promise.all接受。
参考文章： 深入理解Promise.all
4. 动态路由组件缓存问题
当需要多个页面复用同一个组件时，会导致无法缓存组件问题，也就是每一次重新打开该组件，该复用组件的值都会被重新覆盖，当再一次访问上一个访问过的内容时，会重新发送请求。这也就是动态路由组件切换缓存的问题。解决方法是通过在router-view中设置key属性，对每次路由切换的组件进行缓存，对复用的组件进行唯一表示，就不会覆盖原来的组件导致无法缓存问题了。
参考文章： VUE router-view key 属性解释
5. 关于项目中使用的接口获取和使用问题
- 首先，api主要来源于B站官方api，而这些api，部分来源于第三方他人维护的文档中直接拿来使用的，还有一部分由于自身项目需求，自己从官方网站中爬取的api，因此项目一开始从数据来源问题，就遇到的困难，很多api需要自己去调取。
- 在一开始请求这些api的时候，发现这些请求链接的服务器端都设置了防盗链，也就导致其它服务器无法请求此服务器的api接口，其主要原理是通过请求头中的referer字段的值，而该字段的值就是发送请求的服务器地址，所以通过判断该请求是否为网站自身的服务器地址或者该地址是否保存在服务器中的白名单中，做出相应的服务器响应动作。破解防盗链的方法是通过设置发送请求方网站的meta标签，设置在发送请求时不携带referer，即使referer字段值为null，此时接受请求的服务器无法判断是通过浏览器输入地址访问的还是其他网站访问的，就可以获取到该服务器的响应了，浏览器手动输入url发送请求是referer值也为null。
参考文章：
6. 移动端适配问题
这里只说明本项目中使用的适配方案：
- 通过设置meta标签中的viewport值。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- 使用rem相对单位设置页面元素的大小，rem是相对于根元素<html>标签上的font-size属性进行计算的，所以使用rem单位的核心是设置正确的font-size值。并且配合淘宝的适配方案flexible，通过px2rem模块将px自动转换成rem单位元素。而flexible的计算font-size方法就是通过获取dpr的方式，进行换算得到当前设备合适的font-size。而px2rem的实现，是通过dpr和px单位下的值进行换算得出。
- 关于1px像素问题，这里是通过css实现的scale让边框内卷0.5倍的一个方式实现的。
参考文章：
7. DNS预解析方案
在页面上设置
<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://api.bilibili.cn" />
<link rel="dns-prefetch" href="https://www.bilibili.com" />
首先告诉浏览器当前页面需要DNS预解析，然后再对域名进行强制解析，通过link标签来强制对域名进行解析。然后呢当发送请求时，就会先在浏览器缓存中查找是否缓存了该域名的ip地址，如果有则返回，完成解析，否则继续到系统缓存中查找，主要在C盘的host文件中查找是否缓存了对应域名的ip地址，如果依旧没有，则继续到路由缓存中查找，然后到DNS缓存服务器中查照。本机向本地服务器中查找一般是通过递归的方式，而从本地域名服务器向根服务器则是通过迭代查找，两者的区别在于，递归只需要发送一次查找请求，而迭代则需要发送多次。
参考文章：
8. 关于PWA技术支持
参考文章：
9. Webpack打包优化
本项目使用了webpack4版本
- uglifyjs-webpack-plugin：压缩项目中的js文件。
- extract-text-webpack-plugin：将css代码从js文件中抽离出来，单独出一个模块。
- html-webpack-plugin：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题。
- happlypack：将文件解析任务分解成多个子进程并发执行。子进程处理完任务后再将结果发送给主进程。所以可以大大提升 Webpack 的项目构件速度。
参考文章：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
