前端的开发规范
本文主要从以下的几个方面来概述前端的开发规范

目录的构建规范
前端命名规范
前端工作规范
开发文档的书写规范
1. 前端目录构建规范
我们从命名原则、根目录、业务逻辑等方面进行目录构建

1.1 命名原则
简洁明了（如下：）
src 源代码
img 图片资源
js JavaScript脚本
dep 第三方依赖包
不使用复数（如下：）
不使用 imgs docs
1.2 根目录（root）结构按职能划分
src 源代码（逻辑）
doc 文档
dep 第三方依赖包
test 测试
1.3 根据业务逻辑进行文件夹的划分
src目录名词解释：

common 公共资源

public/static 静态资源

component 组件

view/tpl 模板文件

src
  common  公共资源 
    img
      logo.png
      sprites.png
    css
      reset.css
    js
      conf.js  项目的配置文件
  public/static 静态资源
    js
    css
    tpl
      index.html
      shopcar.html
    img
  component   组件 
    home 
    shopcar
    login
    register
    user
    list
    detail
  view/tpl   项目模板           tpl  是  template的缩写

1.4 总结
以上目录开发规范有两种使用途径
  1. 使用前端工程化工具如webpack、gulp等进行手动打造
  2. 利用框架提供的脚手架工具进行修改
1
2
3
2. 前端命名规范
在这里我们分为两部分进行讲解

CSS命名规范
BEM规范
OOCSS规范
JavaScript编写规范
Jslint
Eslint
2.1 CSS命名规范
2.1.1 BEM规范
概念：
Block Element Modifier，它是一种前端命名方法，旨在帮助开发者实现模块化、可复用、高可维护性和结构化的CSS代码。

BEM是定义了一种css class的命名规范，每个名称及其组成部分都是存在一定的含义。

由拉丁字母, 数字, -组成css的单个名称.

Block Element Modifier
独立且有意义的实体, e.g. header, container, menu, checkbox, etc.
Block的一部分且没有独立的意义, e.g. header title, menu item, list item, etc.
Blocks或Elements的一种标志，可以用它改变其表现形式、行为、状态. e.g. disabled, checked, fixed, etc.
Naming

由拉丁字母, 数字, -组成css的单个名称.

Block

使用简洁的前缀名字来命名一个独立且有意义的抽象块或组件。

    css
    <!-- e.g. -->

    .block

    .header

    .site-search

Element

使用__连接符来连接Block 和 Element。

  css
  <!-- e.g. -->

  .block__element

  .header__title

  .site-search__field

Modifier

使用–连接符来连接Block 或 Element 和 Modifier。

  css
  <!-- e.g. -->

  .block--modifier

  .block__element--modifier

  .header--hide

  .header__title--color-red

  .site-search__field--disabled

实例

 html
  <!-- HTML文件 -->

  <form class="form form--theme-xmas form--simple">
    <input class="form__input" type="text" />
    <input class="form__submit form__submit--disabled" type="submit" />
  </form>

  css
  <!-- CSS -->

  .form {}

  .form--theme-xmas {}

  .form--simple {}

  .form__input { }

  .form__submit {}

  .form__submit--disabled {}

Buttons实例
 html

 <!-- HTML文件 -->

 <button class="button">
   Normal button
 </button>
 <button class="button button--state-success">
   Success button
 </button>
 <button class="button button--state-danger">
   Danger button
 </button>

 
css
<!-- CSS文件中 -->

