前端的开发规范

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

目录构建规范
前端命名规范
前端工作规范
开发文档的书写规范

1. 前端目录构建规范

我们从命名原则、根目录、业务逻辑等方面进行目录构建

1.1 命名原则：

- 简洁明了（如下：）
  * src 源代码   
  * img  图片资源    image images
  * js  JavaScript脚本  
  * dep 第三方依赖包     development package
- 不使用复数（如下：）
  * 不使用 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. 利用框架提供的脚手架工具进行修改

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
    
    	<div class = "header">
    		<h3 class = "header__title"></h3>
    	</div>

    .site-search__field

Modifier

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

  <!-- e.g. -->

  .block--modifier

  .block__element--modifier

  .header--hide

  .header__title--color-red

  .site-search__field--disabled
  
  <form class = "user">
  	<input type = "text" class = "username"/>
  	<input type = "text"/>
  	<input type = "text"/>
  	<input type = "button" class = "user__submit"/>
  </form>
  .user__submit--disabled: {
      background: #ccc;
  }

实例

```html

``` ```css

.form {}

.form--theme-xmas {}

.form--simple {}

.form__input { }

.form__submit {}

.form__submit--disabled {}
```

Buttons实例
``` html

``` ```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规范 

最典型的oocss规范使用案例：  bootstrap

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

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

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

 
           ul>li      
           ul.list
           li.list-item
           li a.list-link
           li h3.list-title
           li p.list-text
           li button.list-btn-success
           li button.list-btn-danger
         ```

注意： 以上css命名规范： 解决命名冲突

### 2.2 js编写代码规范

- [jslint](https://www.jslint.com/)
- [eslint](https://cn.eslint.org/)       

## 3. 前端工作规范

> 我们从 日报 、 周报以及邮件格式三个方面来了解

### 3.1 日报内容如下

上午你做什么
下午你做了什么
遇到什么问题？是否有解决？
明天的计划？（明天准备做什么）
最后在内容最后面跟上日期

举例：
亲爱的老大：

	上午工作内容如下：
		项目首页布局完成，首页逻辑和交互代码还差2个轮播未完成
		
	下午工作内容如下： 
		项目首页逻辑和交互代码全部完成
		
	遇到的困难如下：
		首页轮播书写实现防抖有些困难，但是已经解决
		遇到了xxx问题，是否已经解决
		
	明天工作计划如下： 
		项目分类页完成
		项目详情页完成
		
     请老大熟知！
     
     谢谢
     
     									技术部 - 前端 - 朱晓航
     									2019/06/18


### 3.2 周报内容如下：

- 2016.07.25-2016.07.29周报：
  1. 本周工作主要内容：
     - 完成了宏视云h5播放器升级及大数据上报；
     - 修复xk-h5播放器bug：在三星手机自带浏览器无法进行滑动seek; 
     - admin-console后台管理系统初步完成终端访问页面和数据统计概览页面的制作；
  2. 工作中存在的主要问题：
         - webserver大数据展示页面移植到admin-console后台管理系统存在bootstrap与jquery.easyui冲突等几个兼容性问题；
         - 解决这个问题的思路可能不是最有效的方法，可能使用iframe会快些；使用iframe存在如何在easyui页面控制iframe页面及如何在浏览器窗口改变时，iframe也跟着改变等问题；
  3. 下周工作计划：
     - 完成上周未完成的admin-console大数据展示页面的制作；
     - 完成工作以后，如果有时间的话尝试下用iframe解决；
     - 询问师兄有没有可以帮忙做的工作；

### 3.3 常用邮件格式如下：

1. 明确邮件发送谁？

   - 参与者： 一定要想清楚， 如果不清楚， 记得问一下你直接上司（同事）

2. 邮件的主题： 

   - 主题必须有且仅有一个
   - 必要时， 可以添加： 【请批阅】 、 等字眼

3. 邮件正文

   - 称呼要明确： 

   - 条理分明
     举例：

     ```
     各位领导好：
         以下内容是xxx 请熟知/请批阅
     ```

4. 署名： 

   - 什么部门 什么职位  什么姓名 什么时间

5. 附件

   - 需要说明附件是做什么的？

6. 转发; 

   - 需要对原邮件进行说明。，然后写清楚自己的意图

## 4. 开发文档的书写规范

> 这部分内容从以下几个部分进行说明
>
> - html规范
> - css规范
> - js规范  

### 4.1 html规范

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

   <div class="" id =""></div>

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

3. 注释规范(最好用英文)

   ```html
       <div class="container">
          <!-- header--start -->
          <header></header>
          <!-- header--end -->
   
          <!-- content--start -->
          <div class="content">
            
          </div>
          <!-- content--end -->
          
          <!-- footer--start -->
          <footer>
   
          </footer>
          <!-- footer--end -->
        </div>

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 ul.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
- 优先使用箭头函数
- 使用模板字符串取代连接字符串 `` ''+''
使用分号

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

块内函数声明
- 不要在块内声明一个函数,e.g.
```
  if (x) {
      function zxm() {}
  }
```
- 如果确实需要,使用函数表达式来初始化变量
```
  if (x) {
      let foo = function() {}
  }
```
循环注意
- forEach
- map
- filter
- every
- some
- for..in
- for...of
- for循环 while
- do...while
命名规范：
- camel 表示驼峰命名法 pascal表示首字母大写 FatherTitle backgroundColor
- 变量名: 必须使用 camel 命名法
- 参数名: 必须使用 camel 命名法
- 函数名: 必须使用 camel 命名法
- 方法/属性: 必须使用 camel 命名法
- 私有 ( 保护 ) 成员: 必须以下划线开头
- 常量名: 必须使用全部大写的下划线命名法,e.g. XTEP_HOST_API
- 类名: 必须使用 pascal 命名法
- 枚举名: 必须使用 pascal 命名法
- 枚举的属性: 必须使用全部大写的下划线命名法,e.g. 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)
  }

posted @ 2019-06-21 19:35 mckk 阅读(1518) 评论(0) 编辑收藏举报

刷新页面返回顶部

Zhu xiaohang's blog

朱晓航

前端的开发规范

前端的开发规范

1. 前端目录构建规范

1.1 命名原则：

1.2 根目录（root）结构按职能划分（如下：）

1.3 根据业务逻辑进行文件夹的划分（如下：）

1.4 总结：

2. 前端命名规范

2.1 css命名规范

2.1.1 BEM规范

4.2 css规范

4.3 Js规范

公告