前端代码规范

一、格式化

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);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容