前端文档

# 命名规范

对于阅读代码来说，一个简单有效的函数名、变量名，远远比冗长的注释来的更有效。

# 样式

  • 使用连字符"-"来作为单词的分隔符，避免使用"_"下划线
  • 不用驼峰命名的 class 名，驼峰命名一般是用于命名 id 选择器
/*不推荐*/
.demoimage {
}
.error_status {
}
/*推荐*/
.ads-sample {
}

# 文件夹

  • 命名方法：小驼峰式命名法
  • 命名建议：名字不要过长
如
  homePage
  loadingIndicator

# 文件名

  • 命名方法：小驼峰式命名法
  • 命名建议：名字不要过长
├── homePage/
│   |── list.vue
│   │── addInfo.vue
│   │── editInfo.vue
│   │── detail.vue
│   └── ...

# 单文件组件名

components/
|- MyComponent.vue

# 路由

  • 命名方法：小驼峰式命名法
  • 命名建议：名字不要过长
/comment/dianpinManage

# 变量名

  • 命名方法：小驼峰式命名法
  • 命名规范：前缀应该是名词
  • 命名建议：尽量在变量名字中体现所属类型，如:length、count 等表示数字类型；而包含 name、title 表示 为字符串类型。
// 好的命名方式
let maxCount = 10
let tableTitle = 'LoginTable'
// 不好的命名方式
let setCount = 10
let getTitle = 'LoginTable'

# 函数名

  • 命名方法：小驼峰式命名法。
  • 命名规范：前缀应当为动词。
  • 命名建议：可使用常见动词约定
// 是否可阅读
function canRead() {
  return true
}
// 获取名称
function getName() {
  return this.name
}

# 类名

  • 命名方法：大驼峰式命名法，首字母大写。
  • 命名规范：前缀为名称。
class Student {}

# 变量声明

  • 优先考虑用 const 声明
  • 如果变量值是原始值类型并且需要改变，则使用 let 声明

# 原生的方法

  • 命名方法：小驼峰式命名法。
  • 命名建议：以native*开头，以函数方式调用，原生方法 mixins 形式混入多维护不直观
// 拉起钱包明细
export nativeWalletDetail = () => {}

// 拉起分享
export nativeShare = () => {}

← CSS →