前端开发规范（通用）

小码助力助你前行

已于 2022-08-19 17:26:12 修改

阅读量663

点赞数

文章标签： vue.js 前端 javascript

于 2022-08-19 17:23:11 首次发布

本文链接：https://blog.csdn.net/weixin_42575720/article/details/126428924

版权

前端开发规范—通用

规范的目的是为了编写高质量的代码，提升协作效率，降低沟通成本。

一、编程规约

(一)命名规范

1.1 项目命名

全部采用小写方式，以中划线分隔。
正例：mall-management-system
反例：mall_management-system / mallManagementSystem

1.2 目录命名

全部采用小写方式，以中划线分隔，有复数结构时，要采用复数命名法，缩写不用复数
正例：

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

反例：

script / style / demo_scripts / demoStyles / imgs / docs

【特殊】VUE 的项目中的 components 中的组件目录，使用 kebab-case 命名
正例：

head-search / page-loading / authorized / notice-icon

反例：

HeadSearch / PageLoading

【特殊】VUE 的项目中的除 components 组件目录外的所有目录也使用 kebab-case 命名
正例：

page-one / shopping-car / user-management

反例：

ShoppingCar / UserManagement

1.3 JS、CSS、SCSS、HTML、PNG 文件命名

全部采用小写方式，以中划线分隔
正例：

render-dom.js / signup.css / index.html / company-logo.png

反例：

renderDom.js / UserManagement.html

1.4 命名严谨性

代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用
正例：

henan / luoyang / rmb 等国际通用的名称，可视同英文。

反例：

DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3

杜绝完全不规范的缩写，避免望文不知义：
反例：

AbstractClass“缩写”命名成 AbsClass；condition“缩写”命名成 condi，此类随意缩写严重降低了代码的可阅读性。

(二)HTML 规范（Vue Template 同样适用）

2.1 HTML 类型

推荐使用 HTML5 的文档类型申明：

语言属性
规定字符编码
IE 兼容模式
规定字符编码
doctype 大写

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta charset="UTF-8" />
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" />
  </body>
</html>

2.2 注释

注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

正例：

<!-- Comment Text -->
<div>...</div>

反例：

<div>...</div><!-- Comment Text -->	
	
<div><!-- Comment Text -->
    ...
</div>

2.3 语义化标签

HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签，如header、footer、aside、main、article

2.4 引号

使用双引号(" ") 而不是单引号(’ ') 。

正例：

 “xiaoming”

反例：

‘xiaoming’

(三) CSS 规范

3.1 命名类型

类名使用小写字母，以中划线分隔，如：content-wrap
id 采用驼峰式命名，如：noticeChart 采用驼峰式命名，如：noticeValue

3.2 选择器

css 选择器中避免使用标签名
从结构、表现、行为分离的原则来看，应该尽量避免 css 中出现 HTML 标签，并且在 css 选择器中出现标签名会存在潜在的问题。并且使用精确的直接子选择器来代替后代选择器：

正例

.content > .title

反例

  .content .title

尽量使用缩写属性

正例：

padding: 0 1em 2em;

反例：

padding-bottom: 2em;  
padding-left: 1em;  
padding-right: 1em;  
padding-top: 0;

每个选择器及属性独占一行

正例：

button {  
    width:100px;  
    height:50px;  
    color:#fff;  
    background:#00a0e9;  
}

反例：

button{width:100px;height:50px;color:#fff;background:#00a0e9; }

省略0后面的单位，用0来代替0px

正例：

 margin: 0;

反例：

 margin: 0px;

避免使用ID选择器及全局标签选择器防止污染全局样式

正例：

    .header{ ..... }

反例：

    #header {......}

(四) Javascript 规范

4.1命名

方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式
正例： localValue / getHttpMessage() / inputUserId

其中 method 方法命名必须是动词或者动词+名词形式

最低0.47元/天解锁文章