前端代码规范,vue 代码规范

前端代码规范,vue 代码规范一、规范目的对于一个团队来说,制定统一的规范是有必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码的工作效率,使代码保持统一的代码风格,以便于代码整合和后期维护。二、HTML/CSS规范2.1浏览器兼容性根据公司业务要求而定,一般:主流程测试:chrome30+、IE9+;完整测试:chrome30+、IE9+、360浏览器、微信webView、手机浏览器。2.2html代码规范2.2.1声明与编码html头部声明统一<!DOCTYPEh

大家好,欢迎来到IT知识分享网。前端代码规范,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"> <!-- ie6也支持,无须担心 -->
    
2.2.2 格式缩进

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

2.2.3 模块注释

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

<!-- start: XXX模块 --><!-- end: XXX模块 -->

或者:

<!-- XXX模块 --><!-- /XXX模块 -->
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&gt;&gt;</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-topmargin-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 代码,统一使用 <script> 外部引用的方式,一遍打包压缩和缓存

3.2 代码缩进

3.2.1 整体层次

使用 Tab 键进行代码缩进,(2个空格宽度)

(function() { 
   
  const i = 0;
  function innerFun() { 
   
    const j = 0;
      ……
  }
});
3.2.2 局部间隔
// 错误
let arr=[1,2],str='hello'+'Lucy';

let myfun=function(arg){ 
   
  //todo…
}

// 正确
let arr = [1,2], 
    str = 'hello' + 'Lucy';

let myfun = function(arg) { 
   
    //todo…
}

3.3 JS 注释

3.3.1 文件头部注释
/* * @Author: TJ. * @Date: 2022-03-24 13:37:38 * @LastEditors: TJ. * @LastEditTime: 2022-03-26 11:36:08 * @Description: 品牌相关接口 * @FilePath: \cei-saas-platform\src\api\brand.js */
3.3.2 方法注释
/** * @Author: TJ * 当内容超出指定行数显示 Tooltip * @param {Object} obj 事件对象 * @param {Object} item 数据对象 * @param {String} val 提示内容 * @param {Number} num 超出几行显示 Tooltip * @param {String} tooltipModel el-tooltip 的 v-model */
3.3.3 单行注释
let funName = function(arg1, arg2) { 
   
  this.arg1 = arg1;

  // 单行注释说明(上面添加一空行, //与说明之间空一格)
  this.arg2 = arg2;
};

3.4 命名规则

  1. 变量名应由 26 个大小写字母 (A…Z,a…z),10 个数字(0…9),和 “_” (下划线)组成

  2. 通常,使用驼峰写法,对象、函数、实例时尤其如此

    // 错误
    let is_my_object = { 
         };
    let is-my-object = { 
         };
    
    // 正确
    let isMyObject = { 
         };
    
  3. 构造函数或类使用驼峰式大写

    // 错误
    let bad = new user({ 
         
      name: 'nope'
    });
    
    // 正确
    let good = new User({ 
         
      name: 'nope'
    });
    
  4. 常量大写,并用下划线分割,如:

    NAMES_LIKE_THIS
    

3.5 编码规范

3.5.1 逗号
  • 不要加多余的逗号,这可能会在 IE 下引起错误,同事如果多一个逗号某些 ES3 的实现会计算多数组的长度

    // 错误
    let hero = { 
         
      firstName: 'Kevin',
      lastName: 'Flynn',
    };
    
    // 正确
    let hero = { 
         
      firstName: 'Kevin',
      lastName: 'Flynn'
    };
    
3.5.2 分号
  • 本规范遵循 Standard 的规范,不使用分号。

    关于应不应该使用分号的讨论有很多,本规范认为非必要的时候,应该不使用分号,好的 JS 程序员应该清楚场景下是一定要加分号的,相信你也是名好的开发者。

    // 错误
    const test = 'good';
    (function () { 
         
      const str = 'hahaha';
    })()
    
    // 正确
    const test = 'good'
    ;(() => { 
         
      const str = 'hahaha'
    })();
    
