如何以最小成本将你的网站变成ipad应用

.需求诞生和方案评审

.产品设计

.技术实现

.技术细节

.号外

.需求的诞生和方案评审

杜撰一个蛋疼的需求：假设你(web开发者)有一个电影类的网站(内容包含介绍、评论、影院信息等)，你如何用最小的成本将web网站的电影应用做成ipad应用？

首选方案：如果如果你老爸或儿子是ios开发者，成本将最小(不考虑情感成本)，或你爸是李刚、李双江(一分钱不花找人做)，成本也将最小。但是如果你既不是富二代、官二代，也暂时不是富二代、官二代他爹，这种方案可以忽略。

最蛋疼的解决方案：你可以用一个webview将这个网站的页面全部装起来，然后程序图标就算大功告成了。这似乎也是最好的解决方案了，就好比你在自己的ipad上加了一个这个网站的快捷方式，可以直接打开网页到达你需要的页面。

优化方案：如果你稍微勤奋点，你就会在原有的web网站基础上将其改造成一个适合ipad用户使用习惯的web app。于是，方案最终得以敲定。

.产品设计

由于ipad的屏幕足够大，根据ipad用户的使用习惯，用户喜欢在一屏中完成所有的任务而无需切换屏幕(不管你切换屏幕的动画做的是多么炫)。所以该应用的交互设计可以大体进行如下设计：

左侧是电影分类列表，展开一个分类列表，显示一个电影列表，展示电影的基本信息（如：电影海报、主演、导演、年份、国家、类型等）；右侧是若干个tab，每个tab都含有大量的信息。tab1，电影详细信息（剧情、花絮、截图）；tab2，影院信息（附近上映该影片的影院、地图信息）；tab3，电影的评论（也可以对添加自己的评论）。点击每个tab时，显示当前tab。

如果考虑到电影分类足够多，可以考虑三列展示，左中右分别是：分类列表、单个门类电影列表、单个电影详细信息(各种tab)。

.技术实现

毫无疑问，这样的需求和产品设计是需要大量的前端交互的，无他，需要使用大量使用javascript。

第一步：如果勤快点，可以做一个程序的启动动画，在进行启动动画时，加载页面中的电影分类列表和电影列表。当然你就别奢望在启动动画中将每个电影的每个tab中的内容也加载完，否则用户绝对不待见，在电影列表数据足够多的时候，只能将分类列表的内容放在这段时间加载。

第二步：假设启动时只加载了电影列表，那么在用户点击每个分类时，通过发送一个ajax请求，然后将请求回来的数据拼成html插入到页面中展示出来，并将请求的数据缓存起来。

第三步：当用户点击电影列表中的单个电影时，右侧显示有关该电影的各种信息的tab，并显示默认tab(如电影详细信息)，通过ajax技术并缓存请求的数据

第四步：点击其他tab时，显示该tab内容，若数据内容已缓存，使用缓存的数据；若不存在，通过ajax获取。

.技术细节

这里有一些具体的技术细节需要注意：

1、延迟加载

为了减少启动时间，一些静态文件需要进行延迟加载。例如每个tab的样式文件，需要用到的javascript文件。特别是评论tab，这里需要用户进行登录才能发表评论，发表想看、看过等信息，这个模块需要加载的javascript特别多。

2、脚本依赖问题

还以评论tab模块为例：这个模块中有很多javascript模块，如表单脚本、ajax登录注册模块、评论模块。评论时，若用户未登录则需要加载登录注册模块进行登录或注册，而登录注册模块中一些表单验证等脚本依赖表单脚本模块。处理这种模块依赖有很多模块加载器(loader)函数可以借鉴和使用，如YUI Loader， seajs等。

.号外

好吧，我承认，我也成了标题党。此博文是在我做了一个使用了类似技术纯网页web应用产生的一个灵感。为减少篇幅，没有粘贴具体代码，文中涉及的静态文件延迟加载和脚本依赖问题是时下前端探讨较多的技术，可以单独成文。

另外，动态加载在ie6下有个bug，若对a元素点击绑定事件函数中包含静态文件加载的代码，那么会导致静态文件加载不成功，被abord掉了。解决方案，当然，若是ipad应用，就不用考虑这个该死的ie6bug。