如何降低耦合度提高代码质量

前言代码耦合度是一个重要的概念,它影响着代码的可维护性、可扩展性和可重用性。什么是代码耦合?代码耦合是指软件系统中不同模块之间相互依赖的程度。当一个模块的改变会影响到其他模块时,我们称这些模块之间存在耦合关系。代码耦合度分为紧耦合和松耦合两种情况。紧耦合:模块之间关联度高,修改一个模块可能会影响到其他模块,代码难以重用和维护。松耦合:模块之间关联度低,修改一个模块不会影响到其他模块,代码易于重用和

- 阅读全文 -

前端工程化

前言在2010年前,前端只是一个项目的“附赠品”,对于整个项目来说他显得无关紧要,甚至没有前后端之分,但后来为了提升用户体验,工程师们不得不把界面和交互做的更加优美和便捷,于是前端慢慢地脱离出来变成了一个单独地岗位和方向。随着前端项目复杂度的提升,传统的前端开发方式(html+css+js)已经无法满足复杂多变的开发需求,因为无论是从开发效率、心智负担、时间成本等各个方面来看都是非常不划算的,于是

- 阅读全文 -

快速创建React项目

# 安装官方工具 npm install -g create-react-app # 执行安装命令 npx create-react-app react-app # 若要使用ts开发 npx create-react-app ts-react-app --template typescript # 进入项目目录 cd react-app # 本地运行 npm start

- 阅读全文 -

react中的useEffect是什么?什么情况下用?如何使用?

useEffect 是什么?useEffect 是 React 中的一个 Hook(钩子函数),用于处理副作用操作。副作用操作是指在组件渲染过程中,需要执行一些与渲染结果无关的操作,例如数据获取、订阅事件、手动操作 DOM 等。useEffect 的主要作用是在函数组件中执行这些副作用操作,并且可以在组件的生命周期中指定何时进行执行、何时进行清理。什么情况下使用 useEffect?通常在以下情况

- 阅读全文 -

网页文件加载失败如何重试(一)

本文主要讲解脚本文件加载失败时的处理背景在我们开发网站应用时,我们可能会遇到脚本加载失败的情况,导致脚本加载失败的原因有很多,比如用户的网络问题、终端设备问题、用户浏览器版本等诸多因素。解决方案在 JavaScript 中,我们可以创建一个监听来监听脚本加载失败的情况,然后针对加载失败的脚本进行重新加载。重新加载的方案,一般是通过更换域名来解决。我们给每个脚本添加一个映射关系表,用来在加载失败时匹

- 阅读全文 -

在vue中定义一个防抖ref

背景在vue的开发过程中,我们通常会使用到ref,但在我们需要对一个频繁的赋值操作做防抖操作时,我们通常只能通过编写一个独立的防抖函数来实现,这样相对会多一些步骤(麻烦一些)。例如我们给一个即时搜索框的input实现防抖输入(即在输入文本n秒之后才触发搜索,避免频繁请求后端接口浪费资源)时,我们不仅不能使用v-model,而且还要定义一个input事件和防抖函数,非常之繁琐。此时,我有一个简洁的方

- 阅读全文 -

文档流下载

文档流下载Excel、PPT、Word等文档流下载以下是一个简单的下载示例,具体配置根据使用的请求工具有所差异const downloadExcel = async () => { const typeMap = { "application/vnd.ms-excel": "xls", "application/mswor

- 阅读全文 -

如何更新项目依赖

在维护一些比较古老、时间线拉的特别长的项目时,可能会遇到项目依赖版本进行好几次迭代的情况。当项目依赖中出现了对项目特别有帮助的更新或者是一些bug fix,那我们可能就会想更新该依赖,但是这样有可能导致有些存在相互依赖关系的依赖出现问题,那这时,这个库就派上用场了。 npm-check-updates这个库可以检测出我们的package.json中哪些库已经过时并且可以更新# 全局安装 # npm

- 阅读全文 -

npm、yarn最新国内镜像

设置最新淘宝镜像源# npm npm config set registry https://registry.npmmirror.com #yarn yarn config set registry https://registry.npmmirror.com恢复官方默认镜像源# npm npm config set registry https://registry.npmjs.org #

- 阅读全文 -