对一条优化需求的“优化”

最近收到了这样的一条优化需求：

在云API网关产品中，有一项标签管理功能，其作用是：用户可根据自身需要，新建属于自己的标签，然后可直接选中已有的标签进行筛选，得到绑定了选定标签的分组，相当于一个快捷搜索的功能。

 下图是弹出的标签管理对话框：

未优化前，点击新建标签，出现名称输入框，当输入不符合命名规范的名称时，会有报错提醒，这时如果点击右下角的确定按钮，不仅对话框可以关闭，而且还会出现编辑成功的消息提醒。

显然这样的操作逻辑是不符合常理的，说严重点的话，完全可以把这个问题当作bug来处理。所以我第一步想到的是，当输入名称不合规时，点击确定按钮，弹框不关闭，并且也不会发出任何接口请求，引导用户去处理错误名称，这也正是优化需求想要达到的目的。

在看完代码后发现，实现这一功能非常简单，因为这些错误提示在代码中都对应着一个输入名称状态的变量，也就是图中的tagNameState变量。

 那么我只需在确定按钮的点击事件中，增加一个对tagNameState判断条件就可以了。

if (
  this.submitting ||
  (this.tagNameState !== "ready" && this.tagNameState !== "init")
)
  return;

tagNameState共有五个状态，ready为通过，可以将三个错误状态加入到判断条件中，为避免重复，我在这里选择了将正确的两个加入到条件中。通过这样的修改，当用户输入错误名称时，实现了点击确定按钮无任何反应的效果，实现了优化需求。

在自测时，我又发现了一个新的问题：当输入名称符合要求时，未点击输入框右侧的确定或取消按钮，而是点击右下角的确定的话，标签管理弹框也会消失，并且也报成功提醒，但是再重新打开标签管理弹框，在已绑标签中，并没有刚刚输入的标签名称，这样用户就会感到奇怪，我明明输入了正确的标签名称，并且也点击了最后的确认，为什么没有新的标签名呢？

这个功能的设计逻辑是，只有用户输入了正确的标签名称，并且点击了输入框右侧的按钮，完成这两个操作，再点击最后的确定，才能完成新标签的绑定，先前的描述忽略了中间的步骤。所以当出现前面的错误情况时，需要给用户提示，引导其完成必要的步骤。

从开发人员的角度来说，就是要判断新建标签的输入框是否还存在。一开始我的想法是判断光标的位置，在进行简单的查询后，发现这样实现有些困难。后来经过思考突然发现，我是否可以从输入框内的输入内容上突破，然后就查看代码，发现输入框右侧两个图标的点击事件中，都将输入的内容置为空了。

于是我在确定的点击按钮中，又增加了新的判断条件：

if (this.newTagName) {
  this.$cvnMsg.warning("请先添加或删除已输入的标签");
  return;
}

这样当有输入内容时，点击确定按钮，就会有一个提示，引导用户完成相应操作，提升用户体验。并且这这一段代码必须放在判断输入名称是否合规的前面，否则将会出现名称错误与关闭输入框的提示同时存在的现象。同时也避免了输入内容为空时，不关闭输入框，直接点最后确定，出现弹框关闭的问题。

就在撰写这篇文章的时候，我发现还有另一个解决方案，在html语言中，输入框外层的div绑定了v-show属性，对应的参数是smallDialogShowing，这个变量的值，在add和cancel事件中，都进行了重置，所以完全可以把前面的newTagName变量更换为smallDialogShowing。

在我的观念里，我觉得前端开发人员是最接近用户、最能直接感受到用户体验的技术人员，前端人员不仅要实现功能需求，还要去思考如果把功能实现的全面、优雅，避免出现反人类的操作逻辑。例如本文所描述的添加标签功能，最初的需求可能没提到输入框存在与否的问题，这时候前端开发人员就需要站在用户角度考虑，我既要完成这个功能点的开发，也要让用户容易操作。从简单的优化需求的提出，再到需求解决后自己使用产品的体验，迸发出了对“优化需求”的优化，再到开发时，对解决方案举一反三的思考，对我来说，这样的开发过程、开发习惯是挺好的。

作者：沈阳
链接：移动云开发者社区
来源：移动云开发者社区 (10086.cn)