前端代码规范

2017-06-26  本文已影响12人  从不放弃

一、格式化

1、代码缩进

4 个空格字符为一个缩进层级

2、语句结尾

每行语句结束必须使用分号结尾(“:”)

3、行的长度

每行语句不超过80个字符

4、换行

运算符后换行,第二行追加两个缩进

 callAFunction(document,element,window,"somes tring",trrue,
         navigator)

5、空行

  • 在方法之间
  • 在方法中的局部变量和第一条语句之间
  • 在多行或单行注释之前
  • 在方法内的逻辑片段之间出去空行,提高可读性

6、命名

a、变量 :

  • 下划线连接 "_"
  • 第一个单词为名词
 var user_name = "ding";

b、函数:

  • 使用小驼峰命名法(首字母小写,后续每个单词首字母都大写)
  • 第一个单词为动词(can、has、is、get、set等)
function getUserName () {}

c、构造函数:

  • 使用大驼峰命名法(首字母大写,后续每个单词首字母都大写)
  • 单词为名词
function Person() {}

d、常量:

  • 下划线连接 "_"
  • 所有单词均大写
 var MAX_COUNT = 10;

7、直接量

a、字符串:

  • 使用双引号: ""
  • 拼接html使用单引号:''
var user_name = "ding";
var html = '<div class="demo"></div>'

b、数字:

  • 完整书写
例如: 1.0
var user_number = 1.0;  
//而不是
var user_number = 1.; 
例如: 0.1
var height = 0.1;  
//而不是
var height = .1;  

c、对象:

  • 使用 {} 创建
var user_info = {
         name : "ding",
         age : 24
}

d、数组:

  • 使用 [] 创建
var numbers = [1,2,3,4] 

e、字符串:

  • 使用"" 创建
var name = "ding";

二、注释

1、单行注释

  • 两个斜线
  • 增加空行
var user = {}
//空行
//定义用户信息
var user_info = {}

2、多行注释

“/*”开始,“*/”结束

/*注释*/
var name = "ding";
//空行
/*
 *两行注释
 *第二行
 */
var age = 25;

3、文档注释

“/**”开始,“**/”结束

/**
返回一个对象,包含其属性
return object
**/
function getObject (name) {
    var obj = {
        name: name,
        age: 25
    }
    return obj;
}

三、语句和表达式

1、花括号的对齐方式和块语句间隔

if ( condition ) {
    doSomething();
} else {
    doSomethingElse();
}

2、switch语句

switch (condition)
    case "one"
         //代码
         break;
    case "two"
         //代码
         break;
    default
         //代码或者无逻辑

3、with语句 : 禁止使用

4、for循环

var values = [1,2,3,4],
    i,len;
for (i=0, len=values.length; i < len; i++) {
    if ( i != 2 ) {
        coonsole.log(i);
    }
}

4、for-in循环

  • 以为for-in 不仅遍历对象的实例属性,而且还遍历从原型继承来的属性,
    所以使用hasOwnProperty()过滤实例属性
  • 禁止遍历数组
var i;
//空行
 for (i in obj) {
      if ( Object.hasOwnProperty(i) ) {
          console.log(i);
          console.log(obj[i]);
      }
}

5、变量和函数声明

必须先定义后调用

var name = "ding";
console.log(name);
function getName () {}
getName();

6、立即调用的函数

var value = (function() {
    return {
        msg: "123"
    }
}());

7、相等判断

使用 "=== 与 !==" 替代 "== 与 !="

console.log(1 == "1"); // true
console.log(1 === "1"); // false

7、eval(),setTimeout(),setInterval()

a、eval() : 只有别无他法的时候才使用eval()

eval("alert('demo')");

b、setTimeout()与setInterval() : 禁止使用字符串参数,要使用function

setTimeout(function() {
    document.body.style.background = "red";
},50);
setInterval(function() {
    document.title = (new Date());
},1000);
上一篇下一篇

猜你喜欢

热点阅读