1. IT分享知识网首页
  2. 开发语言
  3. Vue

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

老牧童 • • Vue • 阅读 97

前端代码规范，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-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 代码，统一使用 <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)
老牧童老牧童
0
上一篇 2024-03-30 07:33
下一篇 2024-03-31 07:33

相关推荐

发表回复

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

关注微信