tion %> 山东麻将群1元麻将群
當前位置:首頁 > 建站知識

Unobtrusive的Web開發

更新時間:2009.06.22 瀏覽次數:

 

為什么要Unobtrusive

Unobtrusive開發的優勢

  • 代碼更佳簡潔,并且易于維護
    • 易讀和易懂意味著更容易修改
    • 修改全部的樣式僅僅需要修改CSS文件
    • JavaScript能夠很容易的修改
    • HTML的修改變得更加保險
  • 能夠提高可訪問性(accessibility)
    • 可訪問性意味著所有人都可以訪問你的內容
    • 你不能揣測所有人
    • 但你可以肯定的是所有瀏覽器都能夠處理HTML
    • 大約10%的訪問者是不能夠使用JavaScript功能(www.w3schools.com/browsers/browsers_stats.asp
    • 有些人使用的是屏幕閱讀器,有些人無法使用鼠標
  • 有利于搜索引擎優化
    • 搜索爬蟲無法解釋CSS和JavaScript
    • 搜索爬蟲只會順著<a>繼續爬行
    • JavaScript和Flash中的內容無法被搜索到
    • 更多的內容,更結構化的HTML,使得頁面相關性更高

不過有時,不得不使用JavaScript

  • 當然,離了JavaScript,JavaScript游戲肯定無法運行
  • 很多Web統計服務的腳本依賴于JavaScript
  • Google Ads需要JavaScript
  • 對于Unobtrusive,只要盡量做到就好了

如何進行Unobtrusive的開發

不要去問別人,直接去做

從沒有JavaScript開始入手

  • 使用帶有鏈接和表單的純HTML
  • 使用CSS來實現hover和滾動效果
  • 使用HTTP的功能(比如用”Location”頭來轉向)

重視鏈接

  • 頁面上的所有鏈接,離了JavaScript都應該能夠正常工作
  • 這也意味著不使用javascript:偽協議
  • 甚至不要使用<a href="#">
  • 如果有鏈接一定要使用JavaScript,那么就用JavaScript來把鏈接添加到頁面中

為CSS和JavaScript提供hook

  • 給一個頁面中唯一的元素加上ID
  • 給重復使用的元素加上class
  • 使用列表等其他有語義的結構

使用可靠的技術

  • 從純HTML和CSS開始
  • 動態的為鏈接和表單添加高級交互功能
  • 同時通過HTML和JSON/XML兩種方式提供內容
  • 為有或沒有JavaScript的情況提供額外的CSS
  • 為有JavaScript和無JavaScript的用戶提供不同的應用

我的看法

Unobtrusive應該是對Web Standards的進一步深化,也可以理解為Web Standards的一個方面。但是,這種開發方式目前仍然是一種比較理想化的方式,也許在個人,或者小團隊的開發中可以貫徹的很好。但是到了大型項目中,嚴格的執行未必是一種高效的方式。盡管代碼的易維護性顯而易見,但是大部分項目的前端代碼不一定有維護(或者大量維護)的需求,而項目要求的更多是能夠在最短時間內完成。

然而,Unobtrusive絕對是一個具有指導性的Web前端開發方式,實現得越接近,無論是對用戶,還是對開發者,甚至對計算機,都會更有好處。

今天才看見的一個Presentation,是Jesse Skinner在06年10月發表的。雖然題目是關于Ajax的,但實際上前面很大篇幅再講什么是Unobtrusive的Web開發,而且將得也很有意思。下面把其中的要點摘錄出來翻譯,分享一下。

對Web前端進行分層

  • Web前端的分層:
    • 核心思想:結構(HTML)、表現(CSS)和行為 (JavaScript)
    • 物理上:.html、.css和.js文件
    • 概念上:各層之間,相互獨立,互不影響
  • 借用MVC的思想:
    • Model - HTML
    • View - CSS
    • Controller - JavaScript

物理上的分層

  • CSS只出現在.css文件中,JavaScript只出現在.js文件中
  • 在HTML中不會出現onloadonclick或者style屬性
  • 不使用不贊成使用的HTML,比如font標簽和align屬性

概念上的分層

  • 內容和表單在純HTML中(沒有CSS和JavaScript)也能夠正常顯示和使用
  • 表單和鏈接在沒有JavaScript時候也能正常工作
  • 只在CSS中定義表現,而不是在HTML或JavaScript中
  • 任何人可以通過任何客戶端訪問內容,即便是沒有CSS、JavaScript,甚至沒有鼠標

兩種分層有何不同

  • 物理分層主要使開發者受益
  • 概念分層主要讓使用者受益

Unobtrusive的前端

Unobtrusive的HTML

  • 使用更多的HTML標簽
  • 只將<table>用于表格式的數據
  • 避免使用無意義的<div><span>

Unobtrusive的CSS

  • All CSS is unobtrusive
  • 盡量使用可重用的class
  • 將CSS放在外部.css文件中,或者<style>標簽中
  • 最好使用<h1>,而不是<div class="header">

Unobtrusive的Flash對象

  • 用JavaScript將HTML替換成Flash
  • Bobby van der Sluis的腳本(bobbyvandersluis.com
  • 將Flash的內容同樣放在HTML中
  • 如果瀏覽器支持Flash,用戶將會欣賞性感的Flash版本
  • 不要在HTML中加入混亂的Flash代碼

Unobtrusive的JavaScript

  • 從純HTML入手
  • JavaScript只用來為HTML添彩
  • 不要擺架子,測試每一個細節
  • 離了JavaScript,頁面仍然能夠正常工作
  • 不要使用onclickjavascript:void(0)
  • 將JavaScript放在外部.js文件中,或者<script>標簽中
烟台麻将规则 卡五星麻将怎么算番 5分11选5技巧 3d开奖结果今天号 大赢家足球即时比分中 宁夏11选五走势图规律 欢乐麻将血流麻将规则 丹麦对瑞士比分预测 2019十大股票推荐 广西福利*快乐双彩 澳洲体彩幸运5开奖 星悦福建麻将hd 体彩20选5 山西十一选五计划 什么麻将可以开四个人好友房 足球比赛比分赔率 即时网球比分直播