代码分层与公共逻辑的提取

分层

分层的好处

结构清晰

可复用性强

解耦性强

例如：在更新接口的时候可以 直接发送网络层修改代码即可
......

逻辑分层

• 一般来说一些比较简单的请求数据逻辑 分3层

  • 第一层即 页面视图操作层(view) 即用户操作调用vuex

  • 第二层是 vuex 那一层 用户的请求的代码进行解构发送请求保存数据层

    • 这一层具体请求不在这一层

  • 第三次是 发送网络请求层

• 例如 删除一列数据操作

  • 首先 表格 数据存储在 vuex 中

  • 页面操作层：点击编辑后 页面操作层 dispatch 发送操作的ID和页面名参数

  • vueX：actions 方法获取参数拼接成URL调用第三层的接口方法发送删除请求并重新发送 dispatch 重新获取列表数据

  

   

 

视图分层

• 没有什么是分层不能解决的如果有，那就在分一层。

• 页面比较简单 就按照3层来分 费别是base-ui 、 component、view 层

• base-UI:是比较简单的页面 直接使用element-plus或者添加一些标题和footer 然后使用slot插槽、prop、emit 的方式来给页面加入具体内容

  • 

     

     

  • 

     

     

  • 第二层是：components层

    • 这一层引入base-UI ：对base-ui做页面公共部分的逻辑

    • 例如1：删除新增编辑等

      • 通过view层传入的页面名和id调用dispatch 因为具体操作都一样就放入components层

    • 例如2：还有就是获取数据也是在该层 通过传入的页面名判断页面名来获取具体的vuex的内容

    • 例如3：权限管理也是在这一层 如果想具体了解权限管理关注博客

  • 第三层 : view层

    • 通过调用不同的components来生成页面

    • 例如：表格字段 表单验证和字段 通过传入不同的配置文件给component组件生成页面

    • 在不同的component 中通信操作也是在view层

逻辑提取

hook 工具

提取页面相同的逻辑 在上面提到的 view 中操作不同component通讯大体相同

可以提取到一个hook在hook中创建一个函数执行该内容

那么有些view在hook前需要对hook进行操作应该如何？

让hook的函数接收可选参数函数 如何在hook中执行该函数

fun&&fun() 
这样写在hook中如果有传入函数就执行如果没有传入就不执行

util 工具

util中也是一个一个函数 那么这些函数和hook中的函数有什么不同？

在util中是对数据的处理 即 当个方法 而这个方法经常使用 或者这个方法 写的内容比较多处理的事情比较复杂

例如：对一个数据需要递归处理 那么递归函数处理就应该放在util中