前端代码规范，vue 代码规范

一、规范目的

对于一个团队来说，制定统一的规范是有必要的，因为个性化的东西无法产生良好的聚合效果，规范化可以提高编码的工作效率，使代码保持统一的代码风格，以便于代码整合和后期维护。

二、HTML/CSS 规范

2.1 浏览器兼容性

根据公司业务要求而定，一般：

主流程测试：chrome 30 +、IE9+；

完整测试：chrome 30 +、IE9+、360浏览器、微信 webView、手机浏览器。

2.2 html 代码规范

2.2.1 声明与编码

1. html 头部声明统一

   DOCTYPE html>
   

2. 页面编码统一

   <meta charset="UTF-8"> 
   

2.2.2 格式缩进

html 编码统一格式化显示，使用一个 Tab 键进行分层缩进（2个空格宽度），使整个页面结构层次清晰，方便阅读和修改。

2.2.3 模块注释

html 独立模块之间注释格式统一使用：

  …

或者：

  …

2.2.4 标签与属性

1. 由于 html 标签和属性不区别大小写，所以我们约定都采用小写，尤其是自定义标签和属性名，否则 js 中取不到，如：

   <div data-bgColor="green">div>
   $('div').data('bgColor');  // 取不到，已自动被浏览器转成了data-bgcolor
   

2. 不需要为 css、js 指定类型，HTML5 中默认已包含

   // 错误
   <link rel="stylesheet" type="text/css" href="" >
   <script type="text/javascript" src="" >script>
   
   // 正确
   <link rel="stylesheet" href="" >
   <script src="">script>
   

3. 所有 html 属性必须添加双引号（非单引号）

   // 错误
   <div id=mainframe> 或 <div id='mainframe'>
   
   // 正确
   <div id="mainframe">
   

4. 元素嵌套规范，每个块状元素独立一行，内联元素可选

   // 错误
   <div>
       <h1>h1><p>p>
   div>	
   <p> 
       <span>span>
       <span>span>
   p>
   
   // 正确
   <div>
       <h1>h1>
       <p>p>
   div>	
   <p><span>span><span>span>p>
   

5. 段落元素与标题元素只能嵌套内联元素

   // 错误
   <h1><div>div>h1>
   <p><div>div><div>div>p>
   
   //正确
   <h1><span>span>h1>
   <p><span>span><span>span>p>
   

6. 在 html 中不能使用小于号 “<” 和大于号 “>” 特殊字符，浏览器会将他们作为标签解析，若要正确显示，在 html 源代码中使用字符实体

   // 错误
   <a href="#">more>>a>
   
   // 正确
   <a href="#">more>>a>
   

7. img 标签中必须添加 alt 属性，如：

   <img src="…" alt="logo" />
   

8. 标签在运用时，应精良使用语义化标签，在语义不明显，即可用 div 也可用 p 时，应优先使用 p 标签，如：

   <h1>标题<h1>
   <lable for="user">用户名：lable>
   <input name="username" id="user">
   

2.3 CSS 代码规范

2.3.1 样式表编码

• 样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”

• 字符 @charset “”; 都用小写字母，不能出现转义符，编码名允许大小混写

  /* 错误 */
  
  /* @charset规则不在文件首行首个字符开始 */
  @charset "UTF-8";
  .lx {}
  
  /* 正确 */
  
  @charset "UTF-8";
  .lx {}
  

2.3.2 css 引用规范

1. 所有 css 均为外部调用，不得在页面书写任何内部样式或行内样式，vue 文件要添加 scoped 属性，避免样式污染。

2.3.3 css 注释规范

1. 单行注释：注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行，行与行之间相隔一行

   • 错误

     /*Comment Text*/
     .lx{
     	display: block;
     }
     .lx{
     	display: block;/*Comment Text*/
     }
     

   • 正确

     /* Comment Text */
     .lx {}
     
     /* Comment Text */
     .lx {}
     

2. 模块注释：注释内容第一个字符和最后一个字符都是一个空格字符，/* 与模块信息描述占一行，多个横线分隔符-与*/占一行，行与行之间相隔两行

   • 错误

     /* Module A ---------------------------------------------------- */
     .mod_a {}
     /* Module B ---------------------------------------------------- */
     .mod_b {}
     

   • 正确

     /* Module A
     ---------------------------------------------------------------- */
     .mod_a {}
     
     
     /* Module B
     ---------------------------------------------------------------- */
     .mod_b {}
     

3. 文件信息注释：在样式文件编码声明 @charset 语句下面注明页面名称、作者、创建日期等信息

   @charset "UTF-8";
   /**
    * @desc File Info
    * @author Author Name
    * @date 2016-10-10
    */
   

2.3.4 书写规范

1. 代码格式化：应统一使用展开格式书写样式

   • 样式书写一般有两种，一种是紧凑格式：

     .lx{ display: block;width: 50px;}
     

   • 一种是展开格式：

     .lx {
         display: block;
         width: 50px;
     }
     

