你在不会命名规范，会被嘲笑的！

前端成长指南
2,573 阅读8分钟

一、项目规范

  1. 项目命名 - 采用小写方式， 以中划线分隔
// bad
mall_management-system / mallManagementSystem
// good
mall-management-system
  1. 目录命名全部采用小写方式，以中划线分割，有复数结构时，要采用复数命名法
// bad
script / style / demo_scripts / demoStyles / imgs / docs

// good
scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc

【特殊】项目中的 components 中的组件目录，使用大驼峰的方式

  1. 文件名采用小写方式，以中划线分隔
// bad
renderDom.js / UserManagement.html

// good
render-dom.js / signup.css / index.html / company-logo.png
  1. 修改公共组件，需提前在群中告知
    如：

    1. @all 我需要修改 XXX 公用组件，大家请知晓；

    2. 条件允许：在该组件中写一个更新日志，写清楚改什么功能

二、代码规范

  1. css
    1.1  id 采用驼峰式命名
    1.2 less 中的变量、函数、混合、placeholder 采用驼峰式命名
    1.3 选择器尽可能精准
// bad
.content .title {
  font-size: 2rem;
}
// good
.content > .title {
  font-size: 2rem;
}

1.4 颜色值和属性值使用rgba或者十六进制两种方式，有透明度的采用rgba，否则采用十六进制，十六进制数值能用简写需使用简写，并全部使用大写。

  1. 引用
    2.1 使用 tabs (空格字符) 设置为 2 个空格
    2.2 使用 const 定义常量；避免使用 var
// bad
var a = 1
var b = 2

// good
const a = 1
const b = 2

2.3  如果你必须重新赋值你的引用， 使用 let 代替 var

  1. 对象
    3.1使用字面语法来创建对象
// bad
const item = new Object();

// good
const item = {};

3.2 在创建具有动态属性名称的对象时使用计算属性名
3.3 使用对象方法的缩写
3.4 使用属性值的缩写
3.5 只使用引号标注无效标识符的属性
3.6 更喜欢对象扩展操作符，而不是用 Object.assign 浅拷贝一个对象。 使用对象的 rest 操作符来获得一个具有某些属性的新对象。

  1. 数组
    4.1 使用字面语法创建数组
// bad
const items = new Array()

// good
const items = []

4.2 使用 Array#push 取代直接赋值来给数组添加项。
4.3 使用数组展开方法 ... 来拷贝数组。
4.4 将一个类数组对象转换成一个数组， 使用展开方法 ... 代替 Array.from
4.5 对于对迭代器的映射，使用 Array.from 替代展开方法 ... ， 因为它避免了创建中间数组
4.6  在数组回调方法中使用 return 语句。 如果函数体由一个返回无副作用的表达式的单个语句组成，那么可以省略返回值
4.7 如果数组有多行，则在开始的时候换行，然后在结束的时候换行

  1. 解构
    5.1 在访问和使用对象的多个属性的时候使用对象的解构
// bad
function getFullName(user) {
  const firstName = user.firstName
  const lastName = user.lastName

  return `${firstName} ${lastName}`
}

