团队开发推荐使用的基本代码规范

思维导图

常规前缀

动词	含义	返回值
can	能不能执行某个动作	boolean
has	是否包含某个值	boolean
is	是否为某种情况	boolean
get	获取某个值	any
set	设置某个值	空或者修改后的值
change	改变某个值,一般用于修改相反布尔值	空或者修改后的值

命名规范

英文	中文
camelCase	小驼峰式命名法
PascalCase	大驼峰式命名法
kebab-case	短横线连接式
Snake	下划线连接式

kebab-case 和 Snake区别

btn-submit/btn_submit

前者选中单词,后者整个词组选中

前者不能作为变量名,后者可以

项目文件名

命名方法：kebab-case

my-project-name

图片文件名

命名方法：Snake

my_pic.jpg

CSS文件名

命名方法：kebab-case

my-css.css

JS文件名

命名方法：kebab-case

my-js.js

组件名

命名方法：PascalCase

MyComponent.vue

单例组件名

命名方法：The + PascalCase

跟普通组件命名区别在于前缀加The彰显它的唯一性,唯一在它是不接受任何参数的纯组件,即完全独立父组件的组件

components/
    |- TheGuide.vue
    |- TheNoticeBar.vue

也可以独立用一个前缀目录放置

components/
    |- the/
        |- Guide.vue
        |- NoticeBar.vue

前者在使用的时候可以很清楚的知道它的唯一性,后者使用无感知需要从目录结构了解

基础组件名

命名方法：Base+ PascalCase

跟单例组件相反的组件,不包含业务纯基础功能型进行高度抽象的组件,都是需要传递特定参数实现不同效果

components/
    |- BaseButton.vue
    |- BaseBox.vue
    |- BasePopup.vue

也可以独立用一个前缀目录放置

components/
    |- base/
        |- Button.vue
        |- Box.vue
           |- Popup.vue

前者在使用的时候可以很清楚的知道它的唯一性,后者使用无感知需要从目录结构了解

强耦合组件名

命名方法：父组件前缀+ PascalCase

一般跟父元素是强绑定关系的组件就以父组件为前缀

components/
    |- List.vue
    |- ListItem.vue

业务组件

这类组件一般分几种情况:

• 复用范围涉及多个页面,放组件根目录

  components/
      |- Business.vue

• 复用范围仅限单个页面,放页面目录

  components/
      |- index/
          |- Business

• 属于系列组件,放前缀名录

  components/
      |- popup/
          |- Award
          |- Search

使用命名一般分PascalCase和kebab-case皆可,不过更推荐跟命名一致的用法,方便搜索使用的地方

props名

声明的时候使用 Snake,使用的时候用 kebab-case

// component
props:{
    greetingText: String
}

<Component greeting-text="hi"/>

route名

命名方法：Snake

// bad
{
  path:  /user_info , // user_info 当成一个单词,搜索引擎无法区分语义
  name:  UserInfo ,
  component: UserInfo
},

// good
{
  path:  /user-info , // 能解析成 user info
  name:  UserInfo ,
  component: UserInfo
},

自定义事件

命名方法：kebab-case

命名规范：on + 动词,需要跟原生的区分

<MyComponent @on-my-event="handleDoSomething" />
----------------------------------------------
this.$emit('on-my-event')

不用驼峰写法的原因两个:

• 事件名不会作为变量或者属性名
• v-on事件监听器在Dom模板会自动转换全小写,因为HTML大小写不敏感,用驼峰不容易察觉到

变量

命名方法：camelCase

命名规范：(系列前缀) + 类型 + 对象描述或属性的方式

const showPopupSearch = true
const showPopupAward = true

常量

命名方法：全大写Snake

命名规范：(系列前缀) + 类型 + 对象描述或属性的方式

const TIMEOUT = 10

方法

命名方法：camelCase

命名规范：动词 + 名词形式

jumpUrl
openPopup

一些特殊方法最好附带类型命名

// normal
getData // 太通用,无法直接看出数据类型

// better
getRecord // 一般能联想到就是数组类型
getList

// OR
getXxxAry // 如果无法联想的直接带上数据类型缩写
getXxxObj
getXxxBol

Vue2代码结构

遵循一定功能区块规律

外部注入

自身数据

计算/监听属性

生命周期

方法

export default {
  name:  MyComponent ,
  mixins: [],
  props: {},
  data () {
    return {}
  },
  computed: {},
  watch: {}
  created () {},
  mounted () {},
  destroyed () {},
  methods: {},
}
</script>

Vue3代码结构

自顶向下,通用->关注点逻辑

<script setup>
定义外来注入
路由
Vuex

关注点A
关注点B
...
</script>

样式书写建议

1. 布局定位属性：display / position / float / clear / visibility / overflow
2. 自身属性：width / height / box-sizing / margin / padding / border / border-radius
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word / text-shadow
4. 背景属性: background / box-shadow
5. 动画/2,3D属性: animation / transform
6. 其他属性（CSS3）：content / cursor / …