最近一直在忙公司的第一款类客户端产品——GO比分。
网页具有强大的跨平台特性，HTML+CSS比任何其他界面制作方式都要强大和灵活。然而，网页无法实现Web范围外的一些功能（例如手机通知栏、铃声、震动等）。因此，还需要通过一个代理去调用，也就是客户端。所谓类客户端，就是穿了客户端这件“马甲”的网页。
经过一个多月的努力，GO 比分的Android版在上周正式登陆安卓电子市场，iPhone版也即将推出。趁着这几天清明假期，先来总结下这段时间的开发经验。另外，本人第一次做移动Web开发，如有错误之处，欢迎指正；如有更好的解决方案，欢迎指教。
禁止页面缩放
这个很简单了，Google一下可以搜出一框：
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" />禁止手机号识别
webkit手机浏览器会自动把页面上的数字识别为电话号码，一点这些数字，就进入打电话的界面了。要禁止手机号识别，可以加上这段meta：
<meta name="format-detection" content="telephone=no" />这段meta是在iPhone的开发资料里面找出来的，对Android自带的浏览器也有效，反倒对Safari没效。针对Safari的解决方案还在寻找中……
position: fixed
从上面的界面截图中可以看到，整个软件的顶部和底部是固定的，中间是可以滚动的内容。那么，按照常规的思路，我们可以把顶部和底部的position样式设为fixed。悲剧的是，目前大部分的webkit手机浏览器不支持fixed，包括iPhone中的Safari。于是，顶部和底部只有放到客户端了。
触屏事件
手机上没有鼠标，所以什么mouseover、mouseup、mousedown全部出局，但是click还在。触屏的事件则有三个，分别是touchstart、touchmove和touchend。click在touchstart之后、touchend之前触发，一旦touchstart之后有touchmove的动作，就不会触发click。
锚点存储
Web是无状态的，特别是由javascript控制的界面状态，一刷新就会丢失。比如在上图中，在日期栏跳到下一天，要想在刷新之后，仍然保持在该天，就得把这个状态存起来。按照常规思路，可以通过Cookie来存，但是Cookie会随着http请求发送，无形中增加了流量。于是，我们采取了锚点存储方案。具体实现是，把数据用键值对方式存储在一个Object中，通过JSON.stringify序列化后添加到锚点。例如：
index.html#{"date"%3A1301846400000}重新载入页面后，通过JSON.parse反序列化锚点中的数据，就可以取得刷新前的日期。
多语言
在开发初期，我们就确定了目标人群以外国用户为主，这就必须做多语言了。
首先，把语言项写成JSON结构，根据不同的语言存储在不同的js文件中。比如：
{
"basketball" : "Basketball",
"football" : "Football"
}{
"basketball" : "篮球",
"football" : "足球"
}在显示多语言文字的地方，通过一个HTML5的自定义属性data-lang来识别，例如：
<span data-lang="football"></span>
<span data-lang="basketball"></span>然后，通过Cookie项lang存取当前语言。这里使用Cookie的原因是，后端也要通过识别这个值去输出相应语言的数据。获取到当前语言后，通过AJAX去读取对应语言的js文件，并反序列化为一个Lang对象。
最后，通过一段Js程序把文本写入：
$("[data-lang]").each(function(){
var lang = Lang[ this.getAttribute("data-lang") ];
if (lang != null) {
if ("INPUT" === this.nodeName || "TEXTAREA" === this.nodeName) {
this.value = lang;
} else {
this.innerHTML = lang;
}
}
});（题外话，在美国，Football指的是橄榄球，Soccer才是足球。因为这个问题，又折腾了一番）
HTML5 缓存——Cache manifest
Cache manifest是一种非常智能的缓存方式，它通过一个配置文件来记录要缓存的目标，一旦这个配置文件被更改，原来的缓存就会失效。这听起来非常美好，但是实际应用的时候却有不少问题。
- 只要配置文件中有一丁点错误，整个文件就无法识别、无法更新，这时必须清除浏览器缓存。
- 虽然网上很多资料都说Cache manifest支持目录，但是经我实测证明，一旦在配置文件中写了目录，整个文件就无法识别了。如果要缓存的文件很多，难道要逐个去写？
看完这篇文章后，你或许会察觉到一件事，对的，我又回到前端来了。
评论 (12条)