请使用firefox,chrome等最新浏览器浏览本站。

前端开发规范-html、css、js汇总

css3 阿豹 565次浏览 2个评论 扫描二维码

html, css代码规范

1.代码缩进用4个空格
<ul>
<li>Fantastic
<li>Great
</ul>

2.  删除行尾空格
sublime 使用 TrailingSpaces插件检查多余空格,并删除

3.  元素名, 属性使用小写
<img src=”cubee.png” alt=”cubee”>

4.  自定义属性使用data-开头
<img src=”cubee.png” alt=”cubee” data-id=“11″>

5.  在HTML模板指定编码 <meta charset=”utf-8″> 不需要在样式表中制定编码,它默认为UTF-8

6.  文档类型
使用<!DOCTYPE html>

7.  多媒体后备方案
<img src=”cubee.png” alt=“cubee”>

8.  在样式表和脚本的标签中忽略 type 属性, HTML5默认 type 为 text/css 和 text/javascript 类型,所以没必要指定, 即便是老浏览器也是支持的。
<link rel=”stylesheet” href=”http://www.cubee.com/css/main.css”&gt;
<script src=“http://www.cubee.com/js/main.js”></script>

9.  css属性尽量使用缩写
font: 12px/1.5 serif;
padding: 0 10px;

10.省略0后面的单位
margin: 0;
padding: 0;

11.省略0开头小数点前面的0
font-size: .8em;

12.不要在 url() 里用 ( “” , ” )
background: url(1.jpg) no-repeat center;

13.十六进制尽可能使用3个字符
color: #ebc;

14.css声明顺序按照首字母顺序声明
background: fuchsia;
border: 1px solid;
color: black;
text-align: center;

15.css所有声明都要用“;”结尾
.test {
display: block;
height: 100px;
}

16.在属性名冒号结束后加一个空字符
.test {
display: block;
height: 100px;
}

HTML代码检测工具

使用W3C HTML validator 检测HTML代码有效性
地址: https://validator.w3.org

js代码规范

结构:
1.  使用 4 个空格做为一个缩进层级

2.  switch 下的 case 和 default 必须增加一个缩进层级
switch (variable) {

case ‘1’:
// do…
break;

default:
// do…

}

