目 录
4.3. JavaScript文件引用在页面中的位置.................................................................... 9
4.4. 避免在HTML中直接嵌入JavaScript................................................................... 10
[if !supportLists]1. [endif]通用
[if !supportLists]1.1. [endif]字符编码
所有文件统一使用UTF-8编码。
[if !supportLists]1.2. [endif]文件的命名
文件名应该全部小写，多个单词以下划线“_”分开。
[if !supportLists]1.3. [endif]缩进
Tab字符缩进。
[if !supportLists]1.4. [endif]目录结构
下图为静态资源的目录结构。所有静态资源放到一级目录：为项目名，例如（墨尔本）目录下。
墨尔本目录下一般有三个文件夹。
[if !supportLists]1. [endif]html：里边包含通用的样式表文件、图片、js、以及静态页面等文件。
[if !supportLists]2. [endif]效果图：里边包含设计出的所有的效果图（后缀为.psd）。
[if !supportLists]3. [endif]原型。该文件夹用来存放交互设计出的原型文件。
[if !vml]
[endif]
[if !supportLists]2. [endif]HTML
[if !supportLists]2.1. [endif]页面文件命名
列出几种标准的命名：
[if !supportLists]l [endif]创建：create.html
[if !supportLists]l [endif]编辑：edit.html
[if !supportLists]l [endif]显示：show.html
[if !supportLists]l [endif]列表：list.html
对于页面中使用到的html片段页面，应以“_”隔开命名。如果为某一页面专用的片段页面，则在“_”之后加上专用页面的名字例如商品显示页中的评价片段页面：/show_comments.html。其意义为/show.html页面的一部分。
[if !supportLists]2.2. [endif]DOCTYPE
HTML页面页首必须填写DOCTYPE。DOCTYPE使用XHTML 1.0 Transitional。如下：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[if !supportLists]2.3. [endif]标签
按照XHTML规范，所有标签名及属性名必须全小写，属性值以双引号包裹，属性的等号两边禁止添加空格。所有标签必须闭合。例如：“<br>”必须写作“<br />”。非替换元素禁止直接结束，例如：<div></div>禁止写成<div />。
[if !supportLists]2.4. [endif]标签的嵌套
标签的嵌套必须按照HTML规范嵌套，例如：<li>必须在<ol>或<ul>标签中，不能脱离这两个标签。
[if !supportLists]2.5. [endif]行内CSS
尽量减少行内CSS的使用，除一些类似规定表格栏位宽度等比较具有特殊性的位置，禁止在元素内使用行内CSS。行内CSS示例：
[if !supportLists]2.6. [endif]自定义属性
所有自定义属性建议以“data-”，多个单词以“-”分隔，例如“data-valid-type”，“data-field-name”等。该目的是为了兼容之后的HTML5，并且jQuery 1.6对此也有着更好的支持。
[if !supportLists]2.7. [endif]图片
对内容型的图片和背景型的图片进行区分。对于网站LOGO，按钮图片以及边框样式等均属于背景型图片，而商品的图片，注册用户的头像等则属于内容型的图片。背景型图片应尽量避免使用<img>标签显示在页面中，而是应该采用CSS，背景型图片应采用CSS Sprite技术，将零散的图片合成为一张图片，以减少请求。关于CSS Sprit技术，请参考5.1
图片的命名应该全小写，多个单词以下划线“_”分隔。
[if !supportLists]2.8. [endif]闭合浮动元素
对于设置了float的元素，一定要对float进行闭合。具体参考附录5.2
[if !supportLists]3. [endif]CSS
[if !supportLists]3.1. [endif]CSS Code Style
[if !supportLists]3.1.1. [endif]样式命名
对于类的命名，采用全小写，多个单词以“_”分隔。例如：.nav，.panel_title等。命名采用英文单词，禁止使用汉语拼音，尽量避免使用数字。
[if !supportLists]3.1.2. [endif]属性
每条属性独占一行，属性名冒号后空一格。行结束以分号“;”结尾。
属性顺序建议按照一下顺序书写：
[if !supportLists]1. [endif]布局属性（position，display，float，clear，display等）
[if !supportLists]2. [endif]盒模型属性（margin，padding，width，height，border等）
[if !supportLists]3. [endif]文本属性（font，text-decoration，text-align，line-height等）
[if !supportLists]4. [endif]其他属性（background，color，opacity等）
[if !supportLists]3.1.3. [endif]代码示例
table.standard-table{
width: 100%;
border-spacing: 1px;
background: black;
}
[if !supportLists]3.2. [endif]选择器的使用
尽量缩小样式的应用范围。例如有个类样式“.list-table”用于table标签，如果该样式不会应用在其他标签上的话，那么该类样式应写作“table.list-table”，避免使用通配符。
避免使用ID选择器，样式应该尽量选择类选择器，ID有可能绑定着页面的业务逻辑，有可能发生改变，因此尽量避免使用ID选择器应用样式。
避免使用IE6不兼容的选择器，如子选择器“>”以及属性选择器“[type=’checkbox’]”等。
[if !supportLists]3.3. [endif]兼容问题
尽量避免使用CSS Hack，对于IE系列的浏览器兼容性问题，采用条件注释加载对应的CSS，覆盖默认样式的方式解决。有关CSS Hack技术及IE的条件注释技术具体请参考附录5.3和附录5.4。
[if !supportLists]3.4. [endif]!important
!important会使样式属性优先级变为最高，在使用时需要一定的谨慎，建议一般情况下不要使用该关键字。
[if !supportLists]3.5. [endif]公用的一些css
*{
margin:0;
padding:0;
}
body{
font-family:'宋体',宋体,'Microsoft Yahei','微软雅黑',arial,'Hiragino Sans GB',Tahoma,Arial,Helvetica,STHeiti;
font-size:12px;
color:#706866;
}
img{
border:0;
}
ul,li{
list-style:none;
}
.f_left{
float:left;
}
.f_right{
float:right;
}
.clear{
font-size:0px;
clear:both;
}
a {
blr:expression(this.onFocus=this.blur()) } /*针对IE*/
a {
outline:none; } /*针对firefox等*/
a :hover{text-decoration: underline;}
以上这些css算是所有页面都需要的一些属性。
[if !supportLists]3.6. [endif]字体规范
1. 为了保证不同浏览器上字号保持一致，字号建议用点数pt和像数px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px和14px，这是经过优化的字号，黑体字或者宋体字加粗时，一般选用 11pt 和 14.7px的字号比较合适。
2. 大小为9pt时，行距为120%; 信息类最终页面采用弹出方式，标题及正文字体规定为11pt，行距为140%，所有页面字体大小建议不要超过11pt。
3.考虑字体大小的兼容性，避免使用size=2的方式定义，尽量使用 pt 或者 px 并用css 定义 。
4. 文字颜色与页面配色协调，不使用与背景相近的颜色
5.非图像设计的字体一律采用windows 标准宋体。（如果做特殊效果需做成图）要加粗文字用 Blod，不要用strong。
6. 页面文字不使用下划线方式，也尽量少采用粗体显示。
[if !supportLists]4. [endif]JavaScript
[if !supportLists]4.1. [endif]JavaScript Code Style
[if !supportLists]l [endif]变量与函数名采用驼峰式命名
[if !supportLists]l [endif]常量使用全大写，多个单词以下划线“_”分隔
[if !supportLists]l [endif]关键字后空一格
[if !supportLists]l [endif]等号两边各空一格
[if !supportLists]l [endif]一行语句结束时必须添加“;”
[if !supportLists]l [endif]if-else语句块必须添加“{}”，即使只有一行语句。
[if !supportLists]l [endif]类中的方法应写入类的prototype中，私有方法以下划线“_”开头。
示例：
varfoo=function (params) {
if (params.length > 0) {
doSomthing(params);
}
};
functionStudent(name,gender) {
this.name = name;
this.gender = gender;
}
Student.prototype.study=function (course) {
doSomething();
};
[if !supportLists]4.2. [endif]文档注释
JavaScript的文档注释采用JSDoc文档注释，所有公共函数、类都应该添加文档注释。关于JSDoc，具体请参看http://code.google.com/p/jsdoc-toolkit/w/list。
JSDoc示例：
/**
*@function为一个checkbox添加对一组checkbox的全选功能
*@param{String|Element} checkbox目标element对象或id
*@param{String} checkBoxName受控checkbox的name
*@param{String} [form]受控checkbox所在表单的name或id，可选
*/
functionaddCheckAllFunction(checkbox checkboxName, form) {
}
[if !supportLists]4.3. [endif]JavaScript文件引用在页面中的位置
尽可能的将JS的引入位置放到body的结束标签之前，以减少被JavaScript载入时阻塞页面的情况。有关JavaScript阻塞的问题，请参考附录5.5。
[if !supportLists]4.4. [endif]避免在HTML中直接嵌入JavaScript
尽量避免在html中直接嵌入JavaScript。例如：
Button
建议采取无干扰的JavaScript方式，在JavaScript中注册该事件。有关无干扰的JavaScript技术，请参考附录5.6。
[if !supportLists]4.5. [endif]减少全局变量
尽量不要在全局作用域下声明变量或者函数。他们应该被组织在各自的业务命名空间下，或在一个匿名函数中。
对于必须使用的全局变量，变量名应以“$”开头。
[if !supportLists]5. [endif]附录
[if !supportLists]5.1. [endif]CSS Sprites
[if !supportLists]5.1.1. [endif]原理
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
[if !supportLists]5.1.2. [endif]优点
利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因。
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
[if !supportLists]5.2. [endif]浮动元素的闭合
这里的NOTfloatC并不希望继续平移，而是希望往下排(其中f_left、f_right的属性已经设置为“float:left,float:right;”) 。原因是NOTfloatC没有设置float属性，必须将float标签闭合。在 <div class=”f_right”> <div class=”NOTfloatC”>之间加上 <div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义如下即可：
.clear{ clear:both;}
作为外部wrapper的div不要定死高度,为了让高度能自动适应，要在wrapper里面加上“overflow:hidden;”。当包含float的div的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性“zoom: 1;”，可以解决这个问题。这样就达到了兼容。
例如某一个wrapper如下定义：
.colwrapper{ overflow: hidden; zoom:1; margin:5px auto;}
这里还有另一种方案添加闭合的方法，把需要闭合的div加上class="clearfix" 即可,其定义如下：
.clearfix {display: inline-block; }
.clearfix:after{
content: ".";
display: block;
height :0px;
clear: both;
visibility: hidden;
}
/* Hide fromIE Mac */
.clearfix{display: block;}
/* End hidefrom IE Mac */
/* end ofclearfix */
或者这样设置：
.hackbox{
display: table; /*将对象作为块元素级的表格显示*/}
[if !supportLists]5.3. [endif]CSS Hack
CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法，利用了各个浏览器对CSS的支持和解析结果不一样的特点，例如： IE6能识别下划线"_"和星号"*"，IE7能识别星号"*"，但不能识别下划线"_"，而Firefox两个都不能识别。书写顺序一般是将识别能力强的浏览器的CSS写在后面。比如：
div{
background: green; /* for firefox */
*background: blue; /* for IE7 */
_background: red; /* for IE6 */
}
这样在Firefox中看到的背景是绿色，在IE7中看到的是蓝色，而IE6中看到的是红色。
利用这种方式，可以解决多种由于IE独特的文档渲染方式造成的问题。
[if !supportLists]5.4. [endif]IE的条件注释
[if !supportLists]5.4.1. [endif]介绍
条件注释是微软IE浏览器在HTML源代码中被解释的条件语句。最早出现于IE5，支持到IE8。条件注释用于在IE浏览器中显示或隐藏一段代码。
[if !supportLists]5.4.2. [endif]示例
Youare using Internet Explorer 6.
Youare not using Internet Explorer.
[if !supportLists]5.5. [endif]JavaScript的阻塞
浏览器是按标签来解析的，每解析一段标签，就显示这段标签的内容。如果标签引入了外部文件（如图像），则会一边继续解析其他标签，一边继续下载该外部文件，直到载入完毕。
但浏览器在解析script标签时，由于JavaScript可能会改变浏览器内容，会停止所有页面元素的载入，直到这段script代码执行完毕。如果这个script标签引入了一个来自外部服务器的js文件，而这个服务器访问速度很慢，那么页面上其他元素便都得等到这个js文件载入并执行完毕才能继续载入。
[if !supportLists]5.6. [endif]无干扰的JavaScript
无干扰的 JavaScript 的首要目标就是保持JavaScript 代码和 HTML 标记的分离。这种让内容分离于形为的方式，与将 CSS 放入样式表而保持内容与表现分离的方式如出一辙。为了实现这一目标，把所有的 JavaScript 代码放到外部文件中。
无干扰的 JavaScript 的第二个目标是它必须降低优雅性。脚本应该基于增加 HTML 的内容来构思和设计，但是，即使没有这些JavaScript 代码，内容也应该能用。
无干扰的 JavaScript 的第三个目标是，它不能降低一个HTML 页面的可访问性。
网友评论