产品全流程之前端开发篇
每回发产品相关的文章，总会掉点粉，虽说粉丝也不是特别多。不过仔细想想其实也蛮正常的，产品内容相关的受众毕竟相对较窄，生活化的内容更为通俗易懂，与之相应的受众多些。
因为这个号定位是分享平时自己做产品、生活上的小事儿，记录的内容大多是自己周边或者亲身经历的，比如遇到了一些好玩的事儿亦或做了一些有趣的东西。
平时更新的频率不算特别高，1 周可能 1 篇左右，长时间没更新要么确实忙，要么就在偷懒。作为我个人而言，还是比较喜欢记录的，码字的过程一方面是在做记录，另一方面也是在做一个动态输入输出的事儿。
因为这个专题带来了不少新的朋友，以防你们有啥期待，就先声明声明，嘿嘿～
回到正题，今天还是接着这个专题来继续聊聊产品流程。
如果简单划分产品研发流程的话，可以分为以下 7 大块，前面三期说到了、、，需求评审完了，排期计划也给了，接下来就要到技术开发环节了。这一期就继续来说说产品研发中的一个环节：前端开发。
产品研发 7 大流程
前端作为直面用户的入口，直接对用户体验负责，对应的实现角色是前端开发人员，后端则作为功能逻辑的实现，对业务、数据性能负责，对应的实现角色是后端开发人员。
产品研发阶段，前后端一般都是并行开发。主流的做法是前端开发自己的页面，后端写好功能逻辑并提供数据接口供前端调取，彼此独立开发，互不干扰，也即是大家口中常说道的前后端分离架构的开发模式。
我们前面在中提到要将搜索入口放在侧边栏，在实现方式上选择了油猴脚本注入，那么具体如何实现呢？
在 MiniO 系统中，需要先登录才能进入文件管理页面，我们想实现的是在登录后的文件管理页面侧边栏展示搜索按钮。
文件管理页面
页面跳转
本来是准备原生代码来实现，后面想到油猴脚本已然是一个成熟的浏览器脚本程序了，有没有一个现成的 API 可以让我调一下呢？这个和之前写过的一篇文章（）的思路如出一辙。
入口的问题解决了，我们再来解决需求的输入，要实现用户输入内容后可以即时返回关联内容，则又需要获取键盘输入的状态，即监听用户当前键入的内容，并将内容告诉后端，后端再返回关联的结果。
需要指明的是这里输入，指的是键盘输入，但是我们知道通过拼音输入法打字的时候，只有键盘再按下空格或回车或鼠标点击，才会将内容真正键入到输入框中，那么问题来了我们是不是每次的键盘输入都需要发起请求呢？
拼音输入法打“哈哈哈”
如果每次输入都去请求下结果，则会浪费不少结果的返回，影响服务器的性能，那么既然不实时请求，那就可以考虑加个延迟的时间再发起请求，那么我们该如何去设置这个时长在平衡服务器性能的同时又可以保证用户的搜索需求能得到及时反馈呢？
为此，我去测试了下自己的打字速度，大约 1 秒 1.3 个字，那么我们完全可以通过键盘输入文字后再给一个 500ms 的延迟再去发起请求，这样避免使用拼音输入法打拼音的时候就开始发起请求了。
打字速度测试
最后完整地展示下前端搜索的效果吧：
原型搜索小插件#浏览器插件 #MiniO
好的，今天就码到这里了，有什么好的发现，可以在底部留言一起交流分享啊~，哈哈哈~
下一篇继续来说说后端开发篇。