网络编程
位置:首页>> 网络编程>> JavaScript>> Unobtrusive的Web开发

Unobtrusive的Web开发

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

标签:Unobtrusive,web,JavaScript

原文: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>标签中

0
投稿

猜你喜欢

  • 原文地址:30 Days of Mootools 1.2 Tutorials - Day 18 - Classes part IClass(
  • 良好的编程习惯是每个程序员都应该具备的工作素质,在我的软件生涯中屡屡发现一些程序员的身上总有这样或者那样的坏毛病。这些毛病在一些从业时间不是
  • 关于asp缓存函数,类什么的,在网上可以说笔笔皆是,为啥我要不辞辛苦去写一个呢?大概看了下,各有各的优点吧,可是大部分好像不可以缓存数据额,
  • 将有安全问题的SQL过程删除,比较全面.一切为了安全!删除了调用shell,注册表,COM组件的破坏权限use master&nb
  • 在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。你在写HTM
  • 历时半年,我独自一人完成了一个局级单位的管理信息系统,共发布BETA版29次,正式版本3次。ASP+ORACLE环境,285个ASP文件,功
  • 内容摘要:最近在做项目的时候,客户要求表格里的数据可以拖选,于是用JS写了个下面的方法。支持IE、FIREFOX等浏览器。实现对整行、整列数
  • 用新云还不是很熟,一点点学习中。今天遇到一个文章列表前有小圆点的问题,把去除方法记一下。文章列表前有小圆点有这么几种情况:1、li的默认样式
  • 在学校修管理学的时候,有讲过一个管理激励的理论。管理激励是基于行为和认知科学的研究,来发现人们的需要、动机、目标和行为四者之间关系的核心理论
  • Update Scanner这个Firefox附加软件也是一种很好的选择。Update Scanner可以同时跟踪多个网页,并为不同的网页设
  • 首先让我们看下 YUI 是如何处理的:var toObject = function(a) {    var o = {
  • 安装 SQL2000 时,系统经常会提示:操作被挂起,要求重新启动计算机,如图1: 图1重新启动后,再次安装时问题仍然存在。解决办
  • 今天在看框架的时候无意间看到了document.compatMode,经过一番资料查找,终于搞懂了。文档模式在开发中貌似很少用到,最常见的是
  • 很多人可能认为门户网站首页设计只是把一些导航、资讯内容和广告堆积起来摆放得好看就可以了,虽然这个观点也并不是完全错误的,确实门户网站首页是由
  • 经常看到说正则的文章,但说的只是方法,却很少有说以下几个基本概念: 1.贪婪:+,*,?,{m,n}等默认是贪婪匹配,即尽可能多匹配,也叫最
  • 在ASP中,也能让XML发挥其优点。例如像.NET那样写一个XML配置文件,在程序中读取,或者将一些数据量不大又经常访问的数据写入到XML中
  • 过滤非法的SQL字符的函数代码:'*************************************************
  • 下拉菜单平常见到的都是用js来实现的,本文介绍的方法是使用纯CSS实现导航下拉菜单功能,代码符合标准,兼容性好且环保,制作下拉菜单的不错选择
  • Mysql Explain 详解一.语法explain < table_name >例如: explain select * f
  • 前不久网上公开了一个MySQL Func的漏洞,讲的是使用MySQL创建一个自定义的函数,然后通过这个函数来攻击服务器。最早看到相关的报道是
手机版 网络编程 asp之家 www.aspxhome.com