DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Javascript開發是否預留退路?
Javascript開發是否預留退路?
編輯:關於JavaScript     

網頁制作poluoluo文章簡介:對於web開發中的預留退路問題,我一直猶豫不決。在安全方面,自然是不能完全相信JavaScript,這點是確定的。

早上收到一封郵件,問的正好是我一直如哽在喉的事情:

對於web開發中的預留退路問題,我一直猶豫不決。在安全方面,自然是不能完全相信JavaScript,這點是確定的。但在用戶體驗方面,是否真的需要處處”預留退路”,照顧那些不支持JS或者對JS支持不好的用戶嗎?而UED工程師們又一直在說,不”預留退路”會惹惱數量不少的用戶,但卻從沒有人提起具體會是多少用戶、多少比例。不知道YY大神手裡有這方面的數據嗎?記得YY您在建立Limbo混沌海的時候,就選擇了”不預留退路”的方式,不知當初又是出於什麼原因這樣考慮的呢?非常想聽聽您對”預留退路”問題的看法,期待您的回信。

這種設計觀念,或者說原則,不管它叫什麼名字,比如“預留退路”/“平穩退化”(Graceful Degradation),“漸進增強”(Progressive Enhancement),“不唐突的javascript”(Unobtrusive JavaScript)……從UE的角度來說是非常重要的,它的重要性不僅僅來自“有多少比例的用戶不開啟javascript支持”,而是因為如今訪問web的方式正在變的越來越豐富多樣,平板電腦(Tablet PC),上網本(netbook),掌上電腦(UMPC/MID),手機,iphone/ipod touch,這些平台有完全不同的性能,屏幕尺寸,浏覽器,和操作方式,它們對javascript的支持也可能不一致(比如我以前抱怨過iphone的差別)。很多“嚴肅”的網站還需要考慮到“可訪問性”(Accessibility),要保證能支持屏幕閱讀器之類的設備,讓那些有視覺缺陷的用戶也可以無障礙的使用。此外還有語義網方面的要求,隨著web2.0帶來的海量信息,互聯網也在向一台超級計算機的方向發展,需要靠網絡本身去處理網絡上的信息,而不是靠人的肉眼去一張網頁一張網頁的識別,現在的網頁不僅僅是供人閱讀,同樣也需要面向機器,所以不能因為javascript的使用而影響到內容,讓機器無法抓取和識別。

不過,以上這些觀念有兩方面的局限性:

第一,它們僅僅適用於傳統的,“文檔”式的網頁,互聯網的原始形態,只是內容的組織形式和傳播手段,對於多數網頁來說,內容才是根本,JS只是錦上添花,或者說是調料,最重要的是保證內容的完整語義,可訪問性,以及適應過去/現在/未來的多種平台的能力。但是,除了“文檔”類型的網頁,現在也開始興起大量的”web應用”,它們是在線的服務,也是在線的軟件,對它們來說,浏覽器是一個容器,網頁是一種界面呈現方式,數據是異步獲取的,頻繁變化的,而且是細粒度的(比如並非一篇完整的文章,而是一若干來自數據庫的字段),雖然同樣以內容為中心,但是在這個語境裡,“內容”是指純粹的數據,而並非整塊整塊的HTML,一旦缺少了界面的交互功能,缺少了JS程序的支持,數據根本就無法呈現,也就根本不具備訪問這些應用的條件,對於這種類型的網頁來說,“預留退路”並非是不可侵犯的信條。

更多情況下,網頁是復合的,會同時包含文檔和軟件應用的特點,於是就應該有選擇的采納那些適用於自己的原則,比如把JS和CSS與內容有效的分離,兼容多種平台,保證核心內容能被搜索引擎抓取,等等。

有一個很好的例子是土豆網的播放頁,這是在土豆網全站當中,最重要同時也是web應用特征所占比例最大的頁面之一,javascript和flashplayer對它來說是必不可少的基礎運行環境,所以你可以看到它的html設計跟其他頁面有很大差別:

  • script標簽出現在html頂部——在其他網頁裡,我們習慣把css放在頂部,js放在底部,讓頁面先呈現,之後再附加行為,但是在播放頁面裡,播放器是最重要的內容,播放器加載的速度是最關鍵的用戶體驗。
  • HTML裡會包含JS代碼——只有一處,就是TUI.player.load,理由同樣是為了保證播放器加載速度這個核心用戶體驗,不得不祭出document.write這種“非常不提倡”的必殺技來寫入flash元素
  • 有大量內容通過AJAX獲取——比如評論,還有側欄裡的某些模塊。因為它們是分離的數據,並非主要內容
  • 沒有使用正常的流式布局——player和toolbar都是脫離文檔的獨立區域,采用絕對定位
  • 側欄上的視頻截圖並沒有把原始文件地址放在src屬性裡——延遲加載,如果不拖動滾動條,很多圖片就不會無意義的下載

