想成为一名优秀的前端开发工程师，代码的可读性与复用性是必不可少的。本文从命名的角度来谈谈这个话题。
1、JS命名规范
1.1 变量
命名方法：小驼峰式命名法。
命名规范：前缀应当是名词。(函数的名字前缀为动词，以此区分变量和函数)
命名建议：尽量在变量名字中体现所属类型，如:length、count等表示数字类型；而包含name、title表示为字符串类型。
// 好的命名方式
let maxCount =10;
let tableTitle ='LoginTable';
// 不好的命名方式
let setCount =10；
let getTitle ='LoginTable'；
1.2 常量
命名方法：名称全部大写。
命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词。
const MAX_COUNT =10;
const URL ='http://www.foreverz.com';
1.3 函数
命名方法：小驼峰式命名法。
命名规范：前缀应当为动词。
命名建议：可使用常见动词约定
| 动词 | 含义 | 返回值 |
|---|---|---|
| can | 判断是否可执行某个动作(权限相关) | 函数返回一个布尔值。true：可执行；false：不可执行 |
| should | 判断是否可执行某个动作(展示相关) | 函数返回一个布尔值。true：可展示；false：不可展示 |
| has | 判断是否含有某个值 | 函数返回一个布尔值。true：含有此值；false：不含有此值 |
| is | 判断是否为某个值 | 函数返回一个布尔值。true：为某个值；false：不为某个值 |
| get | 获取某个值 | 函数返回一个非布尔值 |
| set | 设置某个值 | 无返回值、返回是否设置成功或者返回链式对象 |
| load | 加载某些数据 | 无返回值或者返回是否加载完成的结果 |
// 是否可阅读
function canRead():boolean
{
return true;
}
// 获取名称
function getName():string
{
return this.name;
}
1.4 类 & 构造函数
命名方法：大驼峰式命名法，首字母大写。
命名规范：前缀为名称。
class Person {
public name:string;
constructor(name) {
this.name = name;
}
}
const person =new Person('mevyn');
1.5 类的成员
类的成员包含：
- 公共属性和方法：跟变量和函数的命名一样。
- 私有属性和方法：前缀为_(下划线)，后面跟公共属性和方法一样的命名方式。
class Person {
private _name:string;
constructor() { }
// 公共方法
getName() {
return this._name;
}
// 公共方法
setName(name) {
this._name = name;
}
}
const person =newPerson();
person.setName('mervyn');
person.getName();// ->mervyn
2、CSS命名规范
CSS的命名跟可重用性关系很大，可重用性与语义化是一对矛盾体。于是需要一个折中方案。这里参考了网易NEC做法。
2.1 约定
| 类别 | 前缀 | 用途 |
|---|---|---|
| .l（layout） | 布局类 | 将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等 |
| .m（module） | 模块类 | 通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册、各种列表、评论、搜索等！ |
| .u（unit） | 单元类 | 通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading、图标等！ |
| .f（functional） | 功能类 | 为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等 |
| .s（status） | 状态类 | 为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现 |
2.2 扩展
- 相同语义的不同类命名
方法：直接加数字或字母区分即可（如：.m-list、.m-list2、.m-list3等，都是列表模块，但是是完全不一样的模块）。
其他举例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。 - 模块和单元的扩展类的命名方法
当A、B、C、...它们类型相同且外形相似区别不大，那么就以它们中出现率最高的做成基类，其他做成基类的扩展。
方法：+“-”+数字或字母（如：.m-list的扩展类为.m-list-1、.m-list-2等）。
补充：基类自身可以独立使用（如：class="m-list"即可），扩展类必须基于基类使用（如：class="m-list m-list-2"）。
如果你的扩展类是表示不同状态，标识状态的方法采取独立状态分类（.s-）方法：.u-btn.s-dis，.m-box.s-sel，然后像这样使用：class="u-btn s-dis"。
- 模块和元件的后代选择器的扩展类
有时候模块内会有些类似的东西，如果你没有把它们做成元件和扩展，那么也可以使用后代选择器和扩展。
后代选择器：.m-login .btn{}。
后代选择器扩展：.m-login .btn-1{}，.m-login .btn-dis{}。
同样也可以采取独立状态分类（.s-）方法：.m-login .btn.s-dis{}，然后像这样使用：class="btn z-dis"。
注：此方法用于类选择器，直接使用标签做为选择器的则不需要使用此命名方法。
注：为防止后代选择器的扩展类和大类命名规范冲突，后代选择器不允许使用单个字母。
比如：.m-list .a{}是不允许的，因为当这个.a需要扩展的时候就会变成.a-bb，这样就和大类的命名规范冲突。
2.3 样式文件组织
// 重置类样式+非业务公共类
<link href="assets/css/base.css" rel="stylesheet" />
// 业务公用复用类样式
<link href="assets/css/common.css" rel="stylesheet" />
// 特定业务类样式
<link href="assets/css/index.css" rel="stylesheet" />
重置类样式不做要求，但对于复用类和业务类样式需要遵守2.1 & 2.2 约束
网友评论