3.5.3 {} []
  • new 关键字的使用除了在需要实例化一个对象,或者罕见的需要延时加载数据的情况外,基本上不需要使用 new关键字,在 javascript里分配大量的new变量地址会有效率问题

    // 错误
    const item1 = new Object(),  item2 = new Array();
    
    // 正确
    const item1 = { 
         },  item2 = [];
    
3.5.4 字符串
  1. 字符串统一使用单引号的形式 ''

    // 错误
    const department = "LXW"
    
    // 正确
    const department = 'LXW'
    
  2. 字符串太长的时候,请不要使用字符串换行符换行\,而是使用+

    const str = '找创意,享生活 找创意,享生活' +
      '找创意,享生活 找创意,享生活 找创意,享生活' +
      '找创意,享生活'
    
  3. 程序化生成字符串是,请使用模板字符串

    const test = 'test'
    
    // 错误
    const str = ['a', 'b', test].join()
    
    // 错误
    const str = 'a' + 'b' + test
    
    // 正确
    const str = `ab${ 
           test}`
    
3.5.5 比较运算符 & 相等
  • 使用 ===!== 而非 ==!=

  • 条件声明例如 if 会用 ToBoolean 这个抽象方法将表达式转成布尔值并遵循如下规则

    • Objects 等于 true

    • Undefined 等于 false

    • Null 等于 false

    • Booleans 等于 布尔值

    • Numbers+0, -0, 或者 NaN 的情况下等于 false, 其他情况是 true

    • Strings'' 时等于 false, 否则是 true

      if ([0] && []) { 
             
        // true
        // 数组(即使是空数组)也是对象,对象等于true
      }
      
3.5.6 代码块
// 错误
if (test)
  return false;

// 正确
if (test) return false;

// 或
if (test) { 
   
  return false;
}

// 错误
function() { 
    return false; }

// 正确
function() { 
   
  return false;
}
3.5.7 JS 常见参数命名建议
  • 元素:ele || e
  • 参数:arg
  • 对象:obj
  • 数组:arr
  • 指令:ret
  • 长度:len

四、vue 规范

注:本规范基于 vue 官方风格整理 vue 风格指南

4.1 命名规范

4.1.1 普通变量
  1. 命名方法:驼峰命名法

  2. 命名规范:

    • 命名必须是跟需求相关的词,例如我们要声明一个变量表示 我的老师,我们可以这样定义 :

      let myTeacher = "我的老师"
      
    • 命名是复数的时候,需要加s,例如当我们想声明一个数组用来表示很多朋友,我们可以这样定义:

      let friends = []
      
4.1.2 常量规范
  • 使用大写字母和下划线来组合命名,下划线用以分割单词

    const MAX_LIMIT = 150
    const URL = 'https://www.taobao.com/'
    
4.1.3 组件命名规范
  1. 声明组件:组件应遵循PascalCase约定,也就是组件名应该始终是多个单词的(根组件App除外),并且单词首字母应该大写

    // good
    export default {
     name: 'TodoItem',
     // ...
    }
    
    // bad 
    export default {
     name: 'Todo',
     // ...
    }
    
  2. 使用组件:使用组件应遵循kebab-case 约定,也就是在页面中使用组件,需要前后闭合,并以短线分割

    <div id="app">
      <todo-item></todo-item>
    </div>
    
