前言
自己原先开发项目的时候，写代码或者命名都是乱七八糟的，没点章法，想写啥写啥，类名整个拼音啥的
后来参加工作，知晓一些命名规范，现在写篇文章总结总结，分享分享，看看哪些小伙伴会跟我一样，不过有些事情还是要提前说的，别用拼音！别用拼音！别用拼音！
文件夹命名
结构
├── mock // Mock配置
├── public // 静态文件
├── src // 原代码目录
│ ├── locales // 国际化文件
│ ├── request // API
│ │ └── apis //
│ ├── variables // 全局的变量
│ ├───assets // 静态资源
│ │ ├───css //css样式
│ │ ├───fonts
│ │ └───img //图片
│ ├── components // 自定义UI组件
│ ├── directive //自定义
│ ├── hooks // 组合式API
│ ├── layout // 项目布局系统
│ ├── types // 接口的命名空间
│ ├── plugins // 自定义插件及第三方插件
│ ├── routers // 路由系统
│ ├── store // 状态管理系统
│ ├── theme // 全局样式
│ ├── utils // 工具集
│ ├── views // 视图模板
│ │ └── viewdemo
└── components // 业务组件
文件夹命名
通常命名法则
一般以文件的功能，使用小写英文单词命名，比如某js或者ts后缀文件用于封装本地存储操作，可以使用cache.ts/cache.js 来命名
- 连接
文件夹命名需要使用 -分割，如 home-main 者直接写小写home.
大驼峰命名
一般在vue文件后缀的密码方式，如MyHome.vue
变量命名
常量
常量一律使用全大写的方式,且一般使用底杠符号拼接，如var LIMIT_HEIGHT = 30、 var HTML_ENTITY = {};
函数、变量、函数参数
当函数名字过长，或者变量、函数参数过长的时候，就需要使用驼峰式命名法则
function stringFormat(source) { //方法名过长
}
var loadingModules = {} //变量名过长
function hear(theBells) { //参数名过长
}
函数名为动宾结构
当函数名字为动宾结构时候，也是采用驼峰式命名，如
function getStyle(element) {
}
Boolean
当变量为boolean的时候，推荐命名的时候尽量使用is或者has开头的变量名，简单易懂，清晰明了
var isReady = false;
var hasMoreCommands = false;
类的命名
常规
类的命名与函数的命名方式基本相同，同时类还有某些属性或者方法，但也基本遵循驼峰式命名
function TextNode(value, engine) {
this.value = value;
this.engine = engine;
}
TextNode.prototype.clone = function () {
return this;
};
类名为名词
当类名为名词的时候，首字母需要大写
function Engine(options) {
}
ts接口和枚举变量
接口
接口的命名规范也是采用驼峰式命名，如
interface radioGroupType {
name: string,
select: string
}
枚举变量
枚举的属性，全部使用大写字母，且单词间需要使用下划线分隔，如
var TargetState = {
READING: 1,
READED: 2,
APPLIED: 3,
READY: 4
};
CSS类名
BEM风格
BEM是块（block）、元素（element）、修饰符（modifier）三个单词的缩写，这里的block和css块级元素block概念完全不同，而是真正的块
BEM为大型项目中CSS开发和维护提供了方便，在多人开发的项目中，采用BEM规范书写css能增加代码的阅读性和可维护性。
我们举个例子，看如下淘宝网站
可以看见上面的页面分为几部分内容，其实这个块的含义，跟部分或者组成的含义差不多，上述图片上图中由Head，Main Layout和Foot块组成,而Head由Logo，Search和Menu组成。MainLayout包括一个 Title和一个Content块。Content里面又包含众多元素，有图片img、价格price等等。
块(Block)
一个块是一个独立的实体，一个功能独立的页面组件，可以重复使用，就像应用的一块“积木”。一个块既可以是简单的也可以是复合的(包含其他块)。
例如一个搜索Search块
块不应影响其环境，这意味着不应设置块的外部几何形状（边距）或位置
< div class = "header" > </ div > <!--good-->
< div class = "red-text" > </ div > <!--bad，red-text 是描述外观-->
元素(Element)
一个元素是块的一部分，具有某种功能。元素是依赖上下文的：它们只有处于他们应该属于的块的上下文中时才是有意义的。块的复合部分，不能单独使用，元素全名的结构为block-name__element-name
一个元素始终是块的一部分，因此元素名称不可定义为 block__ elem1__elem2 的层次结构
例如一个输入域和一个按钮是Search块的中的元素。
<!--遵循 block-name__element-name-->
<form class="search-form">
<div class="search-form__content">
<input class="search-form__input">
<button class="search-form__button">Search</button>
</div>
</form>
<!--search-form__content__button 不遵循 block-name__element-name-->
<form class="search-form">
<div class="search-form__content">
<input class="search-form__content__input">
<button class="search-form__content__button">Search</button>
</div>
</form>
块和元素构成了页面的内容。它们不仅仅是被呈现在一个页面上，它们的排列顺序也同样重要。
块(或元素)彼此之间可能遵循着某种顺序。就如淘宝官网的商品列表。
Modifier
定义块或元素的外观，状态或行为的实体
修饰符的两种类型
.article {
max-width: 1200px;
&__body {
padding: 20px;
}
&__button {
padding: 5px 8px;
&--primary {background: blue;}
&--success {background: green;}
}
}
作用
-
避免样式冲突
-
减小名称长度
-
提高可阅读性
-
增加样式重用
使用方法
规范默认有以下的几个约定，实际使用可自行统一，重在思想：
-
-中划线：仅作为连字符使用 submit-button
-
-- 双中划线：表示不同状态或不同版本 submit-button--success
-
__ 双下划线：双下划线用来连接块和块的子元素 submit-button__icon
上述例子中含使用方法。
特殊
缩写词
由多个单词组成的缩写词，需要根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致，比如常见的XML， HTML， HTTPRequest等等
function XMLParser() {
}
function insertHTML(element, html) {
}
var httpRequest = new HTTPRequest();
总结
其实命名规范还是很重要的，习惯即可，慢慢的会变成你的一个习惯，然后一直跟随着你，直到你敲不动代码了！
