第一章：组件常用HooK
React 组件支持 class、function 两种形式，但现在绝大多数情况下我们都是写 function 组件了。 官方文档也已经把 class 组件的语法划到了 legacy（遗产）的目录下： 所以说，除非你维护的代码里有历史代码用了 class 组件，否则就没必要看那些用法了。 而 function 组件主要是学习各种 hook 的使用。…
纯前端实现文本转语音功能
今天给大家分享一个开源项目 vits-web[1]，只需使用 JavaScript 编写几行代码就可在 Web 浏览器中实现文本转语音功能，无需依赖服务器。该项目于上周刚开源（对于前端人更友好）。 使用 事前准备：开始之前可以使用 CRA[2] 或 Vite[3]&nb…
如何调试网页的 JS（以 React 为例）
上节我们知道了什么是调试、调试的原理，这节我们开始学习调试工具的使用。 首先从网页的 JS 调试开始。 我们以 React 项目为例，用 create-react-app 创建一个 react 项目： yarn create react-app test-react-debug 进入项目目录，执行 npm run start。 它会启动一…
初识调试
VSCode深度配置 – setting.json
uniapp+videojs 在app上点击全屏不能横屏的问题
uniapp+videojs在app端播放m3u8视频流
作为前端开发，调试是每天都会接触的概念。你觉得什么是调试呢？ 有同学说，我用 Chrome DevTools 调试网页，可以查看元素，网络请求，断点运行 JS，用 Performance 工具分析性能等，这是网页的调试。 有同学说，我用 VSCode Debugger 调试 Node.js，可以同时调试多个进程的代码。这是 Node.js 的调试。…
看完本文，你将 让你的 VSCode 打字流畅度提升 114 倍 不同工程使用各自的项目配置、插件 更加美观的自定义窗口 更加智能代码提示、替换 更加清晰的代码块结构，能一目了然地看出嵌套关系 删掉那些标题党推荐的无用插件，使用 VSCode 自带的功能 自定义代码颜色，VSCode 主题 现况概要 我每天逛各种社区，看到的关于 VSCode 的文…
上一篇文章写出了如何在app上使用uniapp+videojs播放m3u8视频流的方法，但是实际使用后发现点击全屏按钮不会自动横屏，在网上找到了两种解决办法 方法一： 在引入videojs的后面引入 videojs-landscape-fullscreen.min.js <script src="//path/to/video.min.js"…
uniapp使用videojs在h5上播放m3u8的案例有很多，但是在app上并不能正常播放，本文将给出一个在app上播放的案例。 实现方式就是通过uniapp的webview内嵌一个h5，以下就是h5的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m…
如何阅读本调试小册
众所周知，阅读源码是前端进阶的一种方式，但很多同学不会使用调试工具，不知道该怎么高效的阅读源码。市面上也没有课程专门讲调试的，而这门课程就是弥补这个领域的空白。 我们会学习网页、Node.js 的调试，还会学习调试工具的实现原理。 课程主要分为四部分内容：用 VSCode Debugger 调试网页的 JS、用 VSCode Debugger 调试…
Vue3：第十五章(终结) 升级你的前端框架
前面的章节中我们已经介绍了Typescript的相关内容，相信经过前面的学习，现在的你已经可以入手Vue3的开发了，当一个项目开发完成后，不代表我们的前端工作也就结束了，开发的最终目的是为了用户服务的，前端是与用户直接交互的部分，我们需要考虑到用户体验的方方面面，所有可能影响到用户体验的部分都是我们需要进行优化的目标，本节我们就来聊一聊前端优化的问…
Vue3：第十四章 怎样使用typescript来规范你的代码?
前面的几个章节中，我们已经介绍了Vue3全家桶的路由，数据和网络请求部分，这些功能都可以在我们的开发中起到明显的作用，丰富我们的框架能力。而本节中，我们要介绍的内容对开发来说，并不能增加功能性的收益，但是在语言层面，却可以帮助我们提高代码的可维护性和可读性，这就是给前端代码添加强类型的语言——TypeScript。 为什么要引入TypeScript…