web前端代码基础规范

1、组件命名规范

组件名应该始终是多单词的,根组件 App 以及 transition、component 之类的 vue 内置组件除外。

这样做可以避免跟现有的以及未来的 HTML 元素相冲突,因为所有的 HTML 元素名称都是单个单词的。

组件命名应该采用PascalCase(首字母大写)命名规范,例如:MyComponent

组件名应该倾向于完整单词而不是缩写。

2、组件文件命名规

要么始终是单词大写开头 (PascalCase),要么始终是横线连接(kebab-case)。例如:

MyComponent(.vue) //全局组件

my-component(.vue) // 业务文件/ 页面组件

和父组件紧密耦合的子组件 应该以父组件 名作为前缀命名

components/

-ToDoList.vue

-TodoListitem.vue

-TodolistItem.vue

3、组件属性命名规范

在声明  prop  的时候,其命名应该始终使用camelCase(小驼峰式),例如:myProp

而在模板(.vue)和 JSX中应该始终使用kebab-case.

4、组件事件命名规范

组件事件 命名应该采用 kebab-case (短横线分隔)命名规范,例如:my-event。

JS规范

1、缩进

使用2个空格(Tab缩进有的默认两个空格)进行缩进。

2、变量命名

变量名使用驼峰式(小)命名法,首字母小写inputStr

3、常量命名

常量名使用大写字母和下划线命名法,所有字母都大写,单词之间用下划线分隔MY_CONFIG

4、函数命名

函数名使用驼峰式命名法,首字母小写editProduct,统一使用动词 或者动词+名词 形式

5、注释

注释应该清晰明了,使用单行注释(//) 或多行注释 (/*..*/)

6、空格

在运算符、取变量;js 、css 冒号前后加上空格,使代码更易读。

7、引号

使用单引号或双引号都可以,但是在整个项目中应该保持一致。

8、函数

函数应该尽量简单,只做一件事情。函数的参数应该尽量少,不要超过 3个,少用闭包函数,特殊情况使用必须主动删除。

9、条件语句

条件语句应该尽量简单,不要嵌套过多、括号中不能过多逻辑计算。

10、循环语句

循环语句应该尽量简单,不要嵌套过多。

11、对象

对象的属性名 应该使用 驼峰式 命名法,首字母小写className

12、数组

数组应该使用字面量 表示法,而不是使用构造函数。

13、类

类的命名应该使用驼峰式 命名法,首字母大写MyClass,

14、模块

模块应该使用 ES6 (import) 的模块语法,而不是使用 Common.js

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

相关阅读更多精彩内容

友情链接更多精彩内容