前端代码技术规范文档

前端代码技术规范文档

一、规范更新日志

记录此规范的更新时间和内容，方便他人了解规范内容变更详情

二、背景与目标

背景

规范的代码是一个程序员基本的职业素养。针对web前端项目，有可能出现不同开发人员不同开发习惯的情况，造成后期代码维护的成本增加，现制定统一的代码规范。

目标

统一风格的代码可以提高代码的可读性，易于代码review，从而促进团队成员更好的合作；其次，可以使用lint工具进行代码规范，可以避免出现低级bug，提高代码质量，也更利于项目的维护。

三、编程规范

命名规范

项目命名：采用小写，中间分隔词组方式（kebab-case）

例：my-project/my-project ✔

my_project/myProject ❌

目录命名： 采用小写方式， 以中划线分隔词组，有复数结构时，要采用复数命名法， 缩写不用复数（kebab-case）

例：project/demo-styles/img/doc ✔

project/demo_styles/img/docs ❌

Vue目录命名： components 中的组件目录以及除 components 组件目录外的所有目录 （kebab-case）

例：project/src/components/nab-bar ✔

project/src/components/nabBar ❌

project/src/views/serve-page ✔

project/src/views/serverPage❌

Vue组件命名： （kebab-case or PascalCase，建议统一为kebab-case）

例：project/src/components/my-component.vue ✔

project/src/components/MyComponent.vue ✔

project/src/components/mycomponent.vue ❌

project/src/components/myComponent.vue ❌

JS、CSS、SCSS、HTML、PNG 文件命名 ： (kebab-case)

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

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

renderDom.js / UserManagement.html ❌

HTML规范

注释：在每一个块状元素，列表元素和表格元素后，加上一对 HTML 注释

语义化标签： HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签

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

例：<div class="logo"></div>

CSS规范

命名：id、类名使用小写字母，以中划线分隔 ，严禁使用拼音、拼音与英文混合和使用中文的方式；应语义化，使用正确的英文拼写和语法 (kebab-case)

列表尽量以list命名

例：order-list

列表项用item等命名

例： order-item, item

容器等表是“块”的区域 用 wrap container content main 等命名

表位置或局部的 用 top left right bottom header footer side nav menu等

选择器 ：

量避免 css 中出现 HTML 标签

使用直接子选择器提高性能

例：

CSS

.content > .title{

font-size:16px

}

尽量使用缩写属性 ：

例：

CSS

.warp{

margin:10px 40px 20px 30px;

}

✔

.warp{

margin-top:10px;

margin-bottom:20px;

margin-left:30px;

margin-right:40px;

}

❌

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

例：

CSS

.header{

height:20px;

}

✔

#header{

height:20px;

}

❌

JavaScript规范

方法名、参数名、成员变量、局部变量：

采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束，方法名需是 动词 或者 动词+名词 形式

例：getData,setValue

动词： 增删查改统一使用如下 5 个单词，不得使用其他

add / update / delete / detail / get

函数方法常用的动词：

空格：函数声明时，圆括号后面要留空格

引号：JavaScript中全部使用单引号，html模板中使用双引号

注释： //后面要空格 ‘// 注释’

变量：不要用var 直接用let const

常量：常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚

例：TOTAL_COUNT

字符转：统一使用单引号(')，不使用双引号("")，特别是创建 HTML 字符串

例：

HTML

let str = 'foo';

let testDiv = '<div id='test'></div>';

✔

let str = 'foo';

let testDiv = "<div id='test'></div>";

❌

对象： 使用字面值创建对象

例：

JavaScript

let user = {}; ✔

let user = new Object(); ❌

使用字面量来代替对象构造器

例：

JavaScript

var user = { age: 0, name: 1, city: 3 }; ✔

var user = new Object();

user.age = 0;

user.name = 0;

user.city = 0; ❌

ES6+：须优先使用 ES6+ 中新增的语法糖和函数。这将简化你的程序，并让你的代码更加灵活和可复 用。比如箭头函数、await/async ， 解构， let ， for…of 等等

例：

this的转换命名：对上下文 this 的引用只能使用 ’that’ 来命名

四、开发要求

技术选型

JavaScript、jQuery 、Vue

项目类别

Web官网、H5页面： 针对此类项目开发建议使用html、css、js的开发模式进行开发，如若需要使用额外的库或框架可以引入js文件

例：如需使用vue框架，引入vue.js即可，不可使用脚手架进行开发

后台管理：针对大型后台管理项目可以使用脚手架进行开发

版权信息

Web官网、H5页面：为防止版权信息内容的临时需求变更，底部copyright须使用代码编写，禁止直接使用切图替代