项目优化---业务实践封装二

99 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第2天,点击查看活动详情 这几天的以太反复横跳,受合并影响,9月加息前,应该会有一波小趋势。但是钱从哪里呢。。。。停停停,想屁吃呢。

言归正传,这两天西安的天气真是闷热,昨天回老家参加婚礼,开车走在高速上,看着堪蓝的天空中稀稀拉拉几朵白云,我就在想,云是水蒸气在高空温度下降又恰巧遇到细微颗粒物“凝集核”而形成的。看这天空,就没几朵云。北方的大江大河是少了些,重工业也不少,空中不缺凝结核。云少都只能说明高空温度很高,水蒸气也少,凝结不了。高温还要持续好长时间

慢慢等吧。。

继续我们上章的封装优化

上篇我们提到过,消息的使用,想怎么样,把什么,干成什么样?

组件的引入方式

/**
 * 组件使用方式
 * 订阅者
 */
import utils from "@/utils";
const { eventEmitter } = utils
const EVENT_NAME = "pb_from_profession_signed"
eventEmitter.$on(EVENT_NAME,function(){
    // 接收对应信息
})

变成:

// 接收部分
IMController.receive(EVENT_NAME, (data) => {
    // 接收对应信息
})

// 发送部分
IMController.send(...)

想一下,我是不是也可以用hooks呢,封装起来,hooks是肯定要用,根据经验,这是一个简单的集合体,有发送/接收/等一系列自身相关的动作,我们能不能在结构上搞成类型于xxx管理器呢....那就用类封装的方式吧

实现策略

1.png

上面的代码,我使用了类封装的方式,对象类可以隐藏结构的细节,提供了3个方法,该对象类的使用者,不必追究细节以及实现的过程。这种技巧来源于,封装记录,以数据类取代记录的策略,有兴趣的可以去研究下。在这里我的目的是:

小、简单、隐藏实现细节

封装这个类,也叫消息通信管理器,这个就需要在每个组件内部引入,主要是使用接收消息和发送消息使用。

三板斧:

1、send 发送消息 有默认配置,且这个 RoomController 是什么,带了个 socketSend,哦,原来是...

import { pbRoom as RoomController } from "@/hooks";

是那个 pbRoom 的,只是看不顺眼这个怪异的起名

2、receive接收消息

eName && IMService.$on(eName,function(data){ cb && cb(data) })

其中IMService来源与工具库中的订阅发布消息管理器,上文有提到过

const { eventEmitter: IMService } = utils

3、end 关闭消息通信

这个是后加的,整个交互流程完毕后,需要关闭消息接收。

使用示例:

import { IMController } from "../hooks";
// 接收消息--甲方
const EVENT_NAME = "pb_to_profession_checkturn"
// 发送消息--通知甲方
const EVENT_NAME_TO = "pb_from_profession_checkturn"
/**
 * 封装简易使用方式
 * 发送消息
 * eg1:MessageCommand({data:'start'})
 * eg2:MessageCommand({data:'done'})
 */
const MessageCommand = (config = {}) => {
  const defaultOption = {
    form_type: 4, // 1采购人,2招标代理开唱标阶段,3供应商,4专家
    order: EVENT_NAME_TO,
    data: 'ok',
  }
  IMController.send({...defaultOption,...config})
}
/**
 * 消息监听
 * 接收甲方消息,开始进行评审
 */
IMController.receive(EVENT_NAME,(data)=>{
  // 专家评审修改页面显示
  updateHandel()
})

使用上,会清晰些

组件内封装MessageCommand方法的目的,因为每个组件发送信息的配置可能不太一样,有个性化的配置和业务类别,如果每个单独使用,执行 IMController.send 时要传递一堆配置,而且大多都是重复的,所以大多情况,我们只需要关注变化的部分。

如页面一次简单的发送和通知交互:
直接执行

MessageCommand()

区分类别

MessageCommand({data:'start'})
MessageCommand({data:'done'})

好了,到目前为止,消息封装这块,已经暂时告一段落。

初级开发就是无脑的堆,以短时间完成目标为主。代码只会越堆越多,越多越乱。实在是不愿意去动。还是要有人带一带。其实项目里面,优化的部分还有一些,对于公共的工具库封装还有控制组件流程的部分。控制组件流程的部分,和这次封装也差不多,以精简代码提炼代码为主。也挺有意思。

先想一想吧,主要是阅读量太少,也没评论,互相评击的没有。动力有点不走,不想了。 下周在出,控制组件流转部分的优化。。。 出发了,带上妻儿去商场吃大餐和娱乐了,毕竟天这么热,待家里就是受罪。。。