但是在很多方面同樣也要做到Unobtrusive:

  • 對於核心內容,比如視頻信息,作者信息,都是遵循文檔式網頁的設計原則,對搜索引擎友好
  • 在豆單播放頁裡,播放器下面的界面列表雖然是一個界面元素,但是也應該包含在文檔的語義中,所以采用html的UL/LI來實現


第二個局限性是:這些原則早晚會過時。以前WaSP成員們千辛萬苦推廣這些觀念的時候,互聯網上到處都是慘不忍睹的網頁,建立標准和規范,進行觀念的革新,這些需求勝過了對技術的應用,而現在web標准早已普及,web應用需要進一步發展。以前Douglas Crockford,PPK在傳道的時候,國外的網站還必須支持ie5.5甚至5.0之類的浏覽器,惡劣的環境讓web設計者和開發者們必須自我約束JS的使用,避免形成門檻。而現在,ie6在國外的占有率已經開始低於firefox(20%),很多網站已經開始放棄對ie6的支持,google和yahoo也在引導用戶替換ie6。剛才我提到過,通過各種移動設備訪問web的用戶正在迅速增多,而這些設備對JS的支持不一致,但是這就像桌面電腦上的發展過程一樣,同樣是一個暫時現象,隨著webkit變成iphone,android,palm pre這些新平台的統一標准,Mozilla也在積極把XUL技術應用到移動平台,環境的變化其實比桌面電腦要快的多。

我認為Graceful Degradation,Progressive Enhancement,Unobtrusive JavaScript這類東西都不適合過度的鼓吹,它們只是基礎概念,是在特定時期特定環境中形成的經驗和指導,而不應該是束縛前端開發人員和產品設計人員的教條,實際上,這些保守的觀念來自技術的局限,而技術的局限不是我們逃避使用技術的理由,相反,我們可以仍然使用技術來打破這些局限,我們需要的是像ie7.js,excanvas.js,jquery.js這樣的解決方案,而不是在開發中畏首畏尾,把每個前端開發者都教唆成原教旨主義者(上次我們公司的小麥對我說:前端開發都有這種傾向……我要說這是歷史遺留的傷痕,將在世代中流傳下去……)

最後回復兩個郵件裡的問題……

關於用戶的統計數據,土豆網是有的,可以想象由於多數用戶比較大眾和小白,IE6的比例相當高,比較冏的是,騰訊TT的比例也很高,等同於Firefox,我必須說它那種跟QQ綁定在一起,經常無意中啟動,啟動之後就設置為默認浏覽器的套路,確實很強大……在普通用戶當中,“默認”是強大的力量,默認的通常就是最熟悉的,最熟悉的就是最好的……不過,統計數據有時並不能真正反映出用戶數量,比如Opera用戶在你的統計數據裡只占到0.01%,你就要思考一下究竟是Opera用戶確實只有這麼多,還是你的網站對Opera支持太差,導致人家都不來……

關於我的blog……其實我很早就計劃重做這個blog了,現在的版本是一年半前的,從技術上來說很幼稚,我都懶得優化和修補了……但是,即使重做,我仍然不會把別人的“用戶體驗”放在第一位,就像側欄裡說明的那樣:“優先滿足個人喜好”。blog有很多類型,有的是個人媒體,有的是文集,有的是日記,有的是個性化空間,而我想要的blog是“個人信息聚合”,除了滿足閱讀的需求,必然還要包含大量個性化內容,也就是說,用戶首先是我,其次才是讀者和我的好友,而對於閱讀者來說,浏覽方式不止一種,比如我自己就更習慣用google reader來閱讀blog,如果用戶願意選擇網頁形式來訪問,就會被強加很多個性化內容,桀桀桀,喜歡的繼續看,不喜歡的關掉頁面離開,這也算雙向選擇罷……

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved