如何以最小成本將你的網(wǎng)站變成ipad應(yīng)用

.需求誕生和方案評審

.產(chǎn)品設(shè)計(jì)

.技術(shù)實(shí)現(xiàn)

.技術(shù)細(xì)節(jié)

.號外

.需求的誕生和方案評審

杜撰一個(gè)蛋疼的需求：假設(shè)你(web開發(fā)者)有一個(gè)電影類的網(wǎng)站(內(nèi)容包含介紹、評論、影院信息等)，你如何用最小的成本將web網(wǎng)站的電影應(yīng)用做成ipad應(yīng)用？

首選方案：如果如果你老爸或兒子是ios開發(fā)者，成本將最小(不考慮情感成本)，或你爸是李剛、李雙江(一分錢不花找人做)，成本也將最小。但是如果你既不是富二代、官二代，也暫時(shí)不是富二代、官二代他爹，這種方案可以忽略。

最蛋疼的解決方案：你可以用一個(gè)webview將這個(gè)網(wǎng)站的頁面全部裝起來，然后程序圖標(biāo)就算大功告成了。這似乎也是最好的解決方案了，就好比你在自己的ipad上加了一個(gè)這個(gè)網(wǎng)站的快捷方式，可以直接打開網(wǎng)頁到達(dá)你需要的頁面。

優(yōu)化方案：如果你稍微勤奮點(diǎn)，你就會(huì)在原有的web網(wǎng)站基礎(chǔ)上將其改造成一個(gè)適合ipad用戶使用習(xí)慣的web app。于是，方案最終得以敲定。

.產(chǎn)品設(shè)計(jì)

由于ipad的屏幕足夠大，根據(jù)ipad用戶的使用習(xí)慣，用戶喜歡在一屏中完成所有的任務(wù)而無需切換屏幕(不管你切換屏幕的動(dòng)畫做的是多么炫)。所以該應(yīng)用的交互設(shè)計(jì)可以大體進(jìn)行如下設(shè)計(jì)：

左側(cè)是電影分類列表，展開一個(gè)分類列表，顯示一個(gè)電影列表，展示電影的基本信息（如：電影海報(bào)、主演、導(dǎo)演、年份、國家、類型等）；右側(cè)是若干個(gè)tab，每個(gè)tab都含有大量的信息。tab1，電影詳細(xì)信息（劇情、花絮、截圖）；tab2，影院信息（附近上映該影片的影院、地圖信息）；tab3，電影的評論（也可以對添加自己的評論）。點(diǎn)擊每個(gè)tab時(shí)，顯示當(dāng)前tab。

如果考慮到電影分類足夠多，可以考慮三列展示，左中右分別是：分類列表、單個(gè)門類電影列表、單個(gè)電影詳細(xì)信息(各種tab)。

.技術(shù)實(shí)現(xiàn)

毫無疑問，這樣的需求和產(chǎn)品設(shè)計(jì)是需要大量的前端交互的，無他，需要使用大量使用javascript。

第一步：如果勤快點(diǎn)，可以做一個(gè)程序的啟動(dòng)動(dòng)畫，在進(jìn)行啟動(dòng)動(dòng)畫時(shí)，加載頁面中的電影分類列表和電影列表。當(dāng)然你就別奢望在啟動(dòng)動(dòng)畫中將每個(gè)電影的每個(gè)tab中的內(nèi)容也加載完，否則用戶絕對不待見，在電影列表數(shù)據(jù)足夠多的時(shí)候，只能將分類列表的內(nèi)容放在這段時(shí)間加載。

第二步：假設(shè)啟動(dòng)時(shí)只加載了電影列表，那么在用戶點(diǎn)擊每個(gè)分類時(shí)，通過發(fā)送一個(gè)ajax請求，然后將請求回來的數(shù)據(jù)拼成html插入到頁面中展示出來，并將請求的數(shù)據(jù)緩存起來。

第三步：當(dāng)用戶點(diǎn)擊電影列表中的單個(gè)電影時(shí)，右側(cè)顯示有關(guān)該電影的各種信息的tab，并顯示默認(rèn)tab(如電影詳細(xì)信息)，通過ajax技術(shù)并緩存請求的數(shù)據(jù)

第四步：點(diǎn)擊其他tab時(shí)，顯示該tab內(nèi)容，若數(shù)據(jù)內(nèi)容已緩存，使用緩存的數(shù)據(jù)；若不存在，通過ajax獲取。

.技術(shù)細(xì)節(jié)

這里有一些具體的技術(shù)細(xì)節(jié)需要注意：

1、延遲加載

為了減少啟動(dòng)時(shí)間，一些靜態(tài)文件需要進(jìn)行延遲加載。例如每個(gè)tab的樣式文件，需要用到的javascript文件。特別是評論tab，這里需要用戶進(jìn)行登錄才能發(fā)表評論，發(fā)表想看、看過等信息，這個(gè)模塊需要加載的javascript特別多。

2、腳本依賴問題

還以評論tab模塊為例：這個(gè)模塊中有很多javascript模塊，如表單腳本、ajax登錄注冊模塊、評論模塊。評論時(shí)，若用戶未登錄則需要加載登錄注冊模塊進(jìn)行登錄或注冊，而登錄注冊模塊中一些表單驗(yàn)證等腳本依賴表單腳本模塊。處理這種模塊依賴有很多模塊加載器(loader)函數(shù)可以借鑒和使用，如YUI Loader， seajs等。

.號外

好吧，我承認(rèn)，我也成了標(biāo)題黨。此博文是在我做了一個(gè)使用了類似技術(shù)純網(wǎng)頁web應(yīng)用產(chǎn)生的一個(gè)靈感。為減少篇幅，沒有粘貼具體代碼，文中涉及的靜態(tài)文件延遲加載和腳本依賴問題是時(shí)下前端探討較多的技術(shù)，可以單獨(dú)成文。

另外，動(dòng)態(tài)加載在ie6下有個(gè)bug，若對a元素點(diǎn)擊綁定事件函數(shù)中包含靜態(tài)文件加載的代碼，那么會(huì)導(dǎo)致靜態(tài)文件加載不成功，被abord掉了。解決方案，當(dāng)然，若是ipad應(yīng)用，就不用考慮這個(gè)該死的ie6bug。