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

炸鸡超人 - 2021-09-26 08:29:38

---

思维导图

常规前缀动词含义返回值can能不能执行某个动作booleanhas是否包含某个值booleanis是否为某种情况booleanget获取某个值anyset设置某个值空或者修改后的值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>

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

Tags 标签

javascript前端vue.jshtml5css

扩展阅读