有关前端文档的...

作者：Lightning@小宝 发布时间：July 25, 2010 分类：web标准设计

前端文档缺失的原因
前端开发的文档相信大多数情况下都没有后端的服务描述详细，而大多数测试也仅仅在黑盒测试，所以很多情况下对这片文档的描述都廖廖无几。
前端开发的代码分散——没有规范化，没有很好的设计，大多数人仍以业务为主的开发方式。
测试人员对前端仍然处于黑盒测试，有没有文档都不影响到他们的测试进程。
一旦业务定型，用传统方式的文档模式，很难复制到前端开发来。——改变了开发方式（从作坊式到规范化）让人难以适应。
尝试对症下药
对于代码分散的问题需要从源头解决。从规范化开始，试点从头到尾惯穿规范化，强制的约定，使代码质量提高。
这一块需要下大力气，中间加入设计review、代码review等环节。需要注意的是粒度把控，即什么是必须的，什么是可选的，什么是约定的等有共识。
功能描述——开发前的工作，对编码者来说必须收集需求。对于使用者来说，能够知道写这个代码的目的是什么，解决了什么问题，还有什么问题没有解决，或需要改进。
设计描述——分享你的思想，这很重要，一个成熟的开发人员看开码的时候很多时候不是看你实现如何如何，而是看你的设计。
API描述——使用者快速上手。接口是代码的眼睛。命名要严谨，不能说也可这样，也可那样。经验告诉我们，接口做得不好，历史原因就会多。
demo/snippets——给使用的人copy/paste没什么不好。
使用指南——例如库的使用指南等手册。或者说一个简单的上手教程
文档该由谁来写？
从理论上看，文档都应该由编码者来写，其实不然。一个软件的周期，可以分为：开发前，开发时，使用时，测试时，维护时。
那么各时间段上应该有不同的人来参与。缩小些范围来看的话，应该将
开发前收集需求由大家参与。实现者收集后存档到文档里。此为开发目的与预期。
开发时的API描述，设计描述主要由编码者来实现。
开发后/维护时的demo及snippets可以由使用者来完善。
设计文档是否能自动化生成
代码注释(现在一般都用java doc)可以生成接口文档。
以往都必须自己画设计图，配上描述。那么理论上这块也应该可以通过注释加入设计的描述，通过文档生成的工具自动生成设计图。这样应该方便多了。

原文出处：http://www.never-online.net/blog/article.asp?id=294

前端优化之-无阻塞加载

作者：Lightning@小宝 发布时间：June 15, 2010 分类：web标准设计


下面有6种非阻塞式加载脚本的技术:

1. XHR Eval - 通过XHR下载脚本，通过

eval()

执行.
2. XHR Injection - 通过XHR下载脚本，通过创建一个script的DOM元素注入页面，并且设置

text

属性.
3. Script in Iframe - 在一个HTML页面内包含脚本并通过iframe加载.
4. Script DOM Element - 创建一个script的DOM元素，并且设置

src

属性为脚本的url
5. Script Defer - 增加脚本的

defer

属性.曾经仅在IE中可用，现在Firefox 3.1. 中也可以了
6. document.write Script Tag - 在HTML页面内使用

document.write

 

<script src="">

 . 仅在IE有效.

 
我本人常用的4 -> 2 -> 1 ;
 

重构HTML,改善用户体验

作者：Lightning@小宝 发布时间：April 8, 2010 分类：web标准设计

何时应该重构HTML,改善用户体验，有如下情况：

1、难以辨认的代码；

2、缓慢的页面呈现速度；

3、不同的浏览器，不同的呈现；

4、网页需要危险或者非标准的技术支持；如使用Flash,Js 等

5、网页被挂马；

6、搜索引擎排名非常靠后；

7、其他待续。。。。;

当存在大量的冗余代码(css, javascript, html) 时，应尽力去重构你的代码！这是非常有意义的事。

网页里的DOCTYPE能有多少种

作者：Lightning@小宝 发布时间：March 21, 2010 分类：web标准设计

目前，总验证承认下列DOCTYPEs，以确定HTML验证，适用于网页。这通常应在您的HTML页的第一个标记，请注意，这些通常是区分大小写：

XHTML 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML Basic 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

XHTML+RDFa 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Loose:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML-Print 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML-Print 1.0//EN" "http://www.w3.org/TR/xhtml-print/xhtml-print10.dtd">

XHTML Basic 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

(X)HTML5:
<!DOCTYPE html>

(X)HTML5 (alternative):
<!DOCTYPE html SYSTEM "about:legacy-compat">

HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Loose:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

HTML 4.01 Frameset:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd">

HTML 4.0 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

HTML 4.0 Loose:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

HTML 4.0 Frameset:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">

ISO/IEC 15445:
<!DOCTYPE html PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">

ISO/IEC 15445 (alternative):
<!DOCTYPE html PUBLIC "ISO/IEC 15445:2000//DTD HyperText Markup Language//EN">

HTML 3.2:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 3.2 (alternative):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

HTML 3.2 (alternative):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Draft//EN">

HTML 2.0:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

HTML 2.0 (alternative):
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
以上doctype总结，我并没有验证！ 

CSS属性position详解

作者：Lightning@小宝 发布时间：March 15, 2010 分类：web标准设计

position 有五个值：static、relative、absolute、fixed、inherit。

static

是默认值。就是按正常的布局流从上到下从左到右布局，平常我们做网页时，没有指定 position，也就表示使用 static。

relative

没有脱离布局流，此时可以使用 top、right、bottom、left 属性。

top 和 bottom 共存时，使用 top 值，忽略 bottom 值；

left 和 right 共存时，使用 left 值，忽略 right 值；

relative 是相对位置，指相对于元素的 position 为 static 时的位置：

top 相对于 static 下移多少像素（若 top 是负值，则上移）。

right 相对于 static 左移多少像素（若 right 是负值，则右移）。

bottom 相对于 static 上移多少像素（若 bottom 是负值，则下移）。

left 相对于 static 右移多少像素（若 left 是负值，则左移）。

使用 relative 之后：

原来的空间不会被其他元素挤占。

元素在最终位置时也不会挤占其他元素的空间，它浮动到其它元素的上方。

absolute

脱离布局流，此时可以使用 top、right、bottom、left，但这些属性不再是相对于 static 时的位置，而是相对于 containing block 的，相对于其边框内边缘的，而不是其 padding 内边缘。

使用 absolute 之后：

原来的空间会被其他元素挤占。

元素在最终位置时也不会挤占其他元素的空间，它浮动到其它元素的上方。

fixed

它的模式与 absolute 相同，不过无论怎么拖动滚动条，它始终固定在屏幕的指定位置。在 IE6 中不支持这个属性；在 IE7 中支持这个属性但需要指明 DOCTYPE；Firefox 等浏览器支持这个属性。

top、right、bottom、left 属性指相对于视口的。

inherit

继续父元素的 position 值。

名称解释

视口－通过解析文档，连续媒体（比如屏幕就是连续媒体，而打印机则是基于页的媒体）给用户产生一个视口（一个窗口或其它在屏幕上显示的区域）。

这里看 demo

  1. 页码:
  2. 1
  3. 2
  4. 3
  5. 4
  6. 5
我要报警