tion %> 山东麻将258将游戏
當前位置:首頁 > 建站知識

Unobtrusive的Web開發

更新時間:2009.06.22 瀏覽次數:

今天才看見的一個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>標簽中
  • 為什么要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前端開發方式,實現得越接近,無論是對用戶,還是對開發者,甚至對計算機,都會更有好處。

烟台麻将规则 家彩开奖排列三开机号 云上策配资 cba直播比分 球探比分即时足球比分手机 日本女优电影免费下载 3d太湖字谜图谜总 伦敦奥运会排球比分 黑龙江省p62开奖查询 青海十一选五今天开奖结果查询 好运快3诈骗 娱乐城即时比分 高升网 湖南快乐10分 20选5今日开奖 河北麻将单机版 即时赔率亚洲赔率澳门赔率