本節書摘來異步社群《jquery mobile入門經典》一書中的第1章,第1.1節,作者:【美】phil dutson,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
jquery mobile入門經典
世界正在變得可移動化。根據預測,移動網站的流量在未來幾年将會超越桌面網站的流量。即使是現在,随處可以見到人們在使用移動裝置來學習、購物、比價,以及在等待約會時作為消遣。移動裝置如此友善,可以随意帶到任何地方。
來看一下您是如何使用目前的移動裝置的。即使您隻擁有一台ipod touch,我敢打賭,您肯定會通過它檢視郵件、查找天氣預報并且浏覽少量的網頁。至于您已經安裝的應用,其中一部分很有可能或已經是設計精巧的web應用了。
當您在手機上浏覽的時候,大概已經注意到了越來越多的網站提供了一個移動裝置的體驗或專門的版本。您可能想知道他們是如何建立這個網站的,或者他們是否使用一個複雜的内部系統或架構來制作這個網站。
當然也可能完全不是那樣。您可能注意到,通過智能手機或平闆電腦上的移動浏覽器載入一個網站的時候,裝置可能會因為需要載入過多資源而崩潰。
您知道,一定有一種方法使移動網站具備響應式的、靈活、簡單的特性,但從何開始呢?大量的移動開發工具包和套件可以使用,但對它們的支援或它們的可靠性又如何呢?
答案其實很簡單:您應該使用jquery mobile。
網站的快速響應與許多因素相關:網頁轉場時如何顯示、輕觸一個按鈕時發生什麼,以及網頁内容是如何載入的。
您知道“點選”事件與“觸摸”事件是有差別的嗎?更重要的是,您知道這兩個事件有大約300毫秒的時間差嗎?當然,300毫秒聽起來不算太多,但如果那是點選按鈕之後延遲的1/3秒呢?您會因為感覺到延遲而重新點選一次嗎?這是jquery mobile可以幫助您改善的問題之一。使用觸摸事件能減少延遲,加快網站載入時可以感覺到的速度,同時極大地提升使用者的滿意度。
另一個問題是,移動裝置在載入普通網頁時要花多長時間。有時候您會看到背景先渲染出來,然後是圖檔占位框,最後才是文本。我曾經遇到過這樣的網站,背景載入後就什麼也看不到了,因為要等大幅圖檔或視訊完全載入,導緻整個頁面停在非常難看的未完成狀态。我可沒有足夠的閑功夫去看它們最終是否載入完畢。一個看不到完整網頁或不能正确浏覽的非響應式網站,無法提供良好的移動體驗。
jquery mobile在加載圖檔等内容時,綜合運用延遲加載技術和合适的ajax技術,解決了頁面載入的問題。也就是說,網站首先載入對使用者來說最重要的内容,當使用者被這些第一時間呈現出來的資訊所吸引的時候,再同時載入其他的内容。
在實際開發過程中,當您投入全部精力到一個架構時,卻發現不能對它進行自定義,沒有比這更糟糕的事情了。假設您不喜歡架構提供的其中一個小部件怎麼辦?假設樣式很難看或與您的品牌不相比對怎麼辦?假設架構可以讓您自定義樣式,卻不允許添加自定義的小部件怎麼辦?這些問題都很實際,使用jquery mobile很容易解決。
如果您不喜歡預置的主題,可以使用themeroller來建立屬于自己的主題。假設您喜歡整體的主題樣式,但需要一個不同顔色的标題樣式怎麼辦?很簡單,您可以使用第二個樣式表單來覆寫現有的樣式。如果要在靈活更改樣式方面做到極緻的話,您甚至可以把預置的主題替換成自己的主題,進而可以微調所有設定來滿足您的需求或與品牌比對。
至于小部件,可以随意建立您想要的。因為jquery mobile基于jquery架構,您可以像在非移動網站上那樣建立和使用小部件或插件。您需要預先考慮到移動環境的不同點(沒有滑鼠懸停狀态或事件、螢幕尺寸受限、較弱的計算能力等),之後就可以自由自在地使用标準javascript或借助jquery架構來建立想要的小部件或插件,并在移動網站中使用它們。
借助于一些新的html5推薦标準以及jquery架構來建立一個網站相當簡單。不需要學習架構專有的标記,隻是對現在已經在使用的标記的屬性進行修改。
jquery mobile基于令人驚訝的jquery庫而建立。jquery庫已經證明是一個快速、高效和可靠的javascript庫。jquery已經席卷web開發領域,并改變了開發者在網站與web應用開發中執行和使用javascript的方式。
jquery團隊緻力于讓jquery庫成為javascript開發的第一選擇。以此作為基礎,jquery mobile確定能獲得全面的支援,并在未來成為可信賴的解決方案。jquery還被微軟公司作為首選的javascript架構,在visual studio中包含了全面的代碼自動完成支援。
與jquery mobile團隊取得聯系很簡單。他們有專門的部落格、論壇和twitter賬号,用于持續讨論更新、特性、有用的提示和指導。jquery mobile開發社群正在快速地成長,現在正是投入和參與這一項目的最好時機。