前言本项目使用sap的BI智能决策分析系统，java使用spring+springMVC+hibernate，数据库使用sap企业的HANA内存数据库。前端技术采用bootstrap+datetimepicker+ztree开发的PC端数据决策系统。由于企业在移动端越来越多地使用这款产品，PC端浏览越来越少，而且系统大多针对PC端，所以移动端可以说是没有用户体验，现在移动端是逐步优化。移动端用户体验。第一阶段的需求大致如下：将原来的左侧导航转移到底部，形成一个更适合移动端的系统。将原来的ztree组件形成的树形多选控件转换为移动端。具体设计已经完成，开发周期有限。整体优化基于bootstrap。我在里面的角色是前端开发工程师和ui设计。这个项目没有产品，没有ui，也没有测试。两个人，一个前端，一个做所有优化工作的后端。责任重大。移动端导航改造的原导航效果图如图：该效果的导航不考虑移动端，完全是PC端的风格，并且有前端缓存的功能。之前一直在思考前端缓存的问题。只有这样才能提高系统的性能，目前还没有明确的办法。在管理系统中看到这个应用的前端缓存，我知道了一个很好教的方法，不经常做一些改变。前端页面缓存，减轻服务器的压力和负担。这种前端缓存方式的过程是这样的：在导航点，跳转到对应的页面，通过读取data-toggle属性对于每个不同的页面，只要通过导航请求得到的html和数据页面上的都在页面上，分块，并且提供tab形式，方便下次切换不同页面。实现的效果如下图所示。第一次加载后，每次点击切换标签页得到的页面都是已经存在的页面本身。是的，你只需要控制它的可见性就可以达到前端缓存的效果。为了保留前端缓存，兼具移动端的效果，对前端导航进行了改造。具体的改造步骤很多，也比较繁琐，这里就不详细介绍了。我直接贴出改造后的效果图如下：树结构文件优化原版原版这种树结构多选区域选择方式，完全不符合移动端的风格。采用的ztree控件的风格在移动端体验不佳。第二版的第二版是在制作的时候考虑到需要。想不出有什么好的方法既能满足移动端的移动端ue的需求，又能满足多选的需求，充分发挥脑细胞，在ztree的基础上改样式为得到第二个版本。第三版第三版降低了要求，只需要单选，所以生产使用mobileselect插件。具体代码实现如下：varmobileSelect4=newMobileSelect({trigger:'.sel-area',title:'AreaSelection',wheels:[{data:[{id:'1',value:'All',children:[{id:'0',value:'请选择'},{id:'1',value:'不分配区域',childs:[{id:"0",value:"请选择"},{id:"1",value:"阿瑞包装制品子公司"},{id:"2",value:"阿瑞包装制品子公司"}]},{id:'1',value:'西南Area',childs:[{id:"0",value:"请选择"},{id:"1",value:"重庆地区"},{id:"2",value:"成都地区"}]},]}]}],position:[0],callback:function(indexArr,data){控制台.log(数据);//返回选中的json数据}});这个插件，我用的时候，以div开头，如果直接在页面模板中引入css和js，效果会有问题。引入css和js的代码必须放在head标签中才可行。结语这次移动端的优化，对我来说，收获的是前端缓存的部分，新开了一个skylight为自己的前进方向，同时对组件的封装有了新的认识，以后会尝试封装自己的组件，互相鼓励。
