> 前端培训二:前端代码规范 - Yuyy
Yuyy
Yuyy
前端培训二:前端代码规范

html规范

实用为王,减少标签的数量

尽量遵循 HTML 标准和语义,但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。

<!--bad-->
<aty-row>
    <aty-col span=8></aty-col>
    <aty-col span=8></aty-col>
    <aty-col span=8></aty-col>
</aty-row>
<aty-row>
    <aty-col span=8></aty-col>
    <aty-col span=8></aty-col>
    <aty-col span=8></aty-col>
</aty-row>

<!--better-->
<aty-row>
    <aty-col span=8></aty-col>
    <aty-col span=8></aty-col>
    <aty-col span=8></aty-col>
    <aty-col span=8></aty-col>
    <aty-col span=8></aty-col>
    <aty-col span=8></aty-col>
</aty-row>

避免javascript 生成的标签

通过 JavaScript 生成的标签让内容变得不易查找、编辑,并且降低性能。能避免时尽量避免,除非必须用

禁忌

  • 【强制】“结构层,行为层,表现层”分离这是基本的原则,页面中不允许出现css内容(包括行内样式和style)
  • 【强制】Js必须放到body结束标签前,禁止放在head标签里面
  • 为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中尽量不要使用
    来人工干预分段,特殊情况除外
  • 原则上,我们【禁止】用 来人为干预图片显示的尺寸,而且建议 标签中不要带上width 和height 两个属性,这是因为制作过程中,图片往往需要反复的修改,这样可以避免人为干预图片显示的尺寸,尽可能的发挥浏览器自身的功能;

css规范

语法

  • 为了代码的易读性,在每个声明块的左花括号前添加一个空格。
  • 声明块的右花括号应当单独成行。
  • 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。
  • 对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格(例如,box-shadow)。
  • 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号,不加空格)。
  • 对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代替-0.5px)。
  • 十六进制值应该全部小写,例如,#fff。在扫描文档时,小写字符易于分辨,因为他们的形式更易于区分。
  • 尽量使用简写形式的十六进制值,例如,用 #fff 代替 #ffffff。
  • 为选择器中的属性添加双引号,例如,input[type="text"]。只有在某些情况下是可选的,但是,为了代码的一致性,建议都加上双引号。
  • 避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;。
  • 小图片(必须)sprite 合并
  • 每个样式属性后加 ";"
  • 为了获得更准确的错误报告,每条声明都应该独占一行,禁止将样式写为单行,这个应该是压缩工具做的事
  • 禁止使用行内样式
/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

声明顺序

同相关的属性声明应当归为一组,并按照下面的顺序排列:

  • Show or hide (显示属性)
  • Positioning (定位)
  • Box model (盒模型)
  • Typographic (排版)
  • Visual (视觉)

由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。

.declaration-order {
display || visibility
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  float:left; 
  clear:both;
 /* Box-model */
  margin:   10px;
  padding: 10px;
  max-width || min-width
  max-height || min-height
  width: 100px;
  height: 100px;
  /* Typography */
  line-height: 1.5;
  color: #333;
  text-align: center;
  text-overflow:ellipsis;
  text-indent:-9999em;
  white-space:nowrap;
  vertical-align:top;
  cursor:pointer; 
  font: normal 13px "Helvetica Neue", sans-serif;
 /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  /* Misc */
  opacity: 1;
}

class命名规则

  • 只能包含破折号和小写字母,尽可能短,意义明确
  • 避免过度任意的简写(.btn代表 button,但是 .s 不能表达任何意思)
  • 基于最近的父 class 或基本 class 作为新 class 的前缀
  • 使用.fd-*来标识样式
  • 语义化如 fd-tabfd-nav,内容优先,表现为辅
  • 表示状态的class,不准单独使用,可以嵌套或者堆叠使用
    /* 可以嵌套用 */
    .fd-nav .active {
    color: red;
    }
    /* 可以堆叠用 */
    .fd-btn.active {
    color: red;
    }
    /* 绝不要单独用!!! */
    .active {
    color: red;
    }
    