.button {
    display: inline-block;
    border-radius: 3px;
    padding: 7px 12px;
    border: 1px solid #D5D5D5;
    background-image: linear-gradient(#EEE, #DDD);
    font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
    color: #FFF;
    background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
    border-color: #4A993E;
}
.button--state-danger {
    color: #900;
}

2.1.2 OOCSS规范
css

概念
Object Oriented CSS，面向对象的CSS，旨在编写高可复用、低耦合和高扩展的CSS代码。
OOCSS是以面向对象的思想去定义样式，将抽象和实现分离，抽离公共代码。

总结：
将重用的东西当做一个对象来看， 然后将不同的属性 放到另一个类名去

  <!-- 举例：  -->
  .list{
    background: #fff;
  }
  .list--width{
    width: 300px;
  }

2.2 js编写代码规范
Jslint
Eslint
3. 前端工作规范
4. 开发文档的书写规范
这部分内容从以下几个部分进行说明

html规范
css规范
js规范
4.1 HTML规范
标签上属性的顺序建议如下：
class ( class 是为高可复用组件设计的,所以应处在第一位)
id name (id 更加具体且应该尽量少使用,所以将它放在第二位)
data-*
src for type href value
placeholder title alt
aria-* role
required readonly disabled

id/class 命名规则: BEM OOCSS SMACSS(扩展)

注释规范(最好用英文)

​
​

4.2 CSS规范
属性顺序

位置属性 ( position top right z-index display float etc.)

大小 ( width height padding margin etc.)

文字系列 ( font line-height letter-spacing color text-align ect.)

背景 ( background border etc.)

其他 ( animation transition etc.)

以及注释的写法

  <!-- 举例：  -->
      .go--top{
        position: fixed;
        right:20px;
        bottom: 50px;
        z-index: 1000;
        display:block;
        
        width: 50px;
        height: 200px;
       
        font-size: 16px;
       
        background: #ccc;
       
        opactiy: 0.5;
        transition: all 0.5s;
       
        <!-- 注释 -->
      }

尽量不使用选择器 （css3选择器）

.content.first-child等

<!-- 举例：   -->
    <div class="content">
      <ul>
        <li>
          <a href=""></a>
          <a href=""></a>
          <a href=""></a>
        </li>
      </ul>
      <ul>
        <li>
          <a href=""></a>
          <a href=""></a>
          <a href=""></a>
        </li>
      </ul>
    </div>

属性使用缩写

  <!-- 举例：  -->
      body{
        margin: 10px 0;
        background: url('./img.png') center;
      }

去掉小数点前面的 0

body{
  margin: 10px .8px;
  background: url('./img.png') center;
}

4.3 JS规范
语言规范

声明变量必须加上 let 关键字，不要再使用 var
优先使用箭头函数
使用模板字符串代替连接字符串
使用分号

如果仅依靠语句间的隐式分隔,有时会很麻烦,使用分号更能清楚哪里是语句的起止,而且有些情况下,漏掉分号会报错
块内函数声明

不要在块内声明一个函数,例如

  if (x) {
      function zwxk() {}
  }

如果确实需要,使用函数表达式来初始化变量

  if (x) {
      let foo = function() {}
  }

循环注意

forEach
map
filter
every
some
for…in
for…of
for…while
do…while
命名规范

camel表示驼峰命名法 pascal表示 首字母大写
变量名: 必须使用 camel 命名法
参数名: 必须使用 camel 命名法
函数名: 必须使用 camel 命名法
方法/属性: 必须使用 camel 命名法
私有 ( 保护 ) 成员: 必须以下划线开头
常量名: 必须使用全部大写的下划线命名法,例如 XTEP_HOST_API
类名: 必须使用 pascal 命名法
枚举名: 必须使用 pascal 命名法
枚举的属性: 必须使用全部大写的下划线命名法,例如 XTEP_HOST_API
命名空间: 必须使用 camel 命名法
语义: 命名同时还需要关注语义
声明规范

var let const 应该放在function 已进入函数的时候

注释变量的功能及代表的含义,且应以字母顺序排序.每个变量单独占一行以便添加注释

<!-- 举例： -->
  var totalPrice = 1; //totalPrice表示商品购物车的总价   √
  var num = 10,totalNum = 100 ;           不建议

回调函数规范

回调函数统一使用 Promise 函数,回调成功的参数统一为 res,错误参数为 err

    let callback = new Promise((resolve, reject) => {
        if (/* 异步操作成功 */){
            resolve(value);
        } else {
            reject(err);
        }
    });

    callback.then((res) => {
        console.log('成功回调！', res);
    }).catch((err) => {
        console.log('失败回调！', err);
    });

标点规范

js中统一使用反引号（``）或是单引号(’’)， 不使用双引号("")

函数默认值

函数默认值写在其他参数后面

  function zxm(a,b,name = 'zxm'){
      console.log(name)
  }

5. Vue规范
5.1 组件
一般只在以下几种情况将一段代码封装成组件或指令：
​ 复用性高

​ 某段代码中的逻辑过于复杂，写在页面中不便于管理

​ 页面代码行数过多，可读性差且与其他页面业务代码无关时可以封装成容器组件（container component）

为了避免与原生标签冲突和便于管理，可复用组件（通常与业务无关）需要有命名空间，如damXxx（dam为命名空间）。

组件文件名称遵循首字母小写的驼峰命名法，且****容器组件****名要以文件夹名称开头，页面中调用则是小写且单词间以“-”分割。

容器组件存放的目录层级要和页面组件一致，便于查找。

每个组件都要有name属性。

使用:代替v-bind:，@代替v-on:。

为可读性考虑，当组件使用了较多的属性时应格式化成下面的形式：

引入第三方库组件前应充分阅读文档，一些组件提供了本质上是修改样式的属性，如element中：

​ el-form提供了inline属性使其变成行内表单，而不是通过设置display: inline-block来实现。

​ el-button和表单元素都提供了size属性来改变组件的大小而不是直接修改元素的height和line-height。

5.2 Vuex
Vuex作为vue的状态管理有state、getter、mutation、action、module五大核心概念。前端开发人员需要熟练掌握每个概念及其用法

需要共享的数据才放入state，一些只使用一次的变量可直接放在data()中。

可适当使用映射函数mapState、mapGetters、mapMutations、mapActions。

action仅仅作为调用接口使用，数据格式化的逻辑应放在页面代码或mutation中。

mutation方法名应全大写，后面的单词与state中声明的一致，且单词间用“_”隔开（如SET_MAIN_USERS）。

action中的请求一般有get、post、put、delete四种，对应的action方法应按一定的规则命名（如与后台repository接口一致的话前缀分别为find、save、update、delete）。

5.3 其他注意事项
使用vue的一大优点是通过数据双向绑定来重新渲染dom，所以不要在vue项目中直接添加、修改和删除dom，例如多选删除功能应该给checkbox绑定一个数据对象的checked属性，而不是通过操作dom直接改变checkbox元素的checked属性。

用computed方法代替复杂的三目运算。

保存在state中的变量不需要再通过props传值。

避免一个页面中使用过多的消耗性能的组件，如el-table、echarts等。

尽可能不使用watch，而是使用组件自带的change事件或者将方法在数据改变赋值后进行调用。

绑定了事件（包括监听在window/body的事件）或者使用了定时器时在组件销毁前需要手动进行解绑或置空。

使用第三方库组件在销毁时需要调用正确的销毁函数
————————————————
版权声明：本文为CSDN博主「豆子MMR」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45282581/article/details/111638052