四有新人

本站不支持IE，谢谢

RSSRSS twitterTwitter FacebookFacebook Google+Google+ eMaileMail

前台页面开发规范

六 23

Wang Wen Hao互联网, 我的工作 , , , No Comments

Web 开发的分散性和交互性，决定了 Web 开发必须遵从一定的开发规范和技术约定，只有每个开发人员都按照一个共同的规范去设计、沟通、开发、测试、部署，才能保证整个开发团队协调一致的工作，从而提高开发工作效率，提升工程项目质量。

一、基本规范：

页面一定要有相应的Title，特殊页面可以不要；如Iframe页、Include页等

主要页面要有meta字段以便于搜索引擎查找，还可充当注释作用

尽量使用广泛支持的技术。以流行的浏览器及版本为标准，同时照顾低版本

不使用过小的字体不使用过大的图片、动画、声音、不使用过长的滚屏

及时删除无用文件，防止无谓的下载速度减慢、后期维护简洁明了

所有文件全部以小写字母命名，包括图形文件。禁止用中文作文件名

页面支持最低800X600屏幕分辨率（实际尺寸为778*434px），即不能出现横向滚动条

通常情况下页面应以居中为主，如有特殊要求可以设置居顶、居左

图片采用gif, jpg压缩格式，以减小页面下载数据量，<img alt="" />标记要有width,height属性

所有页面都需要定义背景颜色，系统默认值是可以被用户随意更改的

二、文件命名与目录结构规则

首页面必须是以index.htm 、index.jsp命名的文件，按目录划分

HTML文件扩展文件名一律用 .htm，不要同.html扩展名混用

除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录名应以英文、拼音为主。尽量用一些大家都能看懂的词汇。

目录下新建css文件夹，专门用来存放本级目录的全局CSS样式文件

目录下新建image文件夹，专门用来存放本级目录的全局图片资源，如gif、jpg

目录下新建script文件夹，专门用来存放本级目录的全局脚本程序代码，如js、vbs

目录下新建media文件夹，专门用来存放本级目录的全局媒体文件，如flash、avi

目录下新建temp文件夹，专门用来存放本级目录的临时或测试资源文件

根目录下一般只存放index页面及其所包含的帧页面与一些公共页面，如error、wait

所有文件与目录尽量符合DOS系统8/3文件格式命名，即8字节文件名、3字节扩展名

三、表格嵌套布局规范

在排布表格之前,请大家一定要好好思考一个最佳的方案,表格的嵌套尽量控制在三层以内,并且应该尽量避免 两个标记,经验表明,这两个标记会带来许多麻烦。

一个网页要尽量避免用整个一张大表格,所有的内容都嵌套在这个大表格之内,因为浏览器在解释页面的元素时,是以表格为单位逐一显示,如果一张网页是嵌套在一个大表格之内,那么很可能造成的后果就是,当浏览者敲入网址,他要先面对一片空白很长时间,然后所有的网页内容同时出现。如果必须这样做,请使用<tbody>标记,以便能够使这个大表格分块显示。

排版中我们经常会遇到需要进行首行缩进的处理,不要使用 或者全角空格来达到效果,规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上<p>标记,注意,一般情况下,请不要省略</p>结束标记 。

原则上,禁止用 <img alt=”" width=”?” height=”?” /> 来人为干预图片显示的尺寸,而且建议 <img alt=”" /> 标签中不要带上 width 和 height 两个属性,这是因为制作过程中,图片往往需要反复的修改,这样可以避免人为干预图片显示的尺寸,尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时,不会留出图片的站位大小,可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的,不会有这个现象）,尤其是当图片的尺寸较大时,这种现象会很明显,所以当预料到这种会明显导致网页抖动的情况会发生时,请大家务必在最后给 <img alt=”" /> 附上 width 和 height 属性。

为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用<br>来人工干预分段。

不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。

请不要在网页中连续出现多于一个的半角空格, 也尽量少使用全角空格（英文字符集下,全角空格会变成乱码）,空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的 gif 图片来实现。

中英文混排时,我们尽可能的将英文和数字定义为 verdana 和 arial 两种字体。

行距建议用百分比来定义,常用的两个行距的值是 line-height:120%/150%

网站中的路径全部采用相对路径,一般链接到某一目录下的缺省文件的链接路径不必写全名,如我们不必这样：<a href=”aboutus/index.htm”> 而应该这样：<a href=”aboutus/”></a>

四、Web标准设计规范（XHTML+CSS）

为页面添加正确的DOCTYPE，过渡型（Transitional）、严格型（Strict）、框架型（Frameset）

