2012-02-20 131 views
6

我發現了article撇開這一點。但我的主要問題是每個屏幕都需要單獨的.html文件嗎?我想是的,但我想要一致投票。另外,這是否也適用於單獨的JS文件呢?組織jQuery Mobile應用程序的最佳實踐是什麼?

編輯:JQM應用程序基本上是管理用戶和角色。

+6

與「最佳實踐」有關的事情很少有「一致投票」。 – Chad 2012-02-20 14:11:51

回答

10

我們有一個生產jQM網站這裏是我們如何做的事情 - 是的,其他人可能會不同意,但我們發現這適用於一個非常大的網站。

  1. 使用多個單一的HTML頁面,一個大型的多頁面模板擊敗JQM的Ajax加載的好處,因爲你加載所有的HTML在啓動(除非你的網站是小)

  2. 你一定要使用AJAX加載,JQM只吸入代碼在你<div data-role="page">但這種複雜的JS見下文

  3. 你不需要多個JS文件,但你需要所有的JS在開始加載,我們通過做兩件事來實現這一點:1.我們將on偵聽器放在文檔根目錄下,並監聽pageinit/pageshow事件。每次加載頁面時,都會觸發這些頁面,您也可以方便地參考當前頁面,並且可以使用頁面上的attr來確定頁面的位置。 2.讓所有JS都包含某種類型(希望您使用的是PHP,CF或其他),並將其放在每個頁面上,這樣,無論用戶通過哪個入口點瀏覽您的移動網站,所有的代碼加載

的缺點是,所有的JS最初加載,但精縮我們發現這沒什麼大不了的,如果它是真的關心考慮RequireJS - 再加上它使得由於JS調試變得輕而易舉在那裏,我們可以輕鬆使用調試器並放置斷點。如果您在每個頁面上動態加載JS,則您需要在每次頁面轉換時返回數據,並且由於重新加載多餘的JS而很難調試動態JS。

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(oEvent){ 

    var pageType = $(this).data('pagetype'); 

    //handle pageinit/pageshow (oEvent.type) for each pageType 
1

我認爲最好每個屏幕都有不同的html文件。它不僅有助於正確維護應用程序代碼並跟蹤更改,還可防止dom變得龐大,因爲在需要時會添加頁面。
至於js,你可以在開發和調試過程中分開使用js文件,但是我建議你應該在部署應用程序並釋放它之前將它們捆綁並縮小它們。

0

這是一個非常主觀的話題,但也正在成爲一個更大的趨勢。有些人更喜歡single page web sites(移動應用程序)。這篇wiki文章在討論單頁應用程序解決的問題方面做得很好。

具體來說,在JQM中,當數據在同一頁面上時,從一頁到下一頁的轉換更加順暢。如果您通過將data-prefetch屬性添加到鏈接來預取常用頁面,也可以實現此影響。

但是,它可能很大程度上取決於您的項目的規模。 jQuery Mobile文檔涉及large DOMs here的一些性能問題。

0

使用多個單獨的HTML頁面。你不需要多個JS文件。每個頁面應該完全獨立,並且能夠獨立存在。縮小,合併和壓縮。始終在每個頁面上使用全局配置腳本。電話號碼,地圖和電子郵件

href="tel:+1[your telephone number here (numbers only)]" 
href="[standard link to google maps here]" 
href=mailto:[your email address] 

驗證使用jQuery驗證使用的ThemeRoller。使用單選按鈕組而不是選擇菜單。添加Google Analytics確定要使用哪種導航樣式。不要從代碼開始。

相關問題