Wiidede's blog Wiidede's blog
  • 前端
  • Python
  • 算法
  • 生活
  • 其他
  • 分类
  • 标签
  • 归档
  • 关于我
  • 赞赏
  • 我的小站 (opens new window)
GitHub (opens new window)

Wiidede

小的的写前端
  • 前端
  • Python
  • 算法
  • 生活
  • 其他
  • 分类
  • 标签
  • 归档
  • 关于我
  • 赞赏
  • 我的小站 (opens new window)
GitHub (opens new window)
  • 整理一些css样式
  • vue隔代组件层层动态插槽并且附带数据
  • vue判断字符串是否溢出来显示弹窗、解决el-table tooltip 内过多导致无法显示,内容闪烁
  • 整理一些js写法
  • ElementUI timePicker 增加此刻按钮 引发的dom操作的学习
  • 毕业设计(水表识别)前端知识整理
  • html小知识
  • axios请求api然后下载文件
  • vue3+ts根据高度改变元素的透明度
  • vue3 + ElementPlus 换肤方案(Css变量)
  • Moment的一些使用方法
  • echarts基础vue组件
  • element UI el-date-picker 年月日切换组件
  • 可以不选择的el-radio单选框
  • vue的小技巧总结
  • 全局动态权限判断(Vue指令)
  • vue-anchor 探索
  • Deep Dive with Evan You 笔记
  • 前端基础知识查漏补缺
  • WebPack 知识总结
  • 我写的一些可以日后参考的代码
  • 接口变化后,封装接口函数,改变返回内容
  • 项目组件整理
  • 前端框架设计想发
    • 项目服务器时间
    • 项目全局状态刷新
    • 项目权限管理
  • 全局进度条
  • 带有token的图片vue组件:authImg,使用axios下载图片
  • 前端npm包推荐
  • 给ElInputNumber添加prefix
  • ElPagination添加页数总数
  • el-tab做成chrome类似的tab样式
  • vue-grid-layout-组件配置
  • 项目数据字典封装
  • 图表组件响应式探索
  • ElementPlus表格table列自动合并composition
  • 简单的curd组件封装
  • ElementPlus表格自定义合计列composition
  • 一些处理表格数据composition api
  • div内容溢出后,内容向左悬浮,vue组件封装
  • 文本数字溢出后,按比例缩小,vue组件封装
  • 表格使用async-validator检验composition
  • ElementPlus Form一些简单的组件整合
  • arco-design快速使用tailwind的颜色、unocss动态颜色
  • 前端
wiidede
2022-06-09

前端框架设计想发

# 前端框架设计想发

# 项目服务器时间

我最开始接触到的服务器时间的想法是,获取到后,不断+1s。

但是其实没有那么麻烦,获取到后,记录一下本地时间与服务器时间的差值,然后保存到全局状态中,获取的时候用本地时间加上这个差值就可以了。

# 项目全局状态刷新

项目有一个需求是在导航栏上加一个刷新器,用户可以选择没多少时间刷新页面的数据。

我接触到的时候,发现好多组件自己在维护setInterval,然后项目中不同页面的组件就有很多重复的代码,写的也比较多。

我的想法就是可不可以放到全局状态中,在状态管理工具中维护setInterval,需要刷新的页面只需要监听全局状态中的一个值就行了。

然后就是切换页面的时候,需要重置刷新时间间隔到默认值,现在项目都是写在每个组件中,虽然一个路由对应一个组件,但是有时候一个菜单下面有多个路由,会导致切换的时候,刷新时间间隔就被重置了,我的想法是,可不可以放到点击导航栏的回调函数中。

# 项目权限管理

我之前写过一篇动态权限管理的文章,背景是已经定了v-has这个自定义指令,就是在初始化的时候判断有没有权限,如果就保留元素,如果没有就移除元素。如果现在后端通过websocket推送了权限变化的消息,我是无法更新的,然后为了尽可能少的修改项目中的代码,我就建了一个Map,在bind时把元素与权限信息关联。然后权限变化,遍历Map,实现类似于v-if的效果。

我在想这样做之后,如果项目中有很多v-has甚至在列表中循环渲染了好多遍,那么我的Map应该也是比较庞大的吧。

如果不是非要用自定义指令,全局的权限只是一个资源列表放在Vuex,各组件如果需要权限判断就引入这个状态,用v-if 资源列表 includes 资源key 也是一种方法,而且更加容易理解。

#前端#框架
上次更新: 2023/06/01, 12:40:50

← 项目组件整理 全局进度条→

Theme by Vdoing | Copyright © 2021-2023 Wiidede | Website use MIT License | Article content & logo use CC-BY-SA-4.0 License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式