©2020-2024 ioDraw All rights reserved,
Privacy Policy
前言
现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规则不成方圆，无规范难以协同，比如：制订交通法规实行人车分流、红绿灯规则等。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性的和优雅性，以一种普遍认可的统一方式一起做事，可降低沟通成本，提升协作效率。代码的字里行间流淌着软件系统的血液，质量的提升是可能少的踩坑，杜绝重复的坑，切实提升系统的稳定性，码出质量。
背景
由于前不久被测试大大检查代码发现项目、文件、样式等命名乱七八糟，过于个性化了，所以借鉴他人模式后自编自导一篇前端代码命名规范的文章，用于规范自身躁动的血液，如有冒犯请一扫而过。
（return）
一、File 命名规范
1.1 项目命名
全部采用小写方式，以中线分隔。
例如： personnel-management-system
1.2 目录命名
全部采用小写方式，以中线分隔，有复数结构时，要采用复数命名法，缩写不用复数。
例如：scripts、styles、components、images、utils、img、doc、layouts、demo-styles
[特殊] VUE的项目中除了components组件目录外所有目录也使用kebab-case命名。
例如：page-one、shopping-car、user-management
1.3 JS、CSS、SCSS、HTML、PNG 文件命名
全部采用小写方式，以中划线分隔。
例如：render-dom.js、signup.css、index.html、company-logo.png
1.4 命名严谨性
代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。
注意，即使纯拼音命名方式也要避免采用，但是
例如：guangdong、guangxi、rmb 等国际通用的名称，可视同英文
杜绝完全不规范的缩写，避免望文不知义：
反例：AbstractClass 缩写命名成 AbsClass；condition 缩写命名成 condi，此类随意缩写严重降低了代码的可读性。
二、Css 样式命名规范
2.1 蛇形命名法（snake_case）
全部采用小写方式，以下划线分隔。
例如：module、module_cover、module_info
2.2 基于姓氏命名法（继承 + 外来）
祖先模块不能出现下划线，除了是全站公用模块，如 mod_ 系列的命名：mod_info
当子孙模块超过4级或以上的时候，可以考虑在祖先模块内具有识辨性的独立缩写作为新的子孙模块
推荐：（下划线的命名方式可区分第三方样式命名规则）
<div class="module"> <div class="module_cover"></div> <div
class="module_info"> <div class="module_info_user"> <div
class="module_info_user_img"> <img src="" alt=""> <!-- 这个时候 miui 为
module_info_user_img 首字母缩写--> <div class="miui_tit"></div> <div
class="miui_txt"></div> ... </div> </div> <div class="module_info_list"></div>
</div> </div>
2.3 命名规避
1）ad、banner、gg、guanggao
等有机会和广告挂勾的字眠不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名。
反例：
<div class="ad"></div>
2）不应该出现有敏感不和谐字眼。
反例：
<div class="fuck"></div> <div class="jer"></div> <div class="sm"></div> <div
class="gcd"></div> <div class="ass"></div> <div class="KMT"></div> ...
三、Script 命名规范
3.1 变量、方法、属性、函数使用小驼峰命名法
//变量 var num = 10,realName = ""; //属性、方法 var obj = { name:"张大仙" relAge: 18,
addPeople: function(){} } //函数 function onSaveData(){}
3.2 常量名使用全大写+下划线
const MAX_COUNT = 10; const mutations = { CHANGE_SETTING: (state, { key, value
}) => { // 执行 } }
3.3 构造函数使用大驼峰式
function Student(name) { this.name = name; } var st = new Student('jack');
3.4 类的成员使用小驼峰式，私有属性和方法：前缀为_(下划线)，后面小驼峰
function Student(name) { // 私有成员 var _name = name; // 公共方法 this.getName =
function () { return _name; } // 公共方式 this.setName = function (value) { _name =
value; } } var st = new Student('jon'); st.setName('ronson');
console.log(st.getName()); // => ronson：输出_name私有变量的值
3.5 命名规范
1、原则上全部使用英文命名，避免使用缩写，除了约定熟成的缩写单词外；
2、布尔类型属性或变量加is，例如： let isVisible=true; isDisable:false;
3、select的option列表加上Options后缀，例如：selectOptions=[{text:‘text’,value:0}];
4、执行编码完结后以 ";" 后缀结尾，例如：const arrayList=[];
5、事件处理函数加上on 或者 handle前缀；例如：handleSizeChange
6、尽量避免多层 if 嵌套，提前 return；
7、当保存对 this 的引用时使用 _this ，例如：var _this = this；
8、使用 /** … */ 进行多行注释，包括描述，指定类型以及参数值和返回值；
9、尽量使用 === 比较值，不要直接使用 undefined 进行变量判断；
10、最后命名方式优先考虑可读性而不是性能，通常前端性能瓶颈不在 js 的执行效率；
四、开发中常用单词简写汇总
A
absolute -> abs
address -> addr
application -> app
argument -> arg
arguments -> args
array -> arr
assemble -> asm
asynchronize -> async
attribute -> attr
attributes -> attrs
average -> avg
B
background -> bg
button -> btn
buffer -> buf
C
calculate -> calc
configure -> conf
control -> ctrl
count -> cnt
current -> curr
D
database -> db
delete -> del
description -> desc
destination -> dest
document -> doc
E
error -> err
escape -> esc
F
function -> fn
I
image -> img
increment -> inc
index -> idx
information -> info
initialize -> init
insert -> ins
J
javascript -> js
L
length -> len
library -> lib
M
manager -> mgr
message -> msg
N
number -> num
O
object -> obj
option -> opt
options -> opts
P
parameter-> param
password -> pwd
picture -> pic
point -> pt
position -> pos
previous -> prev
property -> prop
S
source -> src
string -> str
T
temporary -> tmp
V
value -> val
W
window -> wnd