重构评论组件
初衷
在年末我终于做了一个决定，重构评论组件。尽管之前也对它做过各种重构，重构过的代码依然看着很菜，这个组件是使用react去实现的，现在仔细分析一下，抛开react使用js实现更简单一点，所以我决定在一年的尾巴中开始清除这个“毒瘤”。
手机端和pc的评论样式是不一样的，但是实现的功能完全是一样的。之前是一个组件，但是样式的差别实在太大了，我改了组件的一部分，我就需要更改手机和pc端的样式，于是我就拆成两个组件，但是功能的实现差不多是一样的，存在很多重复代码，真的是炒鸡别扭，今天仔细的分析一下，觉得不使用react，实现起来也不是很复杂，于是我决定推倒重来。
步骤
step 1：多少页面在使用这个组件
我查看了有多少页面用到这个组件，绝大部分是主体的详情页。既然是组件，我希望它以后也是一个组件，现在要做的仅仅是更改使用组件的code。
step 2：组件中涉及的功能
- 增加评论
- 回复评论
- 删除评论
- 查看更多
增加评论
这其中涉及的事件有：提交表单（ajax + 新增dom节点）、打开评论框（addClass）、输入框失焦（是否removeclass）。
回复评论
涉及的事件：增加回复框（移除已经存在的回复框，在target后新增回复框）、提交表单（功能与增加评论类似）
删除评论
send xhr => 移除target
查看更多
send xhr => 新增dom节点
step 3：前后端交互
xhr是给我返回json数据还是一段html，这个很纠结，如果是json数据，这就意味着相同的html片段我需要在view层写一遍，在js中又来了一遍。以可扩展性来说，用json是最好的选择。这里很值得思考🤔
重构后的预想结果
功能实现的js部分只需要写一份，不同的就是view的呈现。
##总结
总的来说，这次的预想重构过程，我很大部分还是先看了我的心理结构（重构真的难上加难），如果这个重构需要一个星期甚至更久的时候，我会第一时间放弃。组件化真的是非常好的实践，我只用知道duck会叫，至于它是什么样的，我是不需要关心的。
这是我目前能预见重构过程涉及到的所有功能。尽量在这个星期refactor，看一下还需要这个过程还缺少哪些内容。
后续
两天的时间，终于完成了。先是修改dom结构，手机端和移动端就不用写两套了，顺便把css也优化了一遍。至于返回数据的格式，我选择返回html-partial而不是json，至于以后数据多了，再去调整吧，这里的重构就到此为止吧。
这个真真的是react的国度使用，使用react时，插入回复框的时候，我需要把所有的list全部循环一遍看应该插入到哪条数据的后面。现在也回想不起来使用react的初衷了，可能是用着用着失去初心了…