优化css选择器

  • 避免使用通配规则

  • class和id选择器都不要限定(div#header

  • 避免使用后代选择符;通常处理后代选择符开销最高,使用子选择符更高效

    • 自己写的z-index的值不能超过100;页面中的元素内容的z-index不能超过10

JAVASCRIPT 规范

一、语言规范

  1. 语句的结尾总是使用分号
  • 【强制】语句的结尾总是使用分号
var foo = bar; // semicolon here.
var foo = function() {
    return true;
};  
function foo() {
    return true;
}  // no semicolon here.
  1. 变量使用前必须声明

  2. 不要在 ARRAY 上使用 FOR-IN 循环

    for in循环会遍历到数组中的原型链中的属性

    let arr=[1,2,3]
    Array.prototype.xxx=1231235
    for(let i in arr){
        console.log(arr[i])
    }
    // 1
    // 2
    // 3
    // 1231235
    
  3. 用 ARRAY 和 OBJECT 字面量代替 ARRAY 和 OBJECT 构造函数

/* Recommend */
var arr = [x1, x2, x3],
    obj = {
        a: 0,
        b: 1,
        c: 2
    };
/* Not Recommend */
var arr = new Array(x1, x2),
    obj = new Object();
  1. 不要给 SETINTERVAL / SETTIMEOUT 传递字符串
/* recommended */
setTimout(function () {
    alter(5)
    //do something 
},2000);
/* Not recommended */
setTimout("alter(5)",2000);
  1. 拼接字符串

    一般情况使用 + 操作符拼接字符串。如果存在大量的字符串拼接,推荐采用数组 join() 拼接字 符串。
    不要使用多行字符串字面量。

/* Recommended */
var myString = 'A rather long string of English text, an error message ' +
    'actually that just keeps going and going -- an error ' +
    'message to make the Energizer bunny blush (right through ' +
    'those Schwarzenegger shades)! Where was I? Oh yes, ' +
    'you\'ve got an error and all the extraneous whitespace is ' +
    'just gravy.  Have a nice day.';

/* Not recommended */
var myString = 'A rather long string of English text, an error\ message \
      actually that just keeps going and going -- an error'

二、编码风格

  1. 命名方式
    • 【强制】 命名仅限于数字和字母字符,也可以用下划线,最好不用用$
    • 【强制】常量

使用全大写字母,并用下划线分隔单词,形如:

var  MAX_CONNT=10;
var  URL="http://www.wuweigang.com";

因浏览器支持问题,不要使用关键字和保留字。

  • 【强制】变量

变量名采用小驼峰式命名,首字母小写,每个单词首字母大写,不要在变量中用下划线,名词不要用动词开头, 如: myName。

  • 【强制】文件名

全部使用小写字母并以 .js 结尾,多个单词用分隔符 ‘-’分隔

  1. 变量延迟初始化
  • 原始值
    • 1.允许延迟变量初始化,不必在声明变量时初始化。
    • 2.【强制】字符串应该始终使用单引号,避免使用双引号。
    • 3.数字应该用十进制整数或者浮点,或者科学计数法,十六进制整数。
    • 4.避免使用null值,特殊情况除外。
    • 5.避免使用undefined 值,除非要判断一个变量是否定义,typeof操作符
  1. 代码格式
  • 【强制】缩进

    4个空格,避免使用tab进行缩进

  • 行的长度

​ 每行的长度不该超过80个字符,超长的不可分割的代码允许例外,比如复杂的正则表达式。长字符串不在例外之列。

  • 运算符间距

二元运算符前后必有使用一个空格保持表达式的整洁,操作符包括赋值运算符和逻辑运算符

var  found = (values[i] === item);
if (found && (count > 8)){
    //  do  something 
};
   for( var i = 0; i < values.length; i++){

    };
  • 括号间距

当使用括号时,紧接左括号之后不应该有空格,紧接右括号之后应该有空格,else前后都应该有个空格。

if(found && (count > 10)) {
    //  do something 
} else {

}
  • 对象的直接量

    1. 起始左花括号应当和表达式保持一行
    1. 每个属性的名值对应当保持一个缩进,第一个属性应当在左括号后的另起一行
    1. 每个属性的名值对应当适应不含引号的属性名,其后紧跟一个冒号(之前不含空格),而后是值
    1. 倘若属性值是一个函数类型,函数体应当在属性名之下另起一行,而且其前后均应保留一个空行
    1. 一组相关的属性前后可以插入空行,以提升代码的可读性
    1. 结束的右括号应当独自占一行
var  object={
    key1:"value1",
       key2:function(){
             // do something         
         },    
       key3:"value3"
}
  1. 数组和对象的初始化
  • 如果初始值不是很长,就保持写在单行上:

    var arr = [1, 2, 3];  // No space after [ or before ].
    var obj = {a: 1, b: 2, c: 3};  // No space after { or before }
    
  • 初始值占用多行时,缩进 4 个空格。

var inset = {
    top: 10,
    right: 20,
    bottom: 15,
    left: 12
};
  • 比较长的标识符或者数值,不要为了让代码好看些而手工对齐。 如:
/* Recommended */
CORRECT_Object.prototype = {
    a: 0,
    b: 1,
    lengthyName: 2
};

/* Not recommended */
WRONG_Object.prototype = {
    a          : 0,
    b          : 1,
    lengthyName: 2
};
  1. 逗号位置
/* Recommended  right */

var a = 1,
    b = 3,
    c;

/* Not Recommended  error*/

var a = 1
    ,b
    ,c;
  1. 字符串
  • 【强制】 字符串使用单引号,只有 JSON 中的字符串属性值使用双引号。
    字符串中的 HTML 属性使用双引号。
/* Recommended */
var string = 'this is a string',
    object = {
        str: "this is a JSON string"
    };
/* Not recommended */
var string = "this is a string",
    object = {
        str: 'this is a JSON string'
    };
  1. 对象

    对象的最后一个属性值后面不要写逗号(某些浏览器会报错)。

/* Recommended */
var obj = {
    a: 1,
    b: 2,
    c: 3
};
/* Not recommended */
var obj = {
    a: 1,
    b: 2,
    c: 3,
};
  1. 条件判断的陷阱

    在if判断中,使用===作比较,避免掉入==造成的陷阱

    • 在条件判断时,这样的一些值表示false:null,undefined,空字符串'',数字0,NaN

    • 而在==时,则会有一些让人难以理解的陷阱,如:

      (function () {
          var undefined;
          undefined == null; // true 
          1 == true; //true 
          2 == true; // false 
          0 == false; // true 
          0 == ''; // true 
          NaN == NaN;// false 
          [] == false; // true 
          [] == ![]; // true 
      })();
      
  • 对于不同类型的 == 判断,有这样一些规则,顺序自上而下:
    - undefined与null相等
    - 一个是number一个是string时,会尝试将string转换为number
    - 尝试将boolean转换为number,0或1
    - 尝试将Object转换成number或string,取决于另外一个对比量的类型

所以,对于0、空字符串的判断,建议使用 === 。===会先判断两边的值类型,类型不匹配时为false。

  • 操作DOM的时候,尽量减少重绘,有js操作的时候不管是class或者id命名都以js-开头

发表评论

textsms
account_circle
email

Yuyy

前端培训二:前端代码规范
html规范 实用为王,减少标签的数量 尽量遵循 HTML 标准和语义,但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。 <!--bad--> <aty-row> …
扫描二维码继续阅读
2020-06-23
友情链接
标签
归档
近期文章
分类
近期文章