前言：今天要分享的是我最近在开发的h5机器人诊断的心路历程。这篇文章主要说说我自己的计划、想法和思考过程（仅供参考，以下内容以我的产品为例进行讲解），先放效果图。第一张图是最初的对话，第二张图是中间的修改，第三张图是最终的诊断结果，大致就是这样一个交互过程。从头开始的想法以前从来没有做过，所以和大家一样，我也有很多的困惑，不知道从何下手，但是不要慌张，我们可以慢慢分析。界面结构分析首先分析功能界面，主要包括四类动态内容，第一：用户的回复（纯文本），第二：机器人的单选对话块。第三：机器人多选对话块，第四：诊断结果内容块。因为机器人对话是一个动态的交互过程，所以不能把过程写死，通过隐藏显示块来构建一个完整的界面。因此，有必要对动态库的组件化思想进行封装。（在这里声明一下，我并没有使用现在流行的Vue框架来搭建组件，因为我的项目是一个DOM操作框架。）Vue的方式是数据和视图分离，用数据来渲染整体的界面，后面会解释vue是怎么处理的。我这里使用这个方法来生成dom结构。在界面设计分析之前，我本来打算把流程写在前端，让前端来决定每个问题问什么。后来这个计划很快就被我推翻了。如果所有的逻辑都写在前端，那就太死板了。没有生命力，界面变得不活跃。尤其是和语境逻辑紧密结合的会话分析，前端一定不能存在逻辑。所以我推荐的方案是：前后端逻辑分离。前端只接收服务器发来的问题，回答服务器发来的问题。服务器收到问题的答案后，继续提出新的问题。前端不理我之前回答的，现在回答的，直接回答就行了。界面可操作性属于对话诊断，中途修改答案内容属于硬性要求。所以我给的设计是最新的问题，我可以直接回答。前面的题不能随便操作，就是可以转成disable模式。（disable模式是针对events和styles的，按照disable显示为不可操作的css）当然是点击右边的modify按钮，然后就可以允许修改那一步的问题了，然后问下面的根据最新答案再次提问。由于我是一个DOM操作框架，所以我的方法是根据当前的问题块是否是最新的机器人对话框。如果是，则认为当前题可以操作。如果小于当前问题块的索引，则认为过去已回答。问题，不允许修改。这里会有问题。如果用户要中途修改，这个逻辑显然不符合要求，也不严谨，所以我需要有两个条件来限制不允许修改的状态。两个限制条件：1：index2：对话框是否包含'is-disabled'类（这里，Vue框架可以做到，其组件元素是否被点击或选中，均由其对应的控制参数来决定,所以没有那么繁琐的dom,参数数据控制就够了),所以个人认为这种方式在操作控制上比dom操作有一定的优势。对于回归和恢复问题，上面已经介绍了正向所需的考虑过程，一步步得出最终的诊断结果。但是当你做了h5，尤其是移动端的h5，你就知道fallback问题是什么了。即当你的机器人诊断出疾病的结果时，点击疾病栏会跳转到该疾病的详细界面，然后你返回时，你会发现你的机器人诊断界面可能会刷新到初始启动一点，之前的对话内容都没有了。这里我简单归类一下刷新情况（安卓版微信浏览器，chrome浏览器会刷新）（iOS版微信浏览器不会刷新）。作为一个复杂的诊断对话，很难完成选择，如果你回头说不，你就不会，从头开始。这恐怕是所有人都难以接受的。所以我们要修复它。解决回滚和恢复问题的思路。先说一下刷新的情况。（不要以为回滚不刷新就没有问题，如果有彩蛋，我们还是要处理）。当我们的浏览器回滚刷新时，我们需要弄清楚两个问题，1.从哪里取回数据，2.取回数据后，组件事件怎么办，会不会丢失？这是我们需要考虑的最重要的问题。我已经尝试了很多解决方案来解决这个问题。之前在尝试的时候一直在想，如果只保留dom结构，那么我的事件就会丢失，因为我的组件是动态生成dom的，而它们的事件也是在生成dom结构的时候动态添加的，所以我想当时觉得只保留dom结构是不够的，所以就找了一些可以保留dom节点，同时保留dom本身事件的方法。还别说，我真的找到了一个，就是几乎没人用过的jQuery框架的clone()方法。该方法可以带参数，默认为false。如果clone(false)，则可以完全克隆dom结构。但是没有克隆事件。如果clone(true)，可以完全克隆dom结构，同时还可以保留自己的事件，厉害了。$("p").克隆（真）。当我以为这是我的救星时，我发现了一个更他妈的东西。克隆出来的对象只能放在变量中，不能转成字符串，存储在本地，也不能存储在别处。尝试了很多次后，我放弃了，一个鸡蛋都救不出来。还是无奈的放弃了。后来，我调整了思路。如果我先保存和恢复dom结构，我可以在别处处理事件吗？结果还是被我想通了。不要动态添加事件。就在界面的开头，在最外层的dom节点的点击事件上给出每个可能的组件元素。这样我恢复dom结构后，事件还能用，完美。不要太高兴。我们组件的事件处理范围不能超出自身对话框的范围，那怎么办呢，有办法的！如图所示，看到mainPart了吗？这样的风骚操作就可以解决上面的问题了。这样，两者结合就可以实现恢复操作。这样就可以得到dom结构varchatContent=$("#main-chat-box")[0].innerHTML;然后将此聊天内容保存在本地存储中。返回的时候，刷新的时候，先去localstorage中找是否有chatContent数据，如果有，就用它来恢复对话的内容界面。存储缓存的时机这里的缓存数据应该在什么时候存储和检索？我推荐一个解决方法：当你点击疾病栏跳转到详情，当你想离开当前界面的时候，保存一份到localstorage，回去的时候，拿出来恢复，记得clearlocalstorage缓存时间数据。（彩蛋来了，这种代码操作导致了一个问题，就是那些不刷新的浏览器保存了一个缓存数据，没有机会删除。就是下次进入机器人界面的时候，就会把二级缓存的内容显示出来，是不是很操蛋，放心，我有办法，让他也回去刷新一下，这个思路不错）。让回滚时不刷新的浏览器，回滚时刷新的浏览器$(function(){varisPageHide=false;window.addEventListener('pageshow',function(){if(isPageHide){window.location.reload();}});window.addEventListener('pagehide',function(){isPageHide=true;});听完课，如果你耐心看完，恭喜你又学了一招。我会不定时写技术文章，有兴趣的可以关注我的公众号：强哥的感悟，最新文章，一手沙发。再见
