[文章]前端小团队开发规范
收藏
0
644
0
尹德华
2018-10-14发布
前端开发规范
作为一个有组织和纪律的团队，规范是必须的，毕竟每个猿猿都有自己的一套风格和规范，国内数一数二的互联网公司都有自己的一套代码风格及规范。一些小型互联网公司也都有自己的规范。由此可见“开发规范”显得尤为重要。
最近的IT圈不是很太平，前有程序员与产品经理决战紫禁之巅，后有删库跑路一说，又来了一个编码不规范被祭天。作为一个程序员不单单要有强健的体魄更要有刀枪不入的神功，要不然这是拿生命在编程啊。
为了以后团队的和谐发展，结合前端业界知名企业的规范和的自身的开发经验、故而写出了一个简洁的文档。
一、命名规则
1、文件命名
因Windows 系统和 Mac 系统大小写是不敏感的，而linux系统正好相反，所以
文件夹/文件的命名统一用小写。语义化，可使用“-”进行连接
保证项目有良好的可移植性，可跨平台。
2、文件引用路径
因为文件命名统一小写，引用也需要注意大小写问题。
3、js变量
* 命名方式：小驼峰
* 命名规范：前缀名词
* 命名建议：语义化
示例：
let maxCount = 1000
4、常量
* 命名方式：全部大写
* 命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词
* 命名建议：语义化
示例：
const MAX_COUNT = 1000
5、函数
* 命名方式：小驼峰式命名法。
* 命名规范：前缀应当为动词。
* 命名建议：语义化
A、can 判断是否可执行某个动作(权限) 函数返回一个布尔值。true：可执行；false：不可执行
B、has 判断是否含有某个值 函数返回一个布尔值。true：含有此值；false：不含有此值
C、is 判断是否为某个值 函数返回一个布尔值。true：为某个值；false：不为某个值
D、get 获取某个值 函数返回一个非布尔值
E、set 设置某个值 无返回值、返回是否设置成功或者返回链式对象
F、load 加载某些数据 无返回值或者返回是否加载完成的结果
6、css 命名
* 使用语义化命名，尽量不使用表现化的或没有语义的命名
* 命名统一使用“ -
”来连接
* 命名统一添加前缀防止引入各种UI组件导致冲突
二、注释
1、单行注释
必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。
2、多行注释
二、风格
1、缩进：
使用 四个空格代替tab 做为一个缩进层级
2、空格：
A、二元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格。
示例：
B、用作代码块起始的左花括号 { 前必须有一个空格。
示例：
C、if / else / for / while / function / switch / do / try / catch / finally 关键字后，必须有一个空格。
示例如上
D、在对象创建时，属性中的 : 之后必须有空格，: 之前不允许有空格。
示例：
E、函数声明、具名函数表达式、函数调用中，函数名和 ( 之间不允许有空格。
示例：
F、 “,” 和 “;” 前不允许有空格。
示例：
G、单行声明的数组与对象，如果包含元素，{} 和 [] 内紧贴括号部分不允许包含空格。
示例：
H、在函数声明、函数表达式、函数调用、对象创建、数组创建、for语句等场景中，不允许在 , 或 ; 前换行。
示例：
此文档的规范可能并不成熟，也可能遗漏了很多一些细节，大家有什么建议，或是自己觉得好的规范可以向我提议，我们一起讨论讨论。并且，我会一直不断完善这份规范。
总结
此文档可能并不适用每一个人，但也不要因为项目代码风格规范不统一和同事争论的面红耳赤。可能刚开始有些地方你看不习惯或是敲不习惯，不过不要紧，想想这么做都是为了团队和睦，世界和平，我们做出的牺牲都是必要的。
-
{{post.UserNickName}}
{{post.CreateTime}}{{post.ThumbsUpCount}} {{post.CommentCount}}条评论编辑 采纳 -
- 暂无回答
- 最近热帖
- {{item.Title}} {{item.ViewCount}}
- 近期热议
- {{item.Title}} {{item.PostCount}}