文章目录
前言
一、命名公式
1. 动词+名
2. 判断+名
二、命名规范
1. 匈牙利命名法
2. 驼峰式命名法
3. 帕斯卡命名法
4. BEM 命名法
总结
前言
本文将从程序的命名常见形似以及现在主流的命名规范做介绍。
一、命名公式
1. 动词+名
函数命名的时候。
// 如：
var getUserName = function() {};
var addData = function() {}
2. 判断+名
当返回布尔值的时候使用is+的形式。
// 如：
var isBool = function() {};
二、命名规范
1. 匈牙利命名法
基本原则是：变量名=属性+类型+对象描述，其中每一对象的名称都要求有明确含义，可以取对象名字全称或名字的一部分。要基于容易记忆容易理解的原则。保证名字的连贯性是非常重要的。
// 如：
var szUserName = 'admin';
var aFruits = ['苹果', '西瓜', '樱桃'];
说明（类型部分） 符号
数组 a
指针 p
函数 fn
无效 v
句柄 h
长整型 l
布尔 b
浮点型（有时也指文件） f
双字 dw
字符串 sz
短整型 n
双精度浮点 d
计数 c（通常用 cnt）
字符 ch（通常用 c）
整型 i（通常用 n）
字节 by
字 w
实型 r
无符号 u
关于匈牙利命名法的前缀除了属性部分外，还有属性部分和描述部分，感兴趣的小伙伴可以点击此处立即查阅
2. 驼峰式命名法
驼峰式命名法（Camel-Case），当变量名或函数名是由一个或多个单词连结在一起，而构成的唯一识别字时，第一个单词以小写字母开始；从第二个单词开始以后的每个单词的首字母都采用大写字母。
// 如：
var userName = 'admin';
var fruits = ['苹果', '西瓜', '樱桃'];
3. 帕斯卡命名法
帕斯卡命名法（Pascal），当变量名和函式名称是由二个或二个以上单词连结在一起，每个单词首字母大写。
// 如：
var UserName = 'admin';
4. BEM 命名法
前面介绍的三中命名规范在多种语言中是通用的，第四种 BEM 则主要侧重于前端的 css 命名规范。
BEM：（Block: 块, Element: 元素, Modifier: 修饰符）是一种基于组件的Web 开发方法，基本思想是将用户界面划分为独立的块。
官方标准：namespace-block__element_modifier
追加约定：给组件添加命名空间 m，表示 模块，防止和第三方组件命名冲突。如：m-block __ element_modifier
所有单词一律小写。
单词之间用 - 分隔，命名尽量不要超过三个单词，避免命名过长。
块名称（Block）通过 - 与命名空间（Namespace）分隔。
块名称 Block 表示一个最高级别的抽象或者说是组件，主要是起到边界的作用，其中有以下三个主要功能特点：
负责描述功能，不应该包含状态。
/* correct */
.m-header {
}
/* error */
.m-header--active {
}
不影响自身布局，不包含具体的样式。
/* correct */
.m-header {
}
/* error */
.m-header {
background-color: skyblue;
}
不能使用元素选择器和 ID 选择器。
/* correct */
.m-header {
}
/* error */
.m-header a {
}
元素名称（Element）通过 __ 与块名称（Block）分隔。
元素名称（Element）表示目的，而不是状态，在此层用于设置盒子边距宽高度数据、布局方式等。不能脱离 Block 父级单独使用。
.m-header__logo {
margin-left: 50px;
width: 100px;
}
.m-header__nav {
margin: 100px;
}
修饰符名称（Modifier）通过 _ 与元素（Element）名称分隔。
修饰符名称（Modifier）表示的是状态。
.m-header__nav_navlist {
background-color: #2b2b2b;
}
在组件开发中避免使用全局的 OOCSS 原子类，因为这会降低组件的可复用性；如：pull-left、pull-right、clearfix。（补充：OOCSS 原子类是指将复用度高的样式抽取出来，整合独立的抽象公共类）
尽量避免使用子选择器，如果层次关系过长，逻辑不清晰，非常不利于维护；如: .kso-nav ul li a {}。
使用 sass 预编译语法
首先先搭建好我们的页面结构：
<div class="m-header">
<div class="m-header__logo">
<img class="m-header__logo_img" src="" alt="" />
</div>
<div class="m-header__nav">
<ul class="m-header__nav_ul">
<li></li>
<li></li>
</ul>
</div>
</div>
sass 写法：
/* namespace-block__element_modifier */
/* namespace-block */
.m-header {
/* element */
&__logo {
/* modifier */
&_img {
}
}
/* element */
&__nav {
/* modifier */
&_ul {
}
}
}
总结
程序的命名规范没有强制使用某一种，结合自己日常开发习惯，使用顺手的就可以了，当然同时用多种也可以，比如用驼峰式命名法定义函数，帕斯卡命名法定义变量可以提高辨别度等。以上，便是今天介绍到的全部内容，希望会对你有所帮助。
----------------
版权声明：本文为CSDN博主「俊小张」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44808483/article/details/115293929 |
