- 博客(29)
- 收藏
- 关注
RSS订阅原创 前端策略模式使用
当出现很多 if else 或者 switch 的时候，我们就可以考虑是否能使用策略模式了。通过策略模式，我们可以把策略从业务代码中抽离出来，未来扩展的话无需深入到业务代码修改，只需要新增需要的策略，不会使得业务代码变得越来越臃肿。甚至策略模式也可以更好的进行复用，如果其他业务场景需要类似的策略，直接引入即可，和原有的业务相互独立。
2023-11-14 15:59:44
175
原创 循环中操作原数组的后果（长度变化）
这不明显遍历原数组不对，结果完全不一样了， forEach添加自身元素index不会被重置，会隐性让index自增，for offorEach循环操作原数组得出返回后的原数组都不准确。遇到一个很诡异的bug，地域树中子集的最前面加上全部选项，最后一颗树永远遍历不到。不要再for循环中操作原数组（长度相关）！不要再for循环中操作原数组（长度相关）！不要再for循环中操作原数组（长度相关）！
2023-03-03 11:46:34
418
原创 前端接口缓存实践
改成新的方案后，我发现每次进入某些页面时需要加载3、4个地域接口，并且会一直重复加载，然而地域数据更新的频率很低，于是我就想如果用数据缓存替代接口请求是不是也可以？前端性能优化涉及到很多方面，其中一条为减少http/https请求，前端缓存接口数据，在针对数据修改频率较低的场景中极为有效。原：地域请求获取全部的地域信息，比如一次性获取一棵省、市、区全部信息的地域树。现：地域请求根据父id获取子数组信息，比如传省id获取该省下的全部的市数据。加入缓存后，在缓存过期之前不会重复发起一样的请求。
2023-02-20 17:22:31
381
原创 Taro 项目拆分到多个分包后分包之间的redux状态共享
熟悉redux都知道普通的action函数返回的是一个对象，类似`{ type: "ADD", data: 10 }`，那么所有的分包想改变自身状态都需要通过`dispatch(action)`, 那么收集并维护一份最新的actions数组并在切换分包的时候去遍历执行所有的action，就可以实现同步分包之间的状态，大体的思路就是如此。
2022-09-13 16:50:37
739
翻译 react 排队一系列状态变化
可以通过在设置状态时传递更新程序函数来解决此问题。请注意替换如何修复“+3”按钮setScore(score + 1)。setScore(s => s + 1)如果您需要对多个状态更新进行排队，这很方便。
2022-06-21 16:56:20
169
原创 利用vue3+socket.io-client和nodejs+express+socket.io快速搭建一个加房间聊天功能(附demo源码地址)
nodejs+express+socket.io快速搭建服务器Express 应用程序生成器 可使用应用程序生成器工具 (express) 快速创建应用程序框架。安装生成器命令：$ npm install express-generator -g创建ejs模板引擎项目，名字为server：$ express -e server安装依赖：$ cd server$ npm install目录结构如下：启动服务：$ npm run start可以全局安装nodeom进行监控，
2022-02-28 17:54:45
2111
2
原创 vue中清除定时器的高阶方法
程序化的事件侦听器比如，在页面挂载时定义计时器，需要在页面销毁时清除定时器。这看起来没什么问题。但仔细一看 this.timer 唯一的作用只是为了能够在beforeDestroy 内取到计时器序号，除此之外没有任何用处。// vue2 代码中export default { data() { return { timer: null, } }, // 挂载 mounted() { this.timer = setInterval(() => {
2021-12-08 18:52:36
1080
原创 vue sass 组件样式穿透
vue中经常引入第三方组件，而第三方组件有时会无法满足需求，这时就需要自定义组件样式第一种方式，直接在全局样式修改，这种方式会全局覆盖修改后的组件样式// 全局style<style>.el-dialog__header { font-size: 24px;}</style>另一种情况我们不希望改变全局样式，那么可以在scoped中使用 深度选择器。这里用的sass预处理器，深度选择器 就使用 ::v-deep// 直接写在组件内部<st.
2021-11-19 16:22:39
2933
1
原创 ES6的Proxy和Reflect
一、Proxy概述 Proxy取其英文意思即“代理”。所谓代理，是你要取得某样东西或对其进行某些操作的中间媒介，而不是直接作用在这个对象上。Proxy 对象就是这样的媒介，要操作这个对象的话，需要经过这个媒介的同意。使用方式： let p = new Proxy(target,habdler); target：用 Proxy 包装的目标对象（可以是数组对象，函数，或者另一个代理）；handler：一个对象，拦截过滤代理操作的函数。let xiaohong = { name: "小红"
2021-11-15 11:36:38
303
原创 Vue3自定义指令
1. 自定义指令在main.js中定义自定义指令//main.js//省略其代码const app = createApp(App)app.directive('focus', { mounted (el, binding) { console.log(el, binding, '聚焦', el.nodeName); } })2.使用指令<input v-focus="'yyds'" />3.浏览器打印输出自定义指令钩子函
2021-11-11 17:46:57
974
原创 Vue动态绑定地址
Vue动态绑定动态绑定大家应该都了解就是v-bind，简写：简单的动态绑定url//data.js中const baseUrl = 'http://www.xxx.com';const urls= [ { url: `${baseUrl}/a.png`, }, { url: `${baseUrl}/b.png`, }, { url: `${baseUrl}/c.png`,
2021-11-08 11:33:57
1350
原创 vue3中的多模式和环境变量
多模式：模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：development 模式用于 vue-cli-service servetest 模式用于 vue-cli-service test:unitproduction 模式用于 vue-cli-service build 和 vue-cli-service test:e2e你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量(在pa
2021-11-05 10:22:59
2095
转载 JavaScript编码规范
类型基本类型: 直接存取基本类型。字符串 数值 布尔类型 null undefined…const foo = 1;let bar = foo;bar = 9;console.log(foo, bar); // => 1, 9复杂类型: 通过引用的方式存取复杂类型。对象 数组 函数…const foo = [1, 2];const bar = foo;bar[0] = 9;console.log(foo[0], bar[0]); // => 9,
2021-11-03 11:23:19
280
转载 使用nvm-windows控制nodeJs版本以及遇到的坑（下载过慢、切换版本等）
为了在windows系统中切换不同开发环境的nodeJs版本依赖。决定使用nvm-windows来管理nodeJs版本。安装步骤1、下载首先从nvm官网下载安装包 ，选择setup版本的，解压后里面是一个exe，安装方式就如同一个常见的exe安装包，双击运行即可。地址：https://github.com/coreybutler/nvm-windows/releases （进不去记得翻墙）2、无脑安装，默认就行，如果在安装nvm之前，电脑上就已经安装有node的，会看到如下图，询问你是否用nvm
2021-11-02 10:57:03
2359
原创 egg-socket.io官网文档的坑，连接的上socket但是后端无法通知到前端
不多说直接上代码// {app_root}/app/io/controller/default.js'use strict';const Controller = require('egg').Controller;class DefaultController extends Controller { async ping() { const { ctx, app } = this; const message = ctx.args[0]; await ctx.so
2021-10-10 19:41:53
951
原创 回流（重排）重绘
浏览器的渲染过程：1、解析html，生成DOM树，解析css生成CSSOM树2、将DOM树和CSSOM树结合，生成渲染树（Render Tree）3、Layout（回流）：根据生成的渲染树，进行回流，得到节点的几何信息（位置、大小等）4、Painting（重绘）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素5、Display：将像素发给浏览器的GPU（显卡），展示在页面上。生成渲染树过程具体做的事情：为了构建渲染树，具体做了以下事情例如：1、 从DOM树的根节点开始遍历
2021-06-30 01:22:24
120
原创 2021-06-27
JSONP学习笔记什么是jsonp动态创建script标签jsonp的优缺点什么是jsonpjsonp是利用src这个属性绕开同源策略，给服务器发送get请求，来实现跨域。动态创建script标签JSONP跨域的使用流程：*1、先去声明一个函数，这个函数有一个形参，这个形参会拿到我们想要下载的数据，使用这个参数做后续数据的处理2、在需要下载数据的时候，动态创建script标签，将标签src属性设置成，下载数据的链接3、当script插入到页面上的时候，就会，调用已经封装好的函数，将
2021-06-27 13:23:44
107
原创 mysql8.0.21的操作
多个版本的数据库mysql如何自由切换：在学习阶段下载了mysql8.0版本，和一些框架自带的mysql，如phpnow自带的mysql5.0版本，同时占领了同一个3306端口，作为小白不知该如何切换解决过程：因为同占一个端口号3306，所以二者只能存一，在使用其中一个mysql的时候关闭另一个mysql。打开关闭方法：1、开打任务管理器点击服务 [键盘ctrl+alt+del] 2、找到mysql 我自己有两个mysql，一个名字是mysql，一个是mysql5_pn。可以直接在这个界面
2020-09-12 12:44:51
150
原创 后代选择器和子元素选择器的区别
直接上案例，概念请走w3c[https://www.w3school.com.cn/css/css_selector_child.asp] 比如说只要选择class为box的li标签而不选到最内层的li标签该如何做？ 单纯用后代选择器很难做到吧！这时候子代选择器就出场了,可以这样写:<style> div > ul > li{ 注：>是指只能一代接一代，比如：div > ul > li }</style> 如果想选择div中所有l
2020-07-30 22:16:35
227
原创 前端 animation 动画（用的到的都写了）直接用animate库最方便用法加粗了
<!--建议直接复制丢到vscode去看，很清楚--><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>Document</title>...
2020-07-27 22:25:08
1325
翻译 前端能用BFC规则解决的一些常见问题---如margin叠加、margin的传递、浮动问题、覆盖问题。
<!--最好直接复制代码丢到vscode中，都是小案例＋解析--><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>Document</ti...
2020-07-26 01:05:54
333
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人