【前端】持续总结一下Vue书写规范,包含了元素,组件,注释,指令等

简介: 总结一下Vue书写规范,包含了元素,组件,注释,指令等

多个特性的元素规范

多个特性的元素应该分多行撰写,每个特性一行。(增强更易读)

<!-- 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>

元素特性的顺序

原生属性放前面,指令放后面
如下所示:

- 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

组件选项顺序

如下所示:

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

注释规范

代码注释在一个项目的后期维护中显的尤为重要,所以我们要为每一个被复用的组件编写组件使用说明,为组件中每一个方法编写方法说明
务必添加注释列表,公共组件使用说明,各组件中重要函数或者类说明,复杂的业务逻辑处理说明,特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述、

多重 if 判断语句
注释块必须以 /(至少两个星号)开头/
单行注释使用//
单行注释
注释单独一行,不要在代码后的同一行内加注释。例如:

bad
var name =”abc”; // 姓名
good
// 姓名
  var name = “abc”;       
多行注释
组件使用说明,和调用说明
/**
* 组件名称
* @module 组件存放位置
* @desc 组件描述
* @author 组件作者
* @date 2017年12月05日17:22:43
* @param {Object} [title]    - 参数说明
* @param {String} [columns] - 参数说明
* @example 调用示例
*  <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
**/

编码规范

优秀的项目源码,即使是多人开发,看代码也如出一人之手。统一的编码规范,可使代码更易于阅读,易于理解,易于维护。尽量按照 ESLint 格式要求编写代码

源码风格
使用 ES6 风格编码
定义变量使用 let ,定义常量使用 const
静态字符串一律使用单引号或反引号,动态字符串使用反引号

// bad
const a = 'foobar'
const b = 'foo' + a + 'bar'
// acceptable
const c = `foobar`
// good
const a = 'foobar'
const b = `foo${a}bar`
const c = 'foobar'

解构赋值

数组成员对变量赋值时,优先使用解构赋值

// 数组解构赋值
const arr = [1, 2, 3, 4]
// bad
const first = arr[0]
const second = arr[1]
// good
const [first, second] = arr

函数的参数如果是对象的成员,优先使用解构赋值

// 对象解构赋值
// bad
function getFullName(user) {
const firstName = user.firstName
const lastName = user.lastName
}
// good
function getFullName(obj) {
const { firstName, lastName } = obj
}
// best
function getFullName({ firstName, lastName }) {}

拷贝数组

使用扩展运算符(...)拷贝数组。

const items = [1, 2, 3, 4, 5]
// bad
const itemsCopy = items
// good
const itemsCopy = [...items]

箭头函数

需要使用函数表达式的场合,尽量用箭头函数代替。因为这样更简洁,而且绑定了 this

// bad
const self = this;
const boundMethod = function(...params) {
returnapply(self, params);
}
// acceptable
const boundMethod = method.bind(this);
// best
const boundMethod = (...params) => method.apply(this, params);

模块

如果模块只有一个输出值,就使用 export default,如果模块有多个输出值,就不使用 export default,export default 与普通的 export 不要同时使用

// bad
import * as myObject from './importModule'
// good
import myObject from './importModule'

如果模块默认输出一个函数,函数名的首字母应该小写。

function makeStyleGuide() {
}
export default makeStyleGuide;

如果模块默认输出一个对象,对象名的首字母应该大写。

const StyleGuide = {
es6: {
}
};
  export default StyleGuide

指令规范

指令有缩写一律采用缩写形式

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

v-for 循环必须加上 key 属性,在整个 for 循环中 key 需要唯一

<!-- good -->
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
<!-- bad -->
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>

避免 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) {
returnisActive
})
}
}
</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>

Props 规范

Props 定义应该尽量详细

// bad 这样做只有开发原型系统时可以接受
props: ['status']
// good
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}

其他:避免 this.$parent
调试信息 console.log() debugger 使用完及时删除
除了三目运算,if,else 等禁止简写

// bad
if (true)
alert(name);
log(name);
// bad
if (true)
alert(name);
log(name)
// good
if (true) {
alert(name);
}
log(name);
相关文章
|
16天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
7天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用,包括单个插槽和多个具名插槽的定义及在父组件中的使用方法,展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
|
16天前
|
存储 API
vue3中如何动态自定义创建组件并挂载
vue3中如何动态自定义创建组件并挂载
207 90
|
9天前
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
28 5
Vue使用element中table组件实现单选一行
|
9天前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
23 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
9天前
|
前端开发
前端基础(十四)_隐藏元素的方法
本文介绍了几种在前端开发中隐藏元素的方法,包括使用`display:none`、`visibility:hidden`、`opacity:0`等CSS属性,并提供了相应的示例代码。此外,还提到了其他隐藏元素的技巧,如通过设置元素位置、使用`overflow`属性和`filter`属性以及`rgba`颜色值来实现元素的隐藏。
29 1
前端基础(十四)_隐藏元素的方法
|
11天前
|
JavaScript
Vue2.0、Vue3.0分别使用v-model封装组件[Vue必会]
本文介绍了在Vue 2和Vue 3中如何使用`v-model`来实现组件间的双向数据绑定,包括在Vue 2中使用`value`和`input`事件,以及在Vue 3中使用`modelValue`和`update:modelValue`事件的方法。
55 22
|
21天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
6天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
9天前
|
前端开发 JavaScript
前端基础(七)_DOM元素获取(getElementById、getElementsByTagName、getElementsByClassName、querySelector等)
本文介绍了如何在前端通过不同的方法获取DOM元素,包括getElementById、getElementsByTagName、getElementsByClassName、querySelector和querySelectorAll。
28 3
下一篇
无影云桌面