前言
项目是用sap的BI智能决策分析系统，java运用spring+springMVC+hibernate，数据库运用了sap企业的HANA内存数据库。前端技术采用bootstrap+datetimepicker+ztree开发的偏pc端的数据决策系统。
需求
由于某企业对该产品的使用逐渐增加的手机端，而pc浏览较少，而该系统针对多是pc端，移动端可以说毫无用户体验，现对移动端进行逐步优化移动端用户体验。其一期需求大致如下：
- 将原左侧导航转移到下方，形成更适合移动端的系统。
- 将原ztree组件形成的树形多选控件，转换为移动端。
具体设计
由于改项目已经完成，而开发周期有限，整体基于bootstrap进行优化，我在其中担任的角色是前端开发工程师兼ui设计，这个项目，没有产品、没有ui、没有测试，两个人，一个前端，一个后端，完成所有优化工作。责任巨大。
移动端导航改造
原导航效果图如图所示：
这一效果的导航细看并没有考虑移动端，完全是pc端的风格，而且具备前端缓存的功能，之前也一直在思考前端缓存的问题，怎么样才能去提升系统性能的提升，并没有明确的方式方法可以去做，看到这一个应用在管理系统内的前端缓存，知道了一种教好的方式去做一些改动不频繁，的前端页面缓存，减轻服务器的压力和负担。
- 此种前端缓存做法流程如下：
- 导航处，跳转到对应页面，通过读取data-toggle属性，将相关页面以div的形式添加到内容页面
<a id="5" href="http://222.247.36.46/user/toList" data-toggle="navTab" data-target="userNav">- 每一个不同的页面，在页面上只要通过导航请求得到的html以及数据，都在页面上，分块，并且提供了一个页签的形式，便于下一次，切换不同的页面，其达到的效果如下图所示
加载过第一次之后，其余每一次点击切换页签所获得的页面都是页面本身已经存在的，只需要控制其显隐就达到了前端缓存的效果。
- 为了保留前端缓存且能有移动端的效果，对前端导航进行了改造，具体改造步骤多且繁琐，在此就不详细介绍了，直接贴出改造后的效果图如下：
树形结构文件优化
- 原版
原版这一个树结构多选地区选择方式，完全不符合移动端的风格，采用的ztree控件的样式，在移动端并不能有好的体验，
- 第二版
第二版是在做的时候考虑的需求有着多选的需求，我想不到在移动端有什么好的方式去技能满足移动端ue，又能满足多选需求，充分发挥脑细胞，在ztree的基础上，进行样式的更改得到第二个版本。
- 第三版
第三版降低需求，要求只能单选，故选用mobileselect插件来进行制作，具体代码实现如下：
var mobileSelect4 = new MobileSelect({
trigger: '.sel-area',
title: '地区选择',
wheels: [
{data:[
{
id:'1',
value:'全部',
childs:[ {id:'0',value:'请选择'},
{id:'1',value:'未分配片区',childs:[ {id:"0",value:"请选择"},
{id:"1",value:"阿瑞包装产品子公司"},
{id:"2",value:"阿瑞包装产品子公司"}
]},
{id:'1',value:'西南片区',childs:[
{id:"0",value:"请选择"},
{id:"1",value:"重庆地区"},
{id:"2",value:"成都地区"}
]},
]
}
]}
],
position:[0],
callback:function(indexArr, data){
console.log(data); //返回选中的json数据
}
});这一款插件，我在使用时，在以div开头的页面模板中直接引入css，和js，实现出来的效果会有问题，必须将引入css和js的代码放入head标签中才可行
<head>
<link rel="stylesheet" type="text/css" href="${ctx }/static/js/board/area/css/mobileSelect.css">
<script src="${ctx }/static/js/board/area/js/mobileSelect.js"></script>
</head>结语
这一次移动端优化，对我而言收获的是前端缓存的部分，为我自己的前进道路打开了新的天窗，
同时对组件的封装有了新的认识，以后会试着自己封装属于自己的组件。共勉。