4.1.4 method 命名规范
  1. 驼峰式命名,统一使用动词,或者动词+名词形式

    //good:
    jumpPage、openUserInfoDialog
    
    //bad:
    go、nextPage、show、open、login
    
  2. 请求数据方法以 data 结尾

    // good
    getListData   postFormData
    
    // bad
    getList  postForm
    
  3. 函数方法常用动词

    get 获取/set 设置,
    add 增加/remove 删除
    create 创建/destory 移除
    start 启动/stop 停止
    open 打开/close 关闭,
    read 读取/write 写入
    load 载入/save 保存,
    create 创建/destroy 销毁
    begin 开始/end 结束,
    backup 备份/restore 恢复
    import 导入/export 导出,
    split 分割/merge 合并
    inject 注入/extract 提取,
    attach 附着/detach 脱离
    bind 绑定/separate 分离,
    view 查看/browse 浏览
    edit 编辑/modify 修改,
    select 选取/mark 标记
    copy 复制/paste 粘贴,
    undo 撤销/redo 重做
    insert 插入/delete 移除,
    add 加入/append 添加
    clean 清理/clear 清除,
    index 索引/sort 排序
    find 查找/search 搜索,
    increase 增加/decrease 减少
    play 播放/pause 暂停,
    launch 启动/run 运行
    compile 编译/execute 执行,
    debug 调试/trace 跟踪
    observe 观察/listen 监听,
    build 构建/publish 发布
    input 输入/output 输出,
    encode 编码/decode 解码
    encrypt 加密/decrypt 解密,
    compress 压缩/decompress 解压缩
    pack 打包/unpack 解包,
    parse 解析/emit 生成
    connect 连接/disconnect 断开,
    send 发送/receive 接收
    download 下载/upload 上传,
    refresh 刷新/synchronize 同步
    update 更新/revert 复原,
    lock 锁定/unlock 解锁
    check out 签出/check in 签入,
    submit 提交/commit 交付
    push 推/pull 拉,
    expand 展开/collapse 折叠
    begin 起始/end 结束,
    start 开始/finish 完成
    enter 进入/exit 退出,
    abort 放弃/quit 离开
    obsolete 废弃/depreciate 废旧,
    collect 收集/aggregate 聚集
    
4.1.5 props 命名
  • 在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板中应该始终使用 kebab-case

    <!-- bad -->
    <script>
    props: {
      'greeting-text': String
    }
    </script>
    
    <welcome-message greetingText="hi"></welcome-message>
    
    <!-- good -->
    <script>
    props: {
      greetingText: String
    }
    </script>
    
    <welcome-message greeting-text="hi"></welcome-message>
    
4.1.6 view 下的文件命名
  • 每个页面生成一个文件夹和一个 index.vue 文件
  • 使用名词命名,并且使用驼峰命名法

4.2 结构化规范

4.2.1 组件选项顺序
  - components
  - props
  - data
  - computed
  - created
  - mounted
  - metods
  - filter
  - watch
4.2.2 vue 文件基本结构
  <template>
    <div>
      <!--必须在div中编写页面-->
    </div>
  </template>
  <script>
    export default {
      components : {
      },
      data () {
        return {
        }
      },
      mounted() {
      },
      methods: {
      }
   }
  </script>
  <!--声明语言,并且添加scoped-->
  <style lang="scss" scoped>
  </style>
4.2.3 多个特性元素规范
  • 多个特性的元素应该分多行撰写,每个特性一行。(易读)

    <!-- bad -->
    <img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
    <my-component foo="a" bar="b" baz="c"></my-component>
    
    <!-- good -->
    <img
      src="https://vuejs.org/images/logo.png"
      alt="Vue Logo"
    >
    <my-component
      foo="a"
      bar="b"
      baz="c"
    >
    </my-component>
    
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
   <!-- bad -->
  <ul>
    <li v-for="todo in todos">
      {
  
  { todo.text }}
    </li>
  </ul>
  
  <!-- good -->
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {
  
  { todo.text }}
    </li>
  </ul>
4.3.3 避免 v-if 和 v-for 同时存在
  • 解决方案:

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

        <!-- bad -->
        <ul>
          <li v-for="user in users" v-if="user.isActive" :key="user.id">
            {
            
            { user.name }}
          </li>
        </ul>
      
        <!-- good -->
        <ul>
          <li v-for="user in activeUsers" :key="user.id">
            {
            
            { user.name }}
          </li>
        </ul>
      
        <script>
        computed: {
          activeUsers: function () {
            return this.users.filter(function (user) {
              return user.isActive
            })
          }
        }
        </script>
      
    • 将 v-if 移动至容器元素上 (比如 ul, ol)

        <!-- bad -->
        <ul>
          <li v-for="user in users" v-if="shouldShowUsers" :key="user.id">
            {
            
            { user.name }}
          </li>
        </ul>
      
        <!-- good -->
        <ul v-if="shouldShowUsers">
          <li v-for="user in users" :key="user.id">
            {
            
            { user.name }}
          </li>
        </ul>
      

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/10576.html

(0)
上一篇 2024-03-30 07:33
下一篇 2024-03-31 07:33

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信