关于javascript:团队开发推荐使用的基本代码规范

思维导图

惯例前缀

命名标准

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 / …