Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
Y
yifu-study-front-share
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
CI / CD
CI / CD
Pipelines
Schedules
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
yifu-study
front
yifu-study-front-share
Commits
6ef78fe7
Commit
6ef78fe7
authored
Jan 25, 2024
by
“liyan”
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
2024ly1月文章分享
parent
2b543f59
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
193 additions
and
0 deletions
+193
-0
说说那些我们在项目中无意识应用的设计模式! .md
source/_posts/说说那些我们在项目中无意识应用的设计模式! .md
+90
-0
页面切走再切回,el-tabs组件无法重置或指定选中tab终极解决方案 .md
source/_posts/页面切走再切回,el-tabs组件无法重置或指定选中tab终极解决方案 .md
+103
-0
No files found.
source/_posts/说说那些我们在项目中无意识应用的设计模式! .md
0 → 100644
View file @
6ef78fe7
---
title
:
说说那些我们在项目中无意识应用的设计模式!
date
:
2023/10/26 19:48:20
tags
:
-
前端
-
javaScript
-
vue
author
:
李燕
---
作为一个前端开发,对于23种设计模式,大家或多或少都有一点了解。但是,在项目开发中,大家是否有意识地去选择合适的设计模式去应用呢?
说实话,写本篇文章之前我没有。
最近想着让自己代码能变得跟优雅一点,所以特意去看了一下设计模式。
才知道,我在项目中,已经无意识地应用了一些设计模式。
<!-- more -->
#### 第一个:策略模式
模式理解:策略模式定义了一系列算法或策略,并将每个算法封装起来。通过使用策略模式,可以在运行时根据需要选择不同的算法。
项目场景:页面中有多个tab,每个tab对应的数据接口都不相同,当时不想过多地使用if-else,然后就写下了如下图的代码。

现在回过头来看此段代码,可不就是借鉴了策略模式的设计思想嘛。
策略模式通过将我们的
`if`
条件改写为一条条的策略减少了
`if...else`
的数量,看起来更清爽,扩展起来也更方便。
但是参照策略模式来讲,我这段代码还是有点瑕疵的:
1.
用1、2、3...来代表策略名,阅读不友好
2.
没有将策略名入参,不便于其他页面调用
#### 第二个:外观模式
模式概念:外观模式就是将模块一些内部逻辑封装在一个更高级的接口内部,或者将一些类似操作封装在一个方法内部,从而让外部调用更加方便。
项目场景:弹框中有多个表单项,大多表单项都需要在打开弹框时请求接口获取下拉值集。所以就将这些需要初始化的数据接口方法统一到一个方法中,如下图。

现在看来,图中代码写法正是体现了外观模式设计思想。
#### 第三个:备忘录模式
模式理解:备忘录模式类似于JS经常使用的缓存函数,内部记录一个状态,也就是缓存,当我们再次访问的时候可以直接拿缓存数据。
项目场景:系统中用户树数据多个页面和弹框中都有用到,所以做了缓存,如果缓存里有就从缓存里取,如果缓存被清除了,则请求接口。

这里的备忘录模式是用本地缓存实现的,如果不用本地缓存方式,也可以用闭包的方式实现。
```
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();
```
#### 第四种: 单例模式
模式理解:单例保证一个类仅有一个实例,并提供一个访问它的全局访问点,主要用于管理全局变量,避免命名冲突和重复加载,同时也可以减少内存占用。
项目场景:代码中,我们经常以对象字面量的方式定义一个对象,供需要的地方使用。

对象字面量方式是最简单的单例模式,利用
`ES6`
的let和const不允许重复声明的特性天然实现。
以上就是我在项目中简单应用的一些设计模式,更多设计模式待后续观察与应用。
source/_posts/页面切走再切回,el-tabs组件无法重置或指定选中tab终极解决方案 .md
0 → 100644
View file @
6ef78fe7
---
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了。
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment