代码规范

最新推荐文章于 2024-05-06 23:18:53 发布

hmyhicc

最新推荐文章于 2024-05-06 23:18:53 发布

阅读量276

点赞数

本文链接：https://blog.csdn.net/hmyhicc/article/details/116207218

版权

1. 命名规范

1. 项目命名

全部采用小写方式，以中划线分隔。
例：my-project-name

2. 目录命名

参照项目命名规则；
有复数结构时，要采用复数命名法。
例：pages, assets

3. `javaScript` 文件命名

参照项目命名规则。
例：account-model.js

4. `css`,`less`,`scss`文件命名

参照项目命名规则。
例：retina-sprites.less

5. HTML文件命名

参照项目命名规则。
例：error-report.html

6. `Vue`中组件`Component`命名

所有组件名字需要首字母大写，然后驼峰格式
例：CalendarList.vue

2. HTML

1. 语法

缩进使用一个tab；
嵌套的节点应该缩进；
在属性上，使用双引号，不要使用单引号；
属性名全小写，用中划线做分隔符；
不要在自动闭合标签结尾处使用斜线；
不要忽略可选的关闭标签；

2. lang属性

根据HTML5规范：应在html标签上加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。

统一写成

<!DOCTYPE html>
<html lang="zh-cn">
    ...
</html>

3. 减少标签数量

在编写HTML代码时，需要尽量避免多余的父节点。很多时候，需要通过迭代和重构来使HTML变得更少。

<!-- 不建议这么做 -->
<span class="avatar">
    <img src="...">
</span>

<!-- 建议这么做 -->
<img class="avatar" src="...">

4. 实用高于完美

尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；
任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

3. css，less，scss

1. 缩进

使用一个tab缩进

2. 分号

每个属性声明末尾都要加分号。

3. 空格

以下几种情况不需要空格：

属性名后
多个规则的分隔符’,'前
!important '!'后
属性值中’(‘后和’)'前
行末不要有多余的空格
以下几种情况需要空格：
属性值前
选择器’>’, ‘+’, '~'前后
'{'前
!important '!'前
@else 前后
属性值中的’,'后
注释’/‘后和’/'前

/* good */
.element {
    color: red !important;
    background-color: rgba(0, 0, 0, .5);
}

4. 注释

注释统一用’/* */’（scss中也不要用’//’），具体参照右边的写法；
缩进与下一行代码保持一致；
可位于一个代码行的末尾，与代码间隔一个空格。

/* Modal header */
.modal-header {
    ...
}

/*
 * Modal header
 */
.modal-header {
    ...
}

.modal-header {
    /* 50px */
    width: 50px;

    color: red; /* color red */
}

5. 引号

最外层统一使用单引号；
url的内容要用引号；
属性选择器中的属性值需要引号。

.element:after {
    content: '';
    background-image: url('logo.png');
}

li[data-type='single'] {
    ...
}

6. 命名

类名使用小写字母，以中划线分隔
id采用驼峰式命名
less和scss中的变量、函数以中划线分隔命名

7. 属性声明顺序

书写顺序前后为：
（1）定位属性：position display float left top right bottom overflow clear z-index
（2）自身属性：width height padding border margin background
（3）文字样式：font-family font-size font-style font-weight font-varient color
（4）文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能

原理：浏览器的渲染流程为：

解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构
构建render树：DOM树和CSS树合并之后形成的render树。
布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。
绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。
css样式解析到显示至浏览器屏幕上就发生在234步骤，可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第2步，然后开始遍历每个树结点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。在解析过程中，一旦浏览器发现某个元素的定位变化影响DOM，则需要重新渲染。

当浏览器解析到position的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染，解除该元素在文档中所占位置，然而由于该元素的占位发生变化，其他元素也可能会受到它回流的影响而重新排位。最终导致③步骤花费的时间太久而影响到④步骤的显示，影响了用户体验。

8. 颜色

根据蓝湖，颜色使用16进制，并且大写

9. less和scss

嵌套最多不能超过5层

10. 其他

不允许有空的规则；
元素选择器用小写字母；
去掉小数点前面的0；
去掉数字中不必要的小数点和末尾的0；
属性值’0’后面不要加单位；
无前缀的标准属性应该写在有前缀的属性后面；
不要在一个文件里出现两个相同的规则；
尽量少用’*'选择器

4. JavaScript

1. 缩进

使用一个tab

2. 单行注释

双斜线后，必须跟一个空格；
缩进与下一行代码保持一致；
可位于一个代码行的末尾，与代码间隔一个空格。

3. 多行注释

最少三行, '*'后跟一个空格
建议在以下情况下使用：

难于理解的代码段
可能存在错误的代码段
浏览器特殊的HACK代码
业务逻辑强相关的代码

4. 文档注释

各类标签@param, @method等请参考JSDoc Guide；
建议在以下情况下使用：

所有常量
所有函数
所有类

5. 引号

最外层统一使用单引号。

6. 变量命名

标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到cgi返回的数据）
'ID’在变量名中全大写
'URL’在变量名中全大写
'Android’在变量名中大写第一个字母
'iOS’在变量名中小写第一个，大写后两个字母
常量全大写，用下划线连接
构造函数，大写第一个字母
jquery对象必须以’$'开头命名

7. 变量声明

一个函数作用域中所有的变量声明尽量提到函数首部

8. 数组、对象

对象属性名不需要加引号；
对象以缩进的形式书写，不要写在一行；

9. 其他

对上下文this的引用只能使用_this, that, self其中一个来命名；
不允许有空的代码块。

5. VUE

关于vue的代码规范，使用官方文档

hmyhicc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
代码规范

1. 命名规范1. 项目命名全部采用小写方式，以中划线分隔。例：my-project-name2. 目录命名参照项目命名规则；有复数结构时，要采用复数命名法。例：pages, assets3. javaScript 文件命名参照项目命名规则。例：account-model.js4. css,less,scss文件命名参照项目命名规则。例：retina-sprites.less5. HTML文件命名参照项目命名规则。例：error-report.html6. Vue中组件C
复制链接

扫一扫