[ing]【第一次做移动端的后遗症】踩坑之旅
从11月4日接到通知要去做一个移动端页面到今天结束一期开发，过了整整2个月加23天。
先不说提产品需求的是一个外行人，于是需求一直变一直变这个让人焦灼的事儿。
从混合开发app做着做着，又变成微信端页面开发也是醉的不要不要的。
然后，大概明白我是个踩坑的之后，心情就舒畅了很多。
于是，就开始了愉快的踩坑之旅。
踩坑需总结。
摔倒还是要爬起来的。
1. 顶部栏的对齐设计和点击问题
如果有下次的话，需要去考虑一个整体性。
以图标为中心的点击问题，和两边要对齐的设计。
2. 移动端的点击问题。
click还是touchend。
click是touch事情的整个完成过程，相较于单纯的touch的这个事件来说，大概会有300ms的延迟。
touchend则非常灵敏。只要手指有触摸到屏幕，就会触发这个问题。所以对于需要滑动的列表页，一般会选择click作为触发。
3. 缓存问题
如果是要缓存一整个order的信息，最好是以一个对象数组存储起来。
最好是用接口给的名字来进行命名。
var obj = {
orderName:orderName,
orderId:orderId
}
var str = JSON.stringfy(obj);
localStorage.saveData("order",str);转化为字符串的数据可以在必要的时候，转化成JSON格式直接充当从接口取下来的数据一样使用。
这样，如果需要存储的数据繁多，以一个对象数组的形式存起来就会比较容易清掉缓存
4. 历史记录的用法
嗯，老实说，=。=能做的事情，大概就是尽量用了history.back()和history.go()。
虽然也看了张大神的菊花插一刀，但还没有领悟到什么精髓，也就用了些低级的处理办法。
通过localStorage进行判断要不要回跳，要是回跳的话，是跳一级呢，还是跳两级这样。
5.所谓的设计交互
栽在设计上应该也就只有我这种菜鸟级的前端干得出来了吧。
我司的设计大部分都是不写代码的人。
于是给出的基本上都是设计方面好看的页面。
真正落到实处的时候，各种问题就出来了。
如果没有一个老道的前端给你抗住那些隐形的坑，那么也就只有自己边做边请教公司的前辈的时候，才会发现，原来这样的设计是不合理的。
比如说该用textarea被设计成了input，该用input的时候用了textarea。
然后测试会告诉你这样不好啦，因为如果输入内容很多的话，用户不能滑动查看自己写了什么，用户体验很不好啦什么的。
6.页面命名也挺重要的
好的命名会把页面连载一起。
这个是今天继续改bug的时候有的感觉。
比如说，因为之前对页面的命名是这样的：地址管理addressManage，地址更新updateAddress，地址添加叫addAddress。于是这三个页面，除了添加和管理因为都是a开头还在一起之外，每次都会忘了地址更新叫什么。不得不拉到很下面才看到啊。
所以，如果这三个页面都以address开头，那么如果要对这三个进行修改，将会省去我很多去回想页面命名和查找页面的时间吧？
addressManage，addressAdd，addressUpdate
7.今天还有一个坑叫position：fixed
因为头部header和脚部footer都是必须要固定在top和bottom的。于是，一开始就决定了好对这两个部分进行fixed设定。
但是!但是!
今天出了一个新问题，android浏览器可以接受的，但是IOS浏览器不能接受的问题！fixed在ios的浏览器里会失效！离内测还有一分钟，嗯，我写着这份文档，在想我要不要去打个辞职报告啥的....
看了篇这方面的文章。说的还行。
android的浏览器倒不会出现这种问题。
那片文章给出了twitter的解决办法。
就是在使用fixed定位的元素里写一句：-webkit-transform: translate3d(0px, 0px, 0px);
原话是这样的：
这里用translate3d只是因为仅有这个CSS属性iOS是调用硬件加速的…. 但是由于其阻止了浏览器的默认滚动，所以当touch事件结束后内容是不会惯性滚动的，于是又需要继续改变偏移量来模拟Scroll事件，这里就涉及到Scroll算法的问题了，要考虑手指移动的速度、阻尼的大小跟边界情况等等，我没有找到这部分的代码，也没有搜到任何相关文章，如果有人了解可以分享一下。
8.样式加载不出来的页面真的是丑的不要不要的
最开始的时候，css跟html是分开写的。这个情况经常会导致了我页面上的那些内容加载出来的时候，样式却一直没有渲染完。
然后我就自作聪明的把样式写进了html文件里。心想，这样应该会好很多。
但当QA拿着手机晃到我面前的时候，我发现我错了。内嵌入的样式也不能解救网速缓慢造成的渲染过慢的问题。（当然更多的肯定是因为我太菜的原因。）
9.同样的页面就不要写两次css样式了。
同样的页面出现了相同，或者说基本上是一模一样的样式，并不是什么好事儿。
因为一旦需求变化，不同的样式就会出现。一个页面改了，另一个页面同样的地方的样式，也要改。
已经陷入了无限bug循环中了。