前端

2019我和前端有一个约定

规范简介

该规范目的是保证前端代码的整洁性和代码风格一致性，提高代码的可读性和可维护性。

项目结构

项目命名

全部采用小写方式，使用中划线 - 进行分隔

目录结构规范

1
2
3
4
5
6
7
8
9
---
 |-- src
 |    |-- libs // 公用的库文件，例如：主题样式，鉴权插件，定制化的图表库
 |    |-- assets // 资源目录，比如png，jpg，svg图片等
 |    |    |-- images
 |    |         |-- svg // svg的图片单独放一个目录
 |    |-- components // 通用的自定义组件
 |    |-- pages // 页面
 |-- config // webpack等前端配置文件

目录文件命名规范（推荐2种）

  • 目录和文件都使用小写单词并使用中划线 - 进行分隔
  • 目录和文件使用小写单词并使用中划线 - 进行分隔，唯独.vue组件使用大驼峰进行命名

    package.json管理

  • 对于项目中代码需要依赖引入的使用

    1
    $ npm i vue -S

  • 对于项目中开发环境下进行运行调试压缩编译的使用

    1
    $ npm i wepack -D

  • 对于npm包的管理一定要规范，不需要引入的不要随便安装并写入package.json文件，当需要引入新的依赖需要告知所有的项目成员。

  • npm的依赖包的版本需要谨慎操作，不要随便进行任意升级。中间版本号和小版本号可以进行定期升级，并commit对应的修改以及通知项目成员。而大版本号需要确定其版本是否兼容目前使用的版本并进行仔细的测试才可以提交修改。

    HTML书写规范

    语法格式

  • 使用2个空格进行缩进
  • 嵌套的节点应该使用缩进
  • 节点属性使用双引号，而不用单引号

  • 非自动闭合的HTML元素一定要使用斜线进行闭合！！！，自动闭合HTML元素则可选, 举例：

    1
    <img src="images/logo.png" alt="logo">

  • 对于HTML 元素属性大于3个，推荐使用如下方式(适用于vue模板)，避免代码横向增长：

    1
    2
    3
    4
    5
    <i class="switch-btn"
       :class="switchBtnIcon"
       :style="switchBtnLeftDistance"
       @click="changeVisible">
    </i>

语义化

  • 根据使用场景选择正确的 HTML 元素。例如，使用 h1 元素创建标题，p 元素创建段落，a 元素创建链接，i 元素创建图标等等。正确的使用 HTML 元素对于可访问性、可重用性以及编码效率都很重要。

    资源引入

  • 引入资源使用相对路径，不要指定资源所带的具体协议 ( http:,https: ) ，除非这两者协议都不可用。
    示例：
    1
    <script src="//ticket1000-1253841380.file.myqcloud.com/assets/release/vue/vue.js"></script>

优化Dom结构

  • 尽量避免多余的父节点，通过迭代和重构来使HTML元素变得更少。

    属性顺序

  • class
  • id
  • name
  • data-*
  • src,for,type,href,value,max-length,max,min,pattern
  • placeholder,title,alt
  • aria-*,role
  • required,readonly,disabled

    CSS书写规范

    命名

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

    语法

  • 每个属性声明末尾都要加分号
  • 去掉小数点前面的0
  • 去掉数字中不必要的小数点和末尾的0
  • 属性值’0’后面不要加单位
  • 用border: 0;代替border: none;
  • 选择器不要超过4层
  • 尽量少用’*’选择器

    需要加空格

  • 属性值前
  • 选择器 ‘>’, ‘+’, ‘~’前后
  • ‘{‘前
  • !important’!’前
  • @else前后
  • 属性值中的’,’后
  • 注释’/‘后和’/‘前

    需要换行

  • ‘{‘后和’}’前
  • 每个属性独占一行
  • 多个规则的分隔符’,’后

    颜色

  • 尽量使用16进制的颜色，当不需要控制透明度，避免使用rgba的写法。
  • 16进制的颜色尽量使用简写代替

    属性顺序

  • 简单示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    .order {
        display: block;
        float: right;

        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 100;

        border: 1px solid #e5e5e5;
        border-radius: 3px;
        width: 100px;
        height: 100px;

        font: normal 13px "Helvetica Neue", sans-serif;
        line-height: 1.5;
        text-align: center;

        color: #333;
        background-color: #f5f5f5;

        opacity: 1;
    }

  • 完整顺序：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    [
        [
            "display",
            "visibility",
            "float",
            "clear",
            "overflow",
            "clip",
            "zoom"
        ],
        [
            "position",
            "top",
            "right",
            "bottom",
            "left",
            "z-index"
        ],
        [
            "margin",
            "box-sizing",
            "border",
            "border-radius",
            "padding",
            "width",
            "height",
        ],
        [
            "font",
            "line-height",
            "text-align",
            "vertical-align",
            "white-space",
            "text-decoration",
            "word-spacing",
            "text-overflow",
            "word-wrap",
            "word-break"
        ],
        [
            "color",
            "background",
            "background-color",
            "background-image",
            "background-repeat",
            "background-attachment",
            "background-position",
            "background-clip",
            "background-origin",
            "background-size"
        ],
        [
            "outline",
            "opacity",
            "box-shadow",
            "text-shadow"
        ],
        [
            "transition",
            "transition-delay",
            "transition-timing-function",
            "transition-duration",
            "transition-property",
            "transform",
            "transform-origin",
            "animation",
            "animation-duration",
            "animation-delay",
            "animation-direction"
        ],
        [
            "content",
            "resize",
            "cursor",
            "user-select",
            "tab-size",
        ]
    ]

JavaScript规范

  • 遵循standardjs规范
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    // http://eslint.org/docs/user-guide/configuring

    module.exports = {
        root: true,
        parser: 'babel-eslint',
        parserOptions: {
            sourceType: 'module'
        },
        env: {
            browser: true,
        },
        // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
        extends: 'standard',
        // required to lint *.vue files
        plugins: [
            'html'
        ],
        // add your custom rules here
        'rules': {
            // allow paren-less arrow functions
            'arrow-parens': 0,
            // allow async-await
            'generator-star-spacing': 0,
            // allow semi
            'semi': 0,
            // allow debugger during development
            'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
        }
    }

Vue规范