前端开发代码规范

最新推荐文章于 2024-04-15 09:29:06 发布

zhangr16xyz

最新推荐文章于 2024-04-15 09:29:06 发布

阅读量322

点赞数 3

分类专栏： js 规范 web前端

本文链接：https://blog.csdn.net/weixin_36079296/article/details/72469426

版权

web前端同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

4 篇文章 1 订阅

订阅专栏

规范

1 篇文章 0 订阅

订阅专栏

一、总体注意事项：

1 先看docs下的代码规范，一定要牢记。不要随便命名

2 已有代码需要修改代码时，必须先获取代码，一般情况下不允许直接覆盖。可以合并

3 修改代码不清楚是什么业务的，最好不要删除，可以注释。

4 提交代码之前先格式化代码样式。

5 尽量熟悉使用公司统一的开发环境(webstrom + svn);

6 注释一定要有:建议格式：

        <!--市场层-->
        <ul class="placer-shop"></ul>

        <!--头部地址-->
        <div class="placer"></div>

        <!--发送至...-->
        <div class="send-to"></div>

        <!--推荐档口-->
        <div class="stall">
            <!--推荐头-->
            <div class="stall-title"></div>
            <!--推荐列表-->
            <div class="stall-list-box"></div>
        </div>

        <!--推荐类商品列表-->
        <div class="class-container">
            <!--分类-->
        </div>

        <!--添加到购物车提示-->
        <div class="alert-success">添加到购物车成功</div>

        <!-- 匹配不到市场时展示效果 -->
        <div class="no-market-tips">

二、代码问题总结：

HTML

结构（语义化）,多用H5新增的语义化标签<header> <footer>
文件应以<!DOCTYPE ......>首行顶格开始，推荐使用<!DOCTYPE html>

ul下面不要直接带div:

错误：
```
<ul>
    <div>123</div>
    <li>22222</li>
</ul>
```
正确：

```
<ul>
    <li><div>123</div></li>
    <li>22222</li>
</ul>
```

行内元素里面一般不要带块元素，有需要时把行内元素的display设置为block，或者inline-block

一行有多个样式的代码，或者有间隔的时候错误写法：

<p class="">
    月售&nbsp;209&nbsp;&nbsp;&nbsp;
    <span></span>
</p>

命题规范:
id应该为驼峰式命名 isAble;
class应该为中划线is-able 有些老的浏览器不支持_;
Html文件为is_able.html
一个标签上引用的className不要过多，越少越好。比如不要出现这种情况：
```
<div class="class1 class2 class3 class4"></div>
```
对于一个语义化的内部标签，应尽量避免使用className。比如在这样一个列表中，li标签中的item应去除：
```
<ul class="">
    <li class="item"></li>
    <li class="item"></li>
</ul>
```
除非特殊情况，避免使用table布局。

CSS

样式的写法最好有顺序（按重要程度），比如：

```
.item {
    position: absolute;
    top: 0;
    z-index: 99;
    display: block;
    float: left;
    width: 100px;
    height: 100px;
    color: red;
    border: 1px solid blue;
    opacity: .8;
}
```

命名应简约而不失语义：

    错误: 无语义的命名
    .m-abc  .green2{} .g-left2{}
    正确： 有语义简短命名
    .m-list .wrap{}  .g-sideBar{}

命名不要一级一级往下找，不利于搜索引擎优化

错误：
.class div ul li a{ }
规范的写法：
.class{class的样式}
.class-div{ div的样式}
.class-list{ul的样式}
.item{li的样式}

颜色除非需要用到透明度而使用rgba()，其他的时候一律用16进制表示，且写法用小写，重复的用简写，例如：
p{color:#000000;} 可以缩写为：p{color: #000;}
p{color: #336699;} 可以缩写为：p{color: #369;}
避免重复定义，比如h1和h2的样式相同，就合并在一起。(最好逗号换行)，例如:
```
h1,
h2 {
    margin: 1rem auto;
    color: #333;
}
```

使用简写或者详细写法:

h1 {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
}

简写：

h1 {
    marign: 10px 5px;
}

省略值为0时的单位: 为节省不必要的字节同时也使阅读方便，我们将0px、0em、0%等值缩写为0。
尽可能多的使用CSS,减轻JS的开发：
(1)用CSS去控制交互视觉变化，JS只需要改变className;例如：
```
.addFix {
            Position: fixed;
}
```
```
JS只用加上class而不必使用div.css(‘position’: ‘fixed’)
```
(2) 若产品不兼容低版本浏览器，动画之类的可用CSS处理@keyframe;
运用 CSS sprite技术集中小的背景图或图标，防止图片加载的延迟。