个人整理前端代码规范

最新推荐文章于 2024-01-16 14:16:27 发布

将慧圣

最新推荐文章于 2024-01-16 14:16:27 发布

阅读量676

点赞数 1

分类专栏：前端文档分享文章标签：前端代码规范 javascript

本文链接：https://blog.csdn.net/qq_42786011/article/details/126604859

版权

前端文档分享专栏收录该内容

55 篇文章 5 订阅

订阅专栏

前端代码开发规范

规范目的

为提高团队协作效率
便于后来人员添加功能及前后期维护优化
输出高质量的代码

命名规范

1. 组件命名规范

组件文件名应该始终以单词大写开头，组件名也是以单词大写开头，当多个单词拼写成的组件时，单词开头大写，采用驼峰式命名规则。
一般是多个单词全拼，减少简写的情况，这样增加可读性。
组件应该都放到components文件夹下，单个页面独立一个文件夹，用来放相对应的vue文件以及页面相关的样式文件，样式少可直接写到页面组件里边，这样更符合组件化的思想。
文件夹名称应统一格式，小写开头，统一以page结尾，比如:homePage，listPage这样子的命名。公用组件应该统一放到public文件下

2. 公共的组件命名规范

当项目中需要自定义比较多的基础组件的时候，建议以一个统一的单词Mark开头，或者放到Mark文件夹统一管理，这样做的目的是为了方便查找。例如:

3. 注释规范

代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每为组件中每一个方法编写方法说明

单行注释

// 定义牛牛
const markName = “勇敢牛牛”;

多行注释
```
/**开始 
@描述
**/结束
```
- 例如：

4. method 方法命名命名规范

// 驼峰式命名，统一使用动名词形式
例如：AddList、RemoveList、tarkHomePage

// 获取数据，尽量使用易读的单词get开头
例如：getListData、getVideosData

// 经常会用到的还有 add/remove ; get/set ; open/close等

5. 组件结构

<template>
  <div>
    <!--页面Dom显示区域-->
  </div>
</template>

<script>
  export default {
    name: "marknum",
    data() {
      return {}
    },
    created() {
    },
    mounted() {
    },
    methods: {}
  }
</script>

<style scoped>

</style>

组件的样式规范
- 单个组件样式建议直接写到组件下style标签下，可添加scoped 属性，防止样式全局污染，写样式的时候尽量少写元素选择器，为了提高代码查找速度，可以用类选择器。
- 如果组件涉及样式较多，要在style标签中引入外链样式表，以保持代码的整洁易读性
特性的元素规范
- 多个特性的元素应该分多行撰写，每个特性一行，增强更易读
元素特性的顺序
原生属性放前面，指令放后面。如下：
- 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

6. 指令规范

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

:class=“{‘active’：true}”
@click=“getListData”

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

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

避免 v-if 和 v-for 同时用在一个元素上（性能问题）解决方案如下：

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

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

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

7.CSS规范

通用规范

统一使用"-"连字符
如果 CSS 可以做到，就不要使用 JS
在一切可以缩写的情况下，请务必缩写，它最大的好处就是节省了字节，便于维护，并使阅读更加一目了然。
元素选择器应该避免在 scoped 中出现,在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。
在非必要情况下，样式文件一率需要外部引入，尽量避免在vue页面中直接书写css样式。
定义的class类名尽量不要冲突，尽可能的保证class类名的唯一性。

声明应该按照下表的顺序从左到右从上到下

显示属性	自身属性	文本属性和其他修饰
display	width	font
visibility	height	text-align
position	margin	text-decoration
float	padding	vertical-align
clear	border	white-space
list-style	overflow	color
top	min-width	content
	background	other text

结构属性：

display
position,left,top,right
overflow,float
margin,padding

表现属性

background,border etc
font,text

.exemple {
  display: inline-block;
  position: absolute;
  left: calc(50% - 10px);
  top: 20vh;
  overflow: hidden;
  margin: 1rem;
  padding: 1rem;
  background-color: #fff;
  border: 1px solid #eee;
  font-family: 'Arial', sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
}

功能性样式表：方便引用，可加入简写样式表

语义	命名	简写
浮动清除	`clearboth/clearFix`	cb
左浮动	floatleft	`fl`
右浮动	floatright	`fr`
相对定位	position	`pos-r`
绝对定位	position	`pos-a`
固定定位	position	`pos-f`
块级	block	`d-b`
内联块级	inlineblock	d-ib
文本居中	textaligncenter	`text-c`
文本居左	textalignleft	`text-l`
文本居右	textalignright	`text-r`
垂直居中	verticalalignmiddle	ver-m/vam
溢出隐藏	overflowhidden	ov-h/oh
完全消失	displaynone	`d-n`
字体大小	fontsize	fs
字体粗细	fontweight	fw
字体颜色	fontcolor	fc