2. 样式选择器、属性名、属性值关键字全部使用小写字母书写

   /* 错误 */
   .LX{
   	DISPLAY:BLOCK;
   }
   
   /* 正确 */
   .lx {
   	display:block;
   }
   

3. 属性书写建议遵循以下顺序

      A.）布局定位属性：display / position / float / clear / visibility / overflow
      B.）自身属性：width / height / margin / padding / border / background
      C.）文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
      D.）其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
   

4. css 背景图片

   /* 不推荐 */
   .canbox{
       background-color: #ff6600;
       background-image: url("/img/xxx.png");
   }
   
   /* 推荐(合并、css 图片引入不需要引号) */
   .canbox {
       background: #f60 url(/img/xxx.png); 
   }
   

5. 属性值为 0 时，去除单位

   /* 错误 */
   .wrap{
       margin: 0px 0px 5px 8px;
   }
   
   /* 正确 */
   .wrap {
       margin: 0 0 5px 8px;
   }
   

6. 用来显示动态文本输入的地方，样式里需加上英文强制换行

   word-break: break-all;
   

7. 上下相邻的两个模块应避免混用 margin-top 、margin-bottom ，否则会产生重叠现象

2.3.5 重置样式

1. 移动端

   * { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline; }
   body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; }
   img { border: 0 none; vertical-align: top; }
   i, em { font-style: normal; }
   ol, ul { list-style: none; }
   input, select, button, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; }
   table { border-collapse: collapse; border-spacing: 0; }
   a { text-decoration: none; color: #666; }
   body { margin: 0 auto; min-width: 320px; max-width: 640px; height: 100%; font-size: 14px; font-family: -apple-system,Helvetica,sans-serif; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
   input[type="text"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
   

2. pc 端

   html, body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, article, aside, audio, canvas, figure, footer, header, mark, menu, nav, section, time, video { margin: 0; padding: 0; }
   h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal }
   article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote { display: block; }
   ul, ol { list-style: none; }
   img { border: 0 none; vertical-align: top; }
   blockquote, q { quotes: none; }
   blockquote:before, blockquote:after, q:before, q:after { content: none; }
   table { border-collapse: collapse; border-spacing: 0; }
   strong, em, i { font-style: normal; font-weight: normal; }
   ins { text-decoration: underline; }
   del { text-decoration: line-through; }
   mark { background: none; }
   input::-ms-clear { display: none !important; }
   body { font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif; background: #fff; }
   a { text-decoration: none; color: #333; }
   a:hover { text-decoration: underline; }
   

三、JavaScript 代码规范

3.1 js 文件引入

1. 引入位置：body 标签内最后部（非 body 外面），减少因载入脚本而造成其他页面内容阻塞的问题，因为 js 是单线程的

   <html>
   <body>
       <div>页面内容…div>
       <script src="model.js">script>
   body>
   html>
   

2. 引入方式：html 页面中禁止直接编写 js 代码，统一使用

4.1.6 view 下的文件命名

• 每个页面生成一个文件夹和一个 index.vue 文件
• 使用名词命名，并且使用驼峰命名法

4.2 结构化规范

4.2.1 组件选项顺序

  - components
  - props
  - data
  - computed
  - created
  - mounted
  - metods
  - filter
  - watch

4.2.2 vue 文件基本结构

4.2.3 多个特性元素规范

• 多个特性的元素应该分多行撰写，每个特性一行。(易读)

4.2.4 元素特性顺序

• 原生属性放前面，指令放后面

  - class
  - id,ref
  - name
  - data-*
  - src, for, type, href,value,max-length,max,min,pattern
  - title, alt，placeholder
  - aria-*, role
  - required,readonly,disabled
  - is
  - v-for
  - key
  - v-if
  - v-else-if
  - v-else
  - v-show
  - v-cloak
  - v-pre
  - v-once
  - v-model
  - v-bind,:
  - v-on,@
  - v-html
  - v-text

4.3 指令规范

4.3.1 指令采用缩写模式

  // bad
  v-bind:class="{'show-left'：true}"
  v-on:click="getListData"

  // good
  :class="{'show-left'：true}"
  @click="getListData"

4.3.2 v-for 必须加上 key

   
  

    

      {{ todo.text }}
    
  
  
  
  

    

      {{ todo.text }}
    
  

4.3.3 避免 v-if 和 v-for 同时存在

• 解决方案：

  • 将数据替换为一个计算属性，让其返回过滤后的列表

      
      
    
        
    
          {{ user.name }}
        
      
    
      
      
    
        
    
          {{ user.name }}
        
      
    
      
    

  • 将 v-if 移动至容器元素上 (比如 ul, ol)

      
      
    
        
    
          {{ user.name }}
        
      
    
      
      
    
        
    
          {{ user.name }}