空格:
1.  用作代码块起始的左花括号 { 前必须有一个空格
if (condition) {
}

2.  if / else / for / while / function / switch / do / try / catch / finally 关键字后,必须有一个空格
if (condition) {
}

while (condition) {
}

3.  对象属性中的 : 之后必须有空格,: 之前不允许有空格
var obj = {
a: 1,
b: 2,
c: 3
};

4.  函数声明、函数调用中,函数名和 ( 之间不允许有空格
function funcName() {
}

var funcName = function funcName() {
};

funcName();

5.  , 和 ; 前不允许有空格
callFunc(a, b);

6.  在函数调用、函数声明、括号表达式、属性访问、if / for / while / switch / catch 等语句中,() 和 [] 内紧贴括号部分不允许有空格
callFunc(param1, param2, param3);

if (num > list.length) {
}

换行:
1.  每个独立语句结束后必须换行, 每行不得超过 120 个字符

2.  运算符处换行时,运算符必须在新行的行首
if (user.isAuthenticated()
&& user.isInRole(‘admin’)
&& user.hasAuthority(‘add-admin’)
|| user.hasAuthority(‘delete-admin’)
) {
// Code
}

3.  对于 HTML 片段的拼接,通过缩进,保持和 HTML 相同的结构
var html = ” // 此处用一个空字符串,以便整个 HTML 片段都在新行严格对齐
+ ‘<article>’
+     ‘<h1>Title here</h1>’
+     ‘<p>This is a paragraph</p>’
+     ‘<footer>Complete</footer>’
+ ‘</article>’;

4.  当函数调用时,如果有一个或以上参数跨越多行,应当每一个参数独立一行
setTimeout(
function () {
alert(‘hello’);
},
200
);

5.  链式调用较长时采用缩进进行调整
$(‘#items’)
.find(‘.selected’)
.highlight()
.end();

6.  三元运算符换行,根据每个部分的长度不同,形成不同的情况
var result = thisIsAVeryVeryLongCondition
? resultA : resultB;

7.  数组和对象初始化的混用,严格按照每个对象的 `{` 和结束 `}` 在独立一行的风格书写
var array = [
{
// …
},
{
// …
}
];

语句:
1.  不得省略语句结束的分号

2.  在 if / else / for / do / while 语句中,即使只有一行,也不得省略块 {…}
if (condition) {
callFunc();
}

3.  函数定义结束不允许添加分号
function funcName() {
}

命名:
1.  变量 使用 Camel命名法
var loadingModules = {};

2.  常量 使用 全部字母大写,单词间下划线分隔 的命名方式
var API_PATH = ‘http://api.com‘;

3.  函数 使用 Camel命名法
function stringFormat(source) {
}

4.  函数的 参数 使用 Camel命名法
function hear(theBells) {
}

5.  类 使用 Pascal命名法
function EngineOne(options) {
}

6.  类的 方法 / 属性 使用 Camel命名法
function TextNode(name, age) {
this.userName = value;
this.age = age;
}

7.  类名 使用 名词
function Engine(options) {
}

8.  函数名 使用 动宾短语
function getStyle(element) {
}

9.  boolean 类型的变量使用 is 或 has 开头
var isReady = false;
var hasMoreCommands = false;

注释:
1.  单行注释必须独占一行,// 后跟一个空格

2.  避免使用 /*…*/ 这样的多行注释。有多行注释内容时,使用多个单行注释

3.  类型定义都是以 { 开始, 以 } 结束
常用类型:{string}, {number}, {boolean}, {Object}, {Function}, {RegExp}, {Array}, {Date}

4.  函数、事件、类的注释
/**
* 描述
*
* @param {string}    p1 参数1的说明
* @param {string}    p2 参数2的说明
* @param {number} p3 参数3的说明
* @return  {number} p1 + p2 + p3 返回值描述
*/
function foo(p1, p2, p3) {
var p3 = p3 || 10;
return p1 + p2 + p3;
}

5.  文件注释(文档注释前必须空一行)

/**
* 描述
*
* @author 作者
* @date 日期
*/

6.  命名空间注释
/**
* 描述
*
* @namespace
*/
var util = {};

7.  类注释
/**
* 描述
*
* @class
*/
function Developer() {
// constructor body
}

8.  常量注释
/**
* 常量说明
*
* @const
* @type {string}
*/
var API_PATH = ‘http://api.com‘;

变量:
1.  变量、函数在使用前必须先定义

2. 每个 var 只能声明一个变量(一个 var 声明多个变量,容易导致较长的行长度,并且在修改时容易造成逗号和分号的混淆)

条件:
1.  使用 === 或 !== 判断变量是否相等,仅当判断 null 或 undefined 时,允许使用 == null
解释:使用 === 可以避免等于判断中隐式的类型转换
if (age === 30) {
// ……
}

2.  尽可能使用简洁的表达式
// 判断字符串为空
if (name) {
// ……
}

// 判断数组非空
if (collection.length) {
// ……
}

3.  对于相同变量或表达式的多值条件,用 switch 代替 if
switch (typeof variable) {
case ‘object':
// ……
break;
case ‘number':
case ‘boolean':
case ‘string':
// ……
break;
}

4.  如果函数或全局中的 else 块后没有任何语句,可以删除 else
function getName() {
if (name) {
return name;
}

return ‘unnamed';
}

循环:
1.  对有序集合进行遍历时,缓存 length
for (var i = 0, len = elements.length; i < len; i++) {
var element = elements[i];
// ……
}

类型:
1.  类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 == null
// string
typeof variable === ‘string’

// number
typeof variable === ‘number’

// boolean
typeof variable === ‘boolean’

// Function
typeof variable === ‘function’

// Object
typeof variable === ‘object’

// RegExp
variable instanceof RegExp

// Array
variable instanceof Array

// null
variable === null

// null or undefined
variable == null

// undefined
typeof variable === ‘undefined’

2.  转换成 string 时,使用 + ‘’
num + ‘';

3.  转换成 number 时,通常使用 +
+str;

4.  string 转换成 number,要转换的字符串结尾包含非数字并期望忽略时,使用 parseInt
var width = ‘200px';
parseInt(width, 10);

5.  使用 parseInt 时,必须指定进制
parseInt(str, 10);

6.  转换成 boolean 时,使用 !!
var num = 3.14;
!!num;

7.  number 去除小数点,使用 Math.floor / Math.round / Math.ceil,不使用 parseInt
var num = 3.14;
Math.ceil(num);

字符串:
1.  字符串开头和结束使用单引号 ‘
var str = ‘我是一个字符串';
var html = ‘<div class=“cls”>拼接HTML可以省去双引号转义</div>';

2.  使用 数组 或 + 拼接字符串
// 使用数组拼接字符串
var str = [
// 推荐换行开始并缩进开始第一个字符串, 对齐代码, 方便阅读.
‘<ul>’,
‘<li>第一项</li>’,
‘<li>第二项</li>’,
‘</ul>’
].join(”);

// 使用 `+` 拼接字符串
var str2 = ” // 建议第一个为空字符串, 第二个换行开始并缩进开始, 对齐代码, 方便阅读
+ ‘<ul>’,
+    ‘<li>第一项</li>’,
+    ‘<li>第二项</li>’,
+ ‘</ul>';

3.  复杂的数据到视图字符串的转换过程,选用一种模板引擎

对象:
1.  使用对象字面量 {} 创建新 Object
var obj = {};

2.  对象创建时,如果一个对象的所有属性均可以不添加引号, 建议所有属性不添加引号
var info = {
name: ‘someone’,
age: 28
};

3.  for in 遍历对象时, 使用 hasOwnProperty 过滤掉原型中的属性
var newInfo = {};
for (var key in info) {
if (info.hasOwnProperty(key)) {
newInfo[key] = info[key];
}
}

4.  使用delete删除对象属性时,使用try catch块
解释: 在严格模式或 IE 下使用 delete 时,不能被删除的属性会抛出异常
try {
delete o.x;
}
catch (deleteError) {
o.x = null;
}

数组:
1.  使用数组字面量 [] 创建新数组
var arr = [];

2.  遍历数组不使用 for in
for (var i = 0, len = elements.length; i < len; i++) {
var element = elements[i];
// ……
}

3.  清空数组使用 arr.length = 0


喜欢 (7)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到
(2)个小伙伴在吐槽
  1. 今天真冷,哈哈!
    蒂欧娜2016-12-12 07:50 回复
  2. 我只是来看一看,好久没来了~
    尚爱思套图2016-12-13 10:04 回复