首页> 前端开发> 前端小团队开发规范

[文章]前端小团队开发规范

收藏
0 644 0

前端开发规范

作为一个有组织和纪律的团队,规范是必须的,毕竟每个猿猿都有自己的一套风格和规范,国内数一数二的互联网公司都有自己的一套代码风格及规范。一些小型互联网公司也都有自己的规范。由此可见“开发规范”显得尤为重要。

最近的IT圈不是很太平,前有程序员与产品经理决战紫禁之巅,后有删库跑路一说,又来了一个编码不规范被祭天。作为一个程序员不单单要有强健的体魄更要有刀枪不入的神功,要不然这是拿生命在编程啊。

为了以后团队的和谐发展,结合前端业界知名企业的规范和的自身的开发经验、故而写出了一个简洁的文档。

 

一、命名规则

1、文件命名

Windows 系统和 Mac 系统大小写是不敏感的,而linux系统正好相反,所以

文件夹/文件的命名统一用小写。语义化,可使用“-”进行连接

保证项目有良好的可移植性,可跨平台。

 

2、文件引用路径

因为文件命名统一小写,引用也需要注意大小写问题。

 

3js变量

* 命名方式:小驼峰   

* 命名规范:前缀名词

* 命名建议:语义化

示例: let maxCount = 1000

 

4、常量

          * 命名方式:全部大写

          * 命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词

          * 命名建议:语义化

   示例: const MAX_COUNT = 1000

 

5、函数

          * 命名方式:小驼峰式命名法。

          * 命名规范:前缀应当为动词。

          * 命名建议:语义化

Acan       判断是否可执行某个动作(权限)  函数返回一个布尔值。true:可执行;false:不可执行

Bhas       判断是否含有某个值    函数返回一个布尔值。true:含有此值;false:不含有此值

Cis   判断是否为某个值       函数返回一个布尔值。true:为某个值;false:不为某个值

Dget       获取某个值    函数返回一个非布尔值

Eset 设置某个值    无返回值、返回是否设置成功或者返回链式对象

Fload      加载某些数据       无返回值或者返回是否加载完成的结果

 

6css 命名

* 使用语义化命名,尽量不使用表现化的或没有语义的命名

* 命名统一使用“ - ”来连接

* 命名统一添加前缀防止引入各种UI组件导致冲突

 

二、注释

1、单行注释

必须独占一行。// 后跟一个空格,缩进与下一行被注释说明的代码一致。


2、多行注释


 

二、风格

1、缩进:

使用 四个空格代替tab 做为一个缩进层级

2、空格:

A、二元运算符两侧必须有一个空格,一元运算符与操作对象之间不允许有空格。

示例:


B、用作代码块起始的左花括号 { 前必须有一个空格。

示例:


Cif / else / for / while / function / switch / do / try / catch / finally 关键字后,必须有一个空格。

示例如上

 

D、在对象创建时,属性中的 : 之后必须有空格,: 之前不允许有空格。

示例:


 

E函数声明、具名函数表达式、函数调用中,函数名和 ( 之间不允许有空格。

示例:


 

F , “;” 前不允许有空格。

示例:


 

           G、单行声明的数组与对象,如果包含元素,{} [] 内紧贴括号部分不允许包含空格。

示例:


 

H、在函数声明、函数表达式、函数调用、对象创建、数组创建、for语句等场景中,不允许在 , ; 前换行。

示例:


 

此文档的规范可能并不成熟,也可能遗漏了很多一些细节,大家有什么建议,或是自己觉得好的规范可以向我提议,我们一起讨论讨论。并且,我会一直不断完善这份规范。

总结

此文档可能并不适用每一个人,但也不要因为项目代码风格规范不统一和同事争论的面红耳赤。可能刚开始有些地方你看不习惯或是敲不习惯,不过不要紧,想想这么做都是为了团队和睦,世界和平,我们做出的牺牲都是必要的。

 

前端开发
最近热帖
{{item.Title}} {{item.ViewCount}}
近期热议
{{item.Title}} {{item.PostCount}}