// good
function getFullName(user) {
  const { firstName, lastName } = user
  return `${firstName} ${lastName}`
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`
}

5.2 使用数组解构
5.3 对于多个返回值使用对象解构，而不是数组解构。

  1. 字符
    6.1 使用单引号 '' 定义字符串
// bad
const name = "Capt. Janeway"

// bad - 模板文字应该包含插值或换行。
const name = `Capt. Janeway`

// good
const name = 'Capt. Janeway'

6.2 当以编程模式构建字符串时，使用字符串模板代替字符串拼接
6.3 不要在字符串上使用 eval()
6.4  不要转义字符串中不必要的字符

  1. 函数
    7.1 永远不要定义一个参数为 arguments。 这将会优先于每个函数给定范围的 arguments 对象
// bad
function foo(name, options, arguments) {
  // ...
}

// good
function foo(name, options, args) {
  // ...
}

7.2 不要使用 arguments, 选择使用 rest 语法 ... 代替
7.3 使用默认的参数语法，而不是改变函数参数
7.4 总是把默认参数放在最后

  1. 模块
    8.1 使用import导入模块（只引入需要的代码）
// bad
import airbnbGuide from './AirbnbStyleGuide'
airbnbGuide.isEqual()

// good
import { isEqual } from './AirbnbStyleGuide'

8.2 不要直接从导入导出
8.3 只从一个路径导入所有需要的东西
8.4 将所有的 imports 语句放在所有非导入语句的上边

  1. 属性
    9.1 访问属性时使用点符号
const luke = {
  jedi: true,
  age: 28
}

// bad
const isJedi = luke['jedi']

// good
const isJedi = luke.jedi

9.2 使用变量访问属性时，使用 []表示法

  1. 变量
    10.1 把 const 声明的放在一起，把 let 声明的放在一起
// bad
let i
const items = getItems()
let dragonball
const goSportsTeam = true
let len

// good
const goSportsTeam = true
const items = getItems()
let dragonball
let i
let length
  1. 比较运算符
    11.1 使用 === 和 !== 而不是 == 和 !=
    11.2 对于布尔值使用简写，但是对于字符串和数字进行显式比较
// bad
if (isValid === true) {
  // ...
}

// good
if (isValid) {
  // ...
}

// bad
if (name) {
  // ...
}

// good
if (name !== '') {
  // ...
}

// bad
if (collection.length) {
  // ...
}

// good
if (collection.length > 0) {
  // ...
}

11.3 三目表达式不应该嵌套，通常是单行表达式
11.4 避免不必要的三目表达式

  1. 代码块
    12.1 当有多行代码块的时候，使用大括号包裹
// bad
if (test)
  return false

// good
if (test) return false

// good
if (test) {
  return false
}

// bad
function foo() { return false }

// good
function bar() {
  return false
}

12.2 如果一个 if 块总是执行一个 return 语句，那么接下来的 else 块就没有必要了。 如果一个包含 return 语句的 else if 块，在一个包含了 return 语句的 if 块之后，那么可以拆成多个 if 块。

  1. 空格
    13.1 用空格分离操作符
// bad
const x=y+5

// good
const x = y + 5

13.2 使用单个换行符结束文件
13.3  在使用链式方法调用的时候使用缩进(超过两个方法链)。 使用一个引导点，强调该行是方法调用，而不是新的语句
13.4  不要在块的开头使用空白行
13.5 不要在括号内添加空格
13.6 不要在中括号中添加空格
13.7  在花括号内添加空格
13.8 逗号之前避免使用空格，逗号之后需要使用空格
13.9 在行的末尾避免使用空格
13.10 避免多个空行，并且只允许在文件末尾添加一个换行符

  1. 逗号
    14.1 添加尾随逗号
// bad - 没有尾随逗号的 git 差异
const hero = {
     firstName: 'Florence',
-    lastName: 'Nightingale'
+    lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing']
};

// good - 有尾随逗号的 git 差异
const hero = {
     firstName: 'Florence',
     lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing'],
};

三、交互规范

  1. 所有树节点的增改弹层都是用Modal（对话框）组件 ，所有的表格增改查弹层都是用Drawer（抽屉）组件
新增：/add 有操作按钮

编辑：/edit/:id 有操作按钮

查看：/detail/:id 无操作按钮，只查看(待定)

路由定义（关键字）/:action/:id
// action: add | edit | detail
  1. Form 组件布局
    • 在Modal 中的Form 布局使用horizontal ，一行一个FormItem

    • 在Drawer 中的Form 布局使用 vertical ，一行两个FormItem

    • 在表格上方如高级搜索中的Form 布局使用 inline

四、注释规范

  • 变量注释
    1. 使用行内注释
    1. 对变量进行注释
  • 函数注释
    1. 函数的描述
    2. 参数的类型和表示的含义
    3. 返回值的类型和表示的含义
    4. 函数内部的逻辑使用行内注释
/**
 * 两数求和
 * @param {number} a 数字a
 * @param {number} b 数字b
 * @return {number} 返回两数的和
 */
function add (a, b) {
  // ...
  return a + b
}

五、变量起名

  1. 常用动词
获取设置增加删除编辑查看打开关闭
getsetadddeleteeditviewopenclose
读取写入载入保存开始结束备份恢复
readwriteloadsavebeginendbackuprestore
分割合并导入导出插入清除绑定追加
splitmergeimportexportinsertclearbindappend
清理排序选取标记复制粘贴撤销重做
cleansortselectmarkcopypasteundoredo
暂停启动发布解析搜索增加减少播放
pauselaunchpublishparsesearchincreasedecreaseplay
运行编译执行提交展开折叠监听构建
runcompileexecutesubmitexpandcollapselistenbuild
收集编码解码加密解密压缩解压缩打包
collectencodedecodeencryptdecryptcompressdecompresspack
发出连接断开发送接收下载上传刷新
emitconnectdisconnectsendreceivedownloaduploadrefresh
  1. 函数采用变量 + 名词的方式
// 获取模型列表 getModelList
// 查看模型详情 getModelDetail
// 新增模型	addModel
// 编辑模型	editModel
// 删除模型	delModel
  1. 避免单字母的名字。用你的命名来描述功能
// bad
function q() {
  // ...
}

// good
function query() {
  // ...
}
  1. 在命名对象、函数和实例时使用驼峰命名法(和数据库有关的可以使用下划线)
  1. 不要使用前置或者后置下划线
// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';

// good
this.firstName = 'Panda';
  1. 不要保存 this 的引用。 使用箭头函数或者 函数#bind。
// bad
function foo() {
  const that = this;
  return function () {
    console.log(that);
  };
}

// good
function foo() {
  return () => {
    console.log(this);
  };
}

六、 Vue项目规范

  1. 一个文件声明一个组件并只导出一个组件
  1. 组件名称和定义该组件的文件名称建议要保持一致
// bad
import GlobalFotter from './Footer

// good
import Footer from './Footer';
  1. 组件名称： 推荐使用大驼峰命名
  1. 当标签没有子元素的时候，始终使用自闭合的标签
// bad
<Component></Component>

// good
<Component />
  1. 如果标签有多行属性，关闭标签要另起一行
// bad
<Component
  bar="bar"
  baz="baz" />
      
// good
<Component
  bar="bar"
  baz="baz"
/>
  1. 使用下列的对齐方式
// goood
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
/> 
// 如果组件的属性可以放在一行（一个属性时）就保持在当前一行中
<Foo bar="bar" />

// 多行属性采用缩进
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
>
  <Quux />
</Foo>
  1. Template 的属性都采用双引号，其他的 JS 都使用单引号
// bad
<Foo bar='bar' />

// good
<Foo bar="bar" />
  1. 列表循环中禁止用index 作为key 值, 可以使用内容作为key 值
// bad
<li for="(item, index) in list" :key="index"></li>

// good
<li for="(item, index) in list" :key="item"></li>

七、vscode设置

// 在vscode编辑器中增加如下设置（ctrl+,）
"editor.codeActionsOnSave": {
    "editor.formatOnSave": true,
    "source.fixAll.eslint": true
  },
avatar
文章
阅读
粉丝