设计AutoComplete组件时,需要考虑什么问题?

基本实现原理

首先我们需要明确一下需求，我们要做的是一个自动补全组件，类似于Google的搜索框。主要是根据用户的输入，来联想一些用户可能会搜索的词，然后提示用户，提升用户体验。

通用组件

我们设计组件的原则，首先要看的就是组件的通用性、可移植性和扩展性，组件的粒度要小，其次就是保证安全性。

考虑大概的设计

1.这个组件由简单的一个文本框和搜索按钮还有右侧扩展区组成。

2.文本框监听有focus、blur、change等事件。

(1). focus、blur由组件自身处理显示隐藏。

(2). change主要处理props 的提词搜索事件。

(3). search处理props 的搜索事件。

3.右侧的扩展区通过{props.children}(react)或slot(vue)来处理。

change和search也可以通过emit事件来进行处理。

安全性

基本的处理就是上述的内容了，但是作为一个搜索组件，我们更要防止其他人通过这个组件来攻击服务器。所以我们要处理用户的每一次输入，进行转义后提交，后端人员也必须做相应的字符处理流程。

性能问题

用户如果一直在不停的输入/删除，我们就需要不停的进行服务器请求，有没有一个方式可以有效的限制用户的请求数，又不影响用户体验的方法呢?当然有，那就是利用防抖/节流。这里建议使用防抖来进行限制。

一些其它的改进方向

1.在客户端做一些敏感词的提示可能会比较好。

2.保存用户的一些输入/搜索记录，后端在做联想搜索时候，会更加方便。

3.增加一些用户体验方面的功能，比如一些展示效果、—键清空之类的。

注意事项

1.不要无限制的扩充组件功能，防止臃肿。

2.要尽可能的解耦，用多组件组合的方式，或者用HOC来协助。

3.在必要的情况下，可以定义一些配置项，但也是不要过于繁杂。

注重业务侧和用户体验是最重要的，不要为了实现而实现，在保证用户体验的前提下，多思考下对其他组件和其他协作开发者的影响。