设定名字空间（Namespace）

声明编码语言

用小写字母书写所有的标签元素与属性名字

为图片添加 alt 属性

给所有属性值加引号””

关闭所有的标签，包括空标签

用CSS定义元素外观

用结构化元素代替无意义的垃圾代码

给每个表格和表单加上id

所有的XML标记都必须合理嵌套

把所有<>和&特殊符号用编码表示； &lt; &gt; &amp;等

给所有属性赋一个值，没有值的就重复本身

不要在注释内容中使用“–”

推荐定义font-family : “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;

辅助图片一律用背景处理

尽量多使用群选择器、派生选择器来书写具有层次结构的CSS样式

合理使用类别选择器与id选择器，同个ID只用一个地方，相同CLASS可用多个地方

链接伪类一定要按照a:link、a:visited、a:hover、a: active的顺序书写

多使用具有良好风格的注释，便于今后的维护与重构

HTML编码规范

一个标记必须占用一行 不得出现两个标记在同一行的情况(同一标记的关闭标记除外)

静态文件内容必须包含在标记中间

标记必须包含在标记中间

对于需要关闭的标记，必须同其关闭标记同时出现，不得出现交叉包含的语句

最高一级的父标记采用左对齐顶格方式书写

下一级标记采用左对齐向右缩进一个Tab的方式书写

在下一级依此类推，分别左对齐相对于父标记向右缩进一个Tab的方式书写

同一级标记的首字符上下必须对齐

JavaScript编码规范

变量命名规范

常量以及全局变量名必须全部使用大写字母

变量名首字母必须小写

变量名必须使用其类型的所写字符串开始。各种类型的所写字符串如下：

整型变量：int；长整型变量：lng；浮点型变量：flt；双精度变量：dbl

对象引用变量：obj；字符串变量:str；Date类型变量：dtm

变量名必须采用有意义的单词命名

变量名除首字母小写外，其他单词首字符必须大写

如果变量名过长可以使用单词缩写，除了被广泛了解的单词缩写以外，所有使用单词缩写的变量名必须在定义时给出注释

变量使用规范

变量使用前必须定义。没有定义的变量禁止使用

变量的使用尽量缩小到小的作用域

对象命名规范

text输入框：txt button按钮：btn select下拉选择框：sel option项：opt

form表单：frm frame框架：fra hidden表单项：hdn div标记：div

span标记：span 对话框对象：dlg 窗口对象：win

函数以及子过程命名规范

函数命名必须使用动词＋名词对的方式，并且能够体现函数的功能

函数命名的动词前缀必须是同函数功能相关的完整动词

函数命名第一个单词的首字母小写，后面每一个单词的首字母大写

jQuery Mobile来了！jQuery发布移动设备版开发项目

八 14

Wang Wen Hao互联网, 我的工作 No Comments

为了让移动设备也能用上jQuery，jQuery开发团队发布了jQuery移动设备版开发项目jQuery Mobile Project（http://jquerymobile.com）。jQuery Mobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。

对于大名鼎鼎的jQuery开发团队来说，当然要让jQuery Mobile支持全球主流的移动平台，而不仅仅是北美流行的移动平台。想要知道jQuery Mobile项目将要做些什么吗？请看jQuery移动平台策略；想要知道jQuery Mobile项目将会支持哪些浏览器吗？请看Mobile Graded Browser Support。

jQuery Mobile开发团队正在紧张工作，准备那些要支持的移动设备并针对这些设备进行测试。他们争取在今年晚些时候发布jQuery Mobile。如果你想为jQuery Mobile提供帮助，请加入jQuery Mobile社区的讨论组。

jQuery Mobile项目已经得到了Palm, Mozilla等移动浏览器厂商的赞助。

jQuery Mobile开发团队说：“能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。”

这一场旷日持久的Hand Over

八 10

Wang Wen Hao我的工作, 杂谈 , , 9 Comments

首先，这件事情与我无关，只是有些困扰。

这是一个规模不大的项目，现在是在维护阶段。前维护的人小A已经离职了，离职前花了不到一下午把项目移交给小B和小C维护，由于小C有其他项目，所以小B一直是一个人在维护（其实小B也有其他项目），但是最终，这个项目是要交给小C的。现在小B马上又要走了，理所当然，就要移交给小C。这次，却花了4天。

可能是小A走得太急，只给小B半天时间来熟悉项目，但是从小A走到现在小B把项目维护得有条不紊。

现在小C来接手了，其实很简单，因为小A走的时候移交他也在，这次的移交理应只需要知道之后小B又改了啥东西就可以了。可以这次，却花了4天。

