前端代码规范1.0

发表于 更新于 分类于 本文字数： 1.4k 阅读时长 ≈ 5 分钟

(一)命名规范

1.1.1 项目命名

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

1.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.1.3 JS、CSS、SCSS、HTML、PNG 文件命名

全部采用小写方式， 以中划线分隔
正例： render-dom.js / signup.css / index.html / company-logo.png
反例： renderDom.js / UserManagement.html

1.1.4 命名严谨性

代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。 说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用
正例：henan / luoyang / rmb 等国际通用的名称，可视同英文。
反例：DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3

杜绝完全不规范的缩写，避免望文不知义：
反例：AbstractClass“缩写”命名成 AbsClass；condition“缩写”命名成 condi，此类随意缩写严重降低了代码的可阅读性。

(二)HTML规范

1.2.1 HTML 类型

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

1
<!DOCTYPE html>

1.2.2 缩进

统一使用四个空格进行代码缩进，使得各编辑器表现一致
1.2.3 语义化标签
● HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签
● 所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上
● 空元素标签都不加 “/” 字符

(三) CSS 规范

1.3.1 选择器

  • 尽量少用通用选择器
  • 不使用 ID 选择器
  • 不使用无具体语义定义的标签选择器
  • 避免使用标签名

1.3.2 尽量使用缩写属性

不推荐：

1
2
3
4
5
6
7
8
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

推荐：

1
2
3
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

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

不推荐：

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

推荐：

1
2
3
4
5
6
button{
  width:100px;
  height:50px;
  color:#fff;
  background:#00a0e9;
}

1.3.6 省略0后面的单位

不推荐：

1
2
3
4
div{
  padding-bottom: 0px;
  margin: 0em;
}

推荐：

1
2
3
4
div{
  padding-bottom: 0;
  margin: 0;
}

1.3.7 属性书写顺序

建议遵循以下顺序：

  1. 布局定位属性：display / position / float / clear / visibility / overflow
  2. 自身属性：width / height / margin / padding / border / background
  3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
  4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

1.3.8 CSS3浏览器私有前缀写法

CSS3 浏览器私有前缀在前，标准前缀在后

1
2
3
4
5
6
7
.test {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

(四) Javascript 规范

1.4.1 命名

  1. 采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束
    反例： name / name / name$
  2. 方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式
    其中 method 方法命名必须是 动词 或者 动词+名词 形式
    正例：saveShopCarData /openShopCarInfoDialog
    反例：save / open / show / go
  3. 常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长
    正例： MAX_STOCK_COUNT
    反例： MAX_COUNT

1.4.2 字符串

  • 统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处
  • 程序化生成字符串时，请使用模板字符串
  • 不要对字符串使用eval()，会导致太多漏洞
  • 不要在字符串中使用不必要的转义字符
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// good
let str = 'foo';
let testDiv = '<div id="test"></div>';

const str = `ab${test}`

const foo = '\'this\' is "quoted"'
const foo = `my name is '${name}'`

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

const str = 'a' + 'b' + test

const foo = '\'this\' \i\s \"quoted\"'

1.4.3 对象声明

  • 请使用字面量值创建对象和数组
  • 只对非法标识符的属性使用引号
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// bad
const a = new Object{}

const bad = {
  'foo': 3,
  'bar': 4,
  'data-blah': 5
}

// good
const a = {}

const good = {
  foo: 3,
  bar: 4,
  'data-blah': 5
}

1.4.4 比较运算符&相等

  • 使用 === 和 !==而非 ==和!=
  • 条件声明例如if 会用类型转化这个抽象方法将表达式转成布尔值并遵循如下规则
    • object 等于true
    • undefined等于false
    • null等于false
    • number在+0, -0, 或者NaN 的情况下等于false, 其他情况是true
    • string 为’’时等于false, 否则是true

1.4.5 条件判断和循环最多三层

条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，但是谨记不要写太长的三目运算符。如果超过 3 层请抽成函数，并写清楚注释

1.4.6 优先使用 ES6,ES7

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

1.4.7 禁止使用eval()和with()

(五) Vue使用规范

参考官方指导（https://cn.vuejs.org/v2/style-guide/）