WEB编码事项

最新推荐文章于 2024-10-10 09:56:47 发布

weixin_30376453

最新推荐文章于 2024-10-10 09:56:47 发布

阅读量50

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhouwenhong/p/3911812.html

版权

标准

WEB开发标准是一系列标准的集合，包含HTML结构标准、CSS表现标准、JS行为标准、代码标准、标准测试。

目标

WEB开发流程统一标准化，实现页面结构、表现、行为适当分离，提高页面易维护性，易拓展性。

遵循

结构标准：HTML5
表现标准：CSS2、CSS3（渐进增强）
行为标准：ECMAScript 262
代码标准：HTML编码规范、CSS编码规范、JS编码规范
标准测试：html validator、csslint、jshint

HTML编码规范

1. 使用标准文档DTD

<!DOCTYPE html>

2. 结构、样式、行为分离

内嵌样式移入到相应的样式文件中
内嵌脚本移入到相应的脚本文件中
除非需要动态修改元素样式，否则尽量别写内联样式
除非使用<a href="javascript:void();" ，否则尽量别写内联事件
样式文件使用link标签在head头部引入
脚本文件使用script标签在body结束标签前引入

3. 标签

标签名、属性名小写
属性值双引号括起来
style、link的type属性没必要指定，默认为text/css
script的type属性没必要指定，默认为text/javascript
空标签无自关闭斜线无结束标签，其它标签务必包含开始、结束标签

空标签： area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

4. 缩进、换行

子元素相对于父元素缩进4个空格
块元素、列表元素、表格元素放在新行

5. 注释

按模块添加注释，解释清楚是什么。

<!--XX模块 START, 我是什么-->
<div class="module">
    ....
</div>
<!--XX模块 END -->

6. 代码有效性

使用html validator工具，检查代码。

CSS编码规范

1. id、class命名

名字小写
以破折号“-”进行分隔： .module-title

2. 样式属性、属性值

缩进四个空格，尽量使用缩写

/* Don't */
.demo {
    margin-top: 2px;
    margin-right: 3px;
    margin-bottom: 4px;
    margin-left: 0;
}

/* Better */
.demo {
    margin: 2px 3px 4px 0;
}

属性名后紧跟“：”

属性值前有一空格，后面以“；”结束

属性值为0，不加单位

十六进制颜色值，尽量使用三个字符 #fff, 非#ffffff

url()中不使用引号

.demo {
    backgound-image: url(/your/path/img);
}

3. 样式顺序

定位相关，盒模型相关，其它

.demo {
    position: absolute;
    top: 0;
    left: 0;

    width: 50px;
    height: 50px;
    border: 1px solid #ddd;

    color: #fff;
}

4. 选择器

尽量不使用!important，权重最高

尽量不使用id选择器，权重比较高

尽量不使用元素标签名、id、class进行组合

/* Don't */
#header.title {
    ... 
}

/* Better */
.title {
    ...
}

样式针对多个选择器，每个选择器占一行

.btn,
.txt,
.hover {
    ....
}

5. Better CSS Hack

利用IE条件注释，在html标签的class里标识ie版本，但是尽量避免使用，且请新建一个hack.css专属文件存放hack样式。

<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if IE 9]>    <html class="ie9"> <![endif]-->
<!--[if !IE]><!--><html> <!--<![endif]-->

.ie9 .demo{
    ...
}
.ie8 .demo{
    ...
}
.ie7 .demo{
    ...
}
.ie6 .demo{
    ...
}

6. Not Recommand CSS Hack

下面hack方法前提是浏览器标准模式

“_″ 下划线是IE6专有的hack
“+″ 下划线是IE6/IE7 生效
“\9″ IE6/IE7/IE8/IE9/IE10 生效
“\0″ IE8/IE9/IE10/Opera 生效
“\9\0″ IE9/IE10 生效

这些hack方法，一般直接在原样式中混合使用，大量的hack方法，势必会造成css代码混乱，维护起来困难。

7. 注释

按模块编写注释，解释清楚做了什么

/*XX模块 START， 我做了什么*/
.module {
    ...
}

.module .title {
    ...
}

.module .content {
    ...
}
/*XX模块 END*/

8. 代码有效性

使用csslint工具，检查代码。

Javascript编码规范

1. 变量、函数

缩进四个空格

变量名、函数名使用驼峰式命名： subTitle

局部变量声明务必使用var

全局变量、枚举变量、常量全部大写，且注释注明

语句结束以“;”结尾

变量声明提前并集中

//我是做什么的
function createAudit(){

    var startTime,
          endTime,
          auditType,
          timeSpace,
          progress = 0;

     ...
}

2. 异常处理

做异常处理，界面出错，给予用户友好提示

try{
     //Do something
}catch(e){
     //友好提示
}

3. eval()

只用于反序列化

4. 多行字符串

var myStr = 'blablablablablabla' + 
     'hlahlahlahlahlahlahla' + 
     'xlaxlaxlaxlaxlaxlaxla' +
     'slaslaslaslaslaslasla';

5. 定义数组、对象

/*Don't*/
var arr = new Arr,
      obj = new Object;


/*Better*/
var arr = [],
      obj = {};

6. 不修改内置对象方法、属性

不要尝试修改内置对象方法、属性，可以建立统一接口来维护公用函数。

/*Don't*/
String.prototype.newFunc = function(){

}

7. 字符串

使用单引号更好，html中使用双引号

8. 代码格式化

大括号

分号会被隐士插入到代码中，大括号和前面的代码放在同一行

if (boolean) {
    //...
} else {
    //...
}

数组、对象初始化

var arr = [
        someVal,
        anotherVal,
        anotherVal,
        anotherVal,
        anotherVal   //不要再这里加逗号，ie7，ie8会报错
    ];

var obj = {
        someOpt: someVal,
        anotherOpt: anotherVal,
        anotherOpt: function () {

        }   //不要再这里加逗号，ie7，ie8会报错
    };

函数参数

尽可能将所有函数参数写在同一行，但为了保持可读性，一行超过80个字符可适当换行，甚至每个参数独立一行

very.very.very.very.lon.long.func = function (
      someOpt, someOpt
      anotherOpt) {
          //....
    }

function foo (veryLongLongVariable, 
                      veryLongLongVariable) {
    //...
}

function foo (
      veryLongLongLongLongVariable, 
      veryLongLongLongLongVariable) {
      //...
}

if条件，三元操作符

if (someLongLongLongVariable &&
     anotherLongLongVariable) {
     //...
}

var y = a ?
            someLongLongVariable : anotherLongLongVariable;

9. 注释

全局变量、常量、函数添加注释

10. 代码有效性

使用jshint工具，检查代码。

遵循这些规则--改进这些规则--不能没有规则

转载于:https://www.cnblogs.com/zhouwenhong/p/3911812.html

weixin_30376453

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