那这4天，小B和小C都干了些什么呢？

首先小C还在忙着他自己的项目，小B在小C的Leader的要求下，给只需要一个人维护的项目建立一个自动的Daily Build。小B之前没有配置过Daily Build工具，于是自己在那里查资料，建环境，写测试脚本，就这样2天过去了。

我觉得Handover时候并不需要帮以后的人把以后的环境都建好吧，特别是现在没有的环境，以后这个项目怎么操作是你们以后的事情，Handover应该是使以后的人明白这个项目里面的业务逻辑，编码规范，技术框架，接口定义方式等这些和项目有关的东西。

而且只有一个人维护的项目需要一个自动的Daily Build吗？我高兴的话，一天Build他个200次？够不？

接着，小C又让小B把现在所有的issue都处理掉再给他，可以，很合理，但是你是不是也要同时了解一下这些issue是什么呢？

又花了1天，小B处理好了所有issue，小C来了，耷拉着脑袋，很不情愿得搬着椅子在小B边上坐下，开始Handover的最后步骤，介绍项目。

我承认，小C确实很细心，用软件录了一下午小B的操作和讲解，就是不知道以后有没有时间看。

我的困扰是：有些事其实可以做得很简单，但是有的人就是喜欢弄得很复杂，这是不是和自己的前途紧紧相连的呢？每天讲流程流程，有的流程是不是必要的呢？在当我们把时间都花在流程上的时候谁来干活呢？质量如何保证呢？成本如何降低呢？

神奇的代码

七 15

Wang Wen Hao我的工作 , 2 Comments

今天有个Change要改，是一个5年前的老系统，看了一下Code，发现有个明显的逻辑错误，就改过来了，后来发现这个Change的意思就是要改成这样，我当时觉得很好笑。

开发人员的一个失误，把逻辑写成了另外一个样子，但是这段神奇的代码通过了Unit Test，通过了SIT，通过了UAT，更神奇的是，这段神奇的代码被用户整整用了5年，还没有发现这个和当初的文档不一样，5年后还当做Change来给我们做……

太他妈神奇了！

SQL Server的Split方法和表数据的循环插入

六 29

Wang Wen Hao我的工作, 数据库 , , No Comments

最近在做一个老系统的维护，数据库设计很牛B，没有主子表的关系表，主表中有一个字段用字符串“12;32;43”的形式保存子表主键ID。新的SR中我建了一个关系表，问题就来了，前台是通过字符串形式传过来子表的list，所以必须分开他们，然后一个个插到数据表中。

先用一个Split方法把字符串分开：

CREATE FUNCTION [dbo].[Split]
(
-- Add the parameters for the function here
@splitString   VARCHAR(8000),
@separate   VARCHAR(10)
)
RETURNS @returnTable  TABLE(col_Value   VARCHAR(20))
AS
BEGIN

DECLARE   @thisSplitStr   VARCHAR(20)
DECLARE   @thisSepIndex   INT
DECLARE   @lastSepIndex   INT

SET   @lastSepIndex   =   0

IF   RIGHT(@splitString   ,len(@separate))   &lt;&gt;   @separate   SET   @splitString   =   @splitString   +   @separate
SET   @thisSepIndex   =   CharIndex(@separate,@splitString   ,@lastSepIndex)

while   @lastSepIndex   &lt;=   @thisSepIndex
BEGIN
SET   @thisSplitStr   =   SUBSTRING(@splitString   ,@lastSepIndex,@thisSepIndex-@lastSepIndex)
SET   @lastSepIndex   =   @thisSepIndex   +   1
SET   @thisSepIndex   =   CharIndex(@separate,@splitString   ,@lastSepIndex)
INSERT   INTO   @returnTable   VALUES(@thisSplitStr)
END
RETURN

END

GO

然后循环插入数据：

DECLARE @INDEX INT
SELECT @INDEX = 1
DECLARE @charNumber INT
DECLARE @chartID INT

SELECT IDENTITY(INT,1,1) indexID, col_Value INTO #tmp FROM Split('12;32;43',';')
SELECT @charNumber = COUNT(*) FROM #tmp
while(@INDEX &lt;= @charNumber)
BEGIN
SELECT @chartID = col_Value FROM #tmp WHERE @INDEX = indexID
SELECT @chartID
SELECT @INDEX=@INDEX + 1
END
DROP TABLE #tmp

把上边的第11行换成insert语句即可！

日历

2012 年五月
日 一 二 三 四 五 六
« 二    
 12345
6789101112
13141516171819
20212223242526
2728293031  

分类目录