Commit 6ef78fe7 authored by “liyan”'s avatar “liyan”

2024ly1月文章分享

parent 2b543f59
---
title: 说说那些我们在项目中无意识应用的设计模式!
date: 2023/10/26 19:48:20
tags:
- 前端
- javaScript
- vue
author: 李燕
---
作为一个前端开发,对于23种设计模式,大家或多或少都有一点了解。但是,在项目开发中,大家是否有意识地去选择合适的设计模式去应用呢?
说实话,写本篇文章之前我没有。
最近想着让自己代码能变得跟优雅一点,所以特意去看了一下设计模式。
才知道,我在项目中,已经无意识地应用了一些设计模式。
<!-- more -->
#### 第一个:策略模式
模式理解:策略模式定义了一系列算法或策略,并将每个算法封装起来。通过使用策略模式,可以在运行时根据需要选择不同的算法。
项目场景:页面中有多个tab,每个tab对应的数据接口都不相同,当时不想过多地使用if-else,然后就写下了如下图的代码。
![1.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f964eb17cfea4ac4a26bde339a0e6c49~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=848&h=497&s=60725&e=png&b=1f1f1f)
现在回过头来看此段代码,可不就是借鉴了策略模式的设计思想嘛。
策略模式通过将我们的`if`条件改写为一条条的策略减少了`if...else`的数量,看起来更清爽,扩展起来也更方便。
但是参照策略模式来讲,我这段代码还是有点瑕疵的:
1.用1、2、3...来代表策略名,阅读不友好
2.没有将策略名入参,不便于其他页面调用
#### 第二个:外观模式
模式概念:外观模式就是将模块一些内部逻辑封装在一个更高级的接口内部,或者将一些类似操作封装在一个方法内部,从而让外部调用更加方便。
项目场景:弹框中有多个表单项,大多表单项都需要在打开弹框时请求接口获取下拉值集。所以就将这些需要初始化的数据接口方法统一到一个方法中,如下图。
![2.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5cb1e6cd9a7243d596b3194be8e4ad22~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=567&h=356&s=52408&e=png&b=1f1f1f)
现在看来,图中代码写法正是体现了外观模式设计思想。
#### 第三个:备忘录模式
模式理解:备忘录模式类似于JS经常使用的缓存函数,内部记录一个状态,也就是缓存,当我们再次访问的时候可以直接拿缓存数据。
项目场景:系统中用户树数据多个页面和弹框中都有用到,所以做了缓存,如果缓存里有就从缓存里取,如果缓存被清除了,则请求接口。
![3.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bb71497516d2496dba7b11c128c4314f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=714&h=340&s=41266&e=png&b=1f1f1f)
这里的备忘录模式是用本地缓存实现的,如果不用本地缓存方式,也可以用闭包的方式实现。
```
export function getNewUserTreeData() {
 let cache = null
 return async function() {
   if(!cache) {
     const res = await getNewUserTree();
     cache = res
     return res || {};
  } else {
     return Promise.resolve(cache)
  }
}
}
// getUserData()方法无论调用多少次,均只请求一次接口
const getUserData = getNewUserTreeData();
getUserData();
getUserData();
```
#### 第四种: 单例模式
模式理解:单例保证一个类仅有一个实例,并提供一个访问它的全局访问点,主要用于管理全局变量,避免命名冲突和重复加载,同时也可以减少内存占用。
项目场景:代码中,我们经常以对象字面量的方式定义一个对象,供需要的地方使用。
![image-20230927092548449.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/46cd3ca0842647b5802b92e0f7e63f5a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=706&h=202&s=21789&e=png&b=1f1f1f)
对象字面量方式是最简单的单例模式,利用`ES6`的let和const不允许重复声明的特性天然实现。
以上就是我在项目中简单应用的一些设计模式,更多设计模式待后续观察与应用。
---
title: 页面切走再切回,el-tabs组件无法重置或指定选中tab终极解决方案
date: 2024/1/24 21:48:20
tags:
- 前端
- elementUI
- vue
author: 李燕
---
最近在Vue2+elementUI项目开发中,遇到一个奇怪的问题。
<!-- more -->
某个页面写有el-tabs组件,对el-tabs进行操作,使得当前选中的tab为第二个tab(即activeName='1'),页面切走,再切回来,重置activeName的值(即activeName='0'),但是页面上选中的tab仍为第二个tab。
代码写法如下:
```js
<template>
<el-tabs v-model="activeName" @tab-click="tabChangeClick">
<el-tab-pane label="待接受的" name="0"></el-tab-pane>
<el-tab-pane label="待执行的" name="1"></el-tab-pane>
</el-tabs>
</template>
<script>
export default {
name:'TaskList',
data() {
return {
activeName: '0'
}
}
watch: {
$route: function (newVal) {
// 因为页面默认有缓存,所以通过监听路由的方式重置页面数据
if (/task-manage\/sale-task-list/.test(newVal.path)) {
this.activeName = '0'
};
},
},
}
</script>
```
本来以为是el-tabs组件自身的bug,但目前只发现在上述场景中有问题,在其他场景下(比如说弹框打开重置activeName的值)就没有问题。
尝试找原因,但是始终未找到,不过在尝试的过程中,倒是找出了几种解决方案。
### **方案一**: 在destroyed()中重置activeName的值
其实一开始试过在activated()中重置activeName的值,但是和上述监听路由的方式一样不生效。就想着在页面打开的时候如果处理不了,是否可以在页面销毁的时候进行处理呢?然后就写下了如下代码:
```js
destroyed() {
this.activeName = '0'
}
```
结果一试是可以的。
但是这个方案有个缺点,那就是只能重置,不能在页面打开时,指定选中哪个tab。
### **方案二**: 改变name命名
因为页面有缓存,才导致页面切走再切回时保留了上次操作痕迹。那么我们去掉这个缓存,不就不会保留上次操作痕迹了。
去掉缓存最简单的方法,就是改变name命名。
上述代码中,有缓存的name命名如下:
```js
name:'TaskList',
```
更改后,无缓存的name命名如下:
```js
name:'TaskLis',
```
这样处理是可以的,但是和第一个方案存在相同的缺点,那就是只能重置,不能在页面打开时,指定选中哪个tab。
### **方案三**: 弃用el-tab组件,自己写一个
既然el-tabs在使用过程中有问题,又找不到完美的解决办法,那就只能弃用,自己写一个了。
代码如下:
```js
<div class="tab-wrap">
<div
v-for="item in tabOpts"
:key="item.name"
:class="item.name===activeName? 'tab active-tab': 'tab'"
@click="tabChangeClick(item)"
>{{item.label}}</div>
</div>
```
这样调整过后,页面切走再切回来,通过操作activeName的值,既能重置也能指定选中tab了。
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment