Unobtrusive的Web开发

作者:March 来源:三月的蚁穴 时间:2007-11-23 13:13:00 

原文:Unobtrusive Ajax

今天才看见的一个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,web,JavaScript
0
投稿

猜你喜欢

  • PyQT实现菜单中的复制,全选和清空的功能的方法

    2023-08-13 03:09:23
  • 名片管理系统python版

    2021-08-06 01:50:15
  • javascript中的throttle和debounce浅析

    2024-05-08 10:10:27
  • javascript学习随笔(编写浏览器脚本 Navigator Scripting )

    2024-04-28 09:49:39
  • Python趣味挑战之实现简易版音乐播放器

    2021-06-25 15:13:43
  • 将各种类型或对象都转变为数组

    2009-12-28 13:19:00
  • python实现的希尔排序算法实例

    2023-03-27 05:01:38
  • python3实现多线程聊天室

    2021-09-11 07:35:47
  • centos 7系统下编译安装 mysql5.7教程

    2024-01-26 00:34:48
  • 利用OpenCV给彩色 图像添加椒盐噪声的方法

    2023-06-15 00:11:30
  • Python类的基本写法与注释风格介绍

    2023-01-15 07:53:52
  • Python牛刀小试密码爆破

    2021-10-05 14:18:47
  • vue中的Object.freeze() 优化数据方式

    2024-04-10 16:10:25
  • python3实现读取chrome浏览器cookie

    2023-10-18 13:18:44
  • Linux/Mac MySQL忘记密码命令行修改密码的方法

    2024-01-26 04:42:12
  • Python JSON编解码方式原理详解

    2023-10-24 10:33:33
  • git 优雅的撤销中间某次提交方法

    2023-12-27 11:12:50
  • Python基本知识点总结

    2022-06-04 13:35:49
  • python日志模块logbook使用方法

    2021-10-02 02:25:50
  • Python 分支结构详解

    2021-03-17 01:43:06
  • asp之家 网络编程 m.aspxhome.com