2009-09-30 46 views
8

您是否嘗試過使用單頁網絡應用程序,即瀏覽器只從服務器'GETs'一頁形成,其餘部分由客戶端JavaScript代碼處理(這是一個'應用程序頁面的一個很好的示例'是Gmail)?僅限一頁javascript應用程序

對於更簡單的應用程序(例如博客和CMS),這些方法有哪些專業人員和控制檯?

你如何去設計這樣的應用程序?


編輯:正如在響應中提到的,很難處理後退按鈕,刷新按鈕,書籤/複製url。後者可以使用location.hash解決,其餘兩個問題的任何線索?

回答

5

我把這些單頁的應用程序「長住」的應用程序。

對於「簡單應用」爲你把它是可怕的。這項工作的開箱即用的瀏覽器突然需要特別照顧和關注的事情:

  • 後退按鈕
  • 刷新按鈕
  • 書籤/複製網址

注意我不是說你不能用單頁面應用程序做這些事情,我說你需要努力將它們構建到應用程序代碼中。如果您只是在不同的網站上擁有不同的資源,這些工作無需額外的開發人員。

現在,對於複雜的應用程序,如Gmail,谷歌地圖,好處有:

  • 用戶感知的應用程序的響應能力可以提高
  • 的應用程序的可用性會上浮(如滾動條唐「在HTTP請求 - >應答

一個過程中什麼樣的用戶認爲,當點擊了一個小小的動作)

  • 沒有白色屏幕閃爍T跳到頂部的新頁對長壽命應用的擔憂是內存泄漏。爲每個用戶操作請求新頁面的傳統網站還有一個額外的好處,即瀏覽器會丟棄DOM和任何未使用的對象,以使內存可以被回收。較新的瀏覽器對此有不同的機制,但以IE爲例。 IE需要特別注意在長期應用程序的生命週期中定期清理內存。這些日子,圖書館變得更容易一些,但決不是一件小事。

    與很多東西,混合方法是很大的。它允許您利用JavaScript來延遲加載特定內容,同時通過頁面/網址分隔部分應用程序。

  • 3

    一個專業人士可以獲得JavaScript的完整表現力,而不是非JavaScript網站,瀏覽器可能會在網頁和類似的小麻煩之間閃爍。您可能會注意到較低的帶寬使用以及只處理需要刷新的直接重要部分而不是從服務器獲取完整網頁的結果。

    這背後的主要障礙是無障礙問題。沒有JavaScript的用戶(或那些選擇禁用它的用戶)不能使用你的網站,除非你做了一些認真的服務器端編碼來確定要做出什麼反應,具體取決於請求是否使用AJAX進行。根據您使用的(服務器端)Web框架,這可能很簡單,也可能非常繁瑣。

    這是不是一般認爲有一個好主意,有一個完全依賴於JavaScript的用戶的網站。

    +0

    是否有JavaScript禁用主要關注?絕大多數用戶不會啓用它嗎?這些天最受歡迎的網站需要JavaScript(Gmail,但也包括Facebook,Youtube)。我相信這些日子使用的功能較差的瀏覽器會是IE 6. –

    +0

    Google Mail不需要JavaScript AFAIK。如果您嘗試使用Lynx等瀏覽器訪問GMail,或使用Firefox的NoScript插件訪問GMail,它將優雅地降級爲僅HTML體驗。 –

    0

    我正在創建這些類型的網頁作爲iPhone的webapps。我的方法是將所有內容都放在一個巨大的index.html文件中,並隱藏或顯示某些內容。這顯示和隱藏,即頁面的導航,我控制在一個特殊的JavaScript文件,其中處理頁面中的部分顯示所需的功能。

    Pro:一切都在開始時加載,您不需要再向服務器請求任何內容,例如, 「切換」內容和執行操作非常快。如果你有很多內容需要立即顯示,那麼所有內容都需要加載......。

    另一個問題是,如果連接斷開,用戶在真正需要服務器端之前不會注意到。您也可以在Gmail中注意到這一點。 (雖然它有時可能是一件積極的事情)。

    希望它有幫助!迎接

    +0

    爲什麼要硬編碼第一頁上的所有內容?!?你不能懶惰通過Ajax加載你的內容嗎?這會減少您的初始加載時間,並且在實際需要時可以加載小塊內容。 – moxn

    +0

    在我的情況下,在開始時全部加載是件好事,但是,你完全正確,加載ajax是自然而然的事情。 – cssmaniac

    0

    通常,你會採取像GWT,Echo2或類似的框架。

    這種方法的優點是,應用程序感覺更像是一個桌面應用程序。當服務器足夠快時,用戶不會注意到來回傳輸的很多小數據包。另外,從頭開始加載頁面是一項昂貴的操作。如果您只是修改其中的一部分,瀏覽器可以在內存中保留很多現有模型,只需更改已更改的部分即可。

    這些框架的另一個優點是您可以在純Java中開發您的應用程序。這意味着你可以調試它在IDE中,就像任何其他Java應用程序,你可以編寫單元測試,並自動運行它們,等

    3

    一個主要CON,並已經採取AJAX或許有點過於網站的主要投訴很遠,你是否喪失了對網站內容「深入」的頁面進行書籤的能力。當用戶爲該頁面添加書籤時,他們將始終獲得該站點的「前」頁面,而不管他們在製作書籤時看到的是什麼內容。

    +3

    最近已經通過使用URL的'hash'部分來允許爲JavaScript應用中的頁面添加書籤。 Gmail就是一個很好的例子。儘管使用JavaScript生成每個電子郵件都可以添加書籤。 ASP.NET(以及其他framworks,我敢肯定)已經將此功能構建到了AJAX應用程序的框架中。 –

    +0

    URL的哈希部分?這與查詢字符串是一樣的嗎?不會更改父頁面的URL強制重新加載該頁面?我很好奇 - 有一個例子的鏈接? – Matt

    +0

    使用jQuery的人可以利用歷史記錄插件的功能來實現:http://www.mikage.to/jquery/jquery_history.html – James

    1

    主要的原因,以避免它是採取單獨這是非常搜索不友好。對於像GMail這樣的webapps來說,這並不需要公開搜索,但對於您的博客和CMS驅動的網站來說,這將是一場災難。

    你當然可以創建簡單的HTML版本,然後漸進式增強它,但一次可以在兩個版本中很好地工作可能是一堆工作。

    0

    我要補充的是在較慢的機器,一個con是,大量的JavaScript會帶來瀏覽器來個急剎車。由於所有的渲染都是在客戶端完成的,如果用戶沒有更高端的計算機,它將破壞體驗。我的工作電腦是P4 3.0GHZ,內存爲2GB,而JavaScript重度網站導致它比糖蜜慢,這真的會讓我失去用戶體驗。

    2

    也許你應該檢查SproutCore(蘋果用它的MobileMe)或Cappuccino,這些都是JavaScript框架,使正是這樣,設計類似於桌面的接口,只有通過JSON或XML從服務器獲取響應。

    將兩者用於博客並不是一個好主意,但設計良好的類似桌面的博客管理區域可能是一種喜悅的使用方式。

    +0

    正是我想到的,謝謝你的框架! –

    相關問題