美文网首页
前端代码规范

前端代码规范

作者: 从不放弃 | 来源:发表于2017-06-26 11:20 被阅读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);

相关文章

  • 代码规范

    代码规范 1. 概述 欢迎使用前端代码规范, 这里借鉴、引用的是京东前端代码规范。 遵循代码规范的目的在于增强团队...

  • 前端开发规范

    前端代码规范 Front Standard Guide 前端 JS 项目开发规范 规范的目的是为了编写高质量的代码...

  • 前端规范

    前端规范 规范说明 此为前端开发团队遵循和约定的代码书写规范,意在提高代码的规范性和可维护性。此规范为参考规范,统...

  • 代码规范

    代码规范 1. 概述 欢迎使用代码规范, 这个是我借鉴京东前端代码规范,组织的内部规范。旨在增强团队开发协作、提高...

  • 代码规范

    代码规范 作为前端工程化的第一步,就是要统一代码规范。而前端的代码规范,用三个插件就能保证(husky lint-...

  • 前端代码规范

    该文于 2013 年创作,经年修改,录以记之 统一的规范有助于团队合作开发,但规范又臭又长,又不利于阅读与遵守,所...

  • 前端代码规范

    命名规范 注释 eslint编码规范 使用两个空格进行缩进。eslint: indentfunction hell...

  • 前端代码规范

    一、前端编辑器 vscode 对angular、typescript有着非常友好的支持,轻便快捷,代码统一,一键格...

  • 前端代码规范

    一、格式化 1、代码缩进 4 个空格字符为一个缩进层级 2、语句结尾 每行语句结束必须使用分号结尾(“:”) 3、...

  • 前端代码规范

    HTML规范 1.基础规范 1.1 为每个HTML 页面的第一行添加标准模式(standard mode)的声明,...

网友评论

      本文标题:前端代码规范

      本文链接:https://www.haomeiwen.com/subject/lludcxtx.html