前端的开发规范

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

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

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. 利用框架提供的脚手架工具进行修改

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

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

    <!-- e.g. -->
  
    .block
  
    .header
  
    .site-search
  
  

• Element

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

    <!-- e.g. -->
  
    .block__element
  
    .header__title
  
    .site-search__field
  

• Modifier

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

    <!-- e.g. -->
  
    .block--modifier
  
    .block__element--modifier
  
    .header--hide
  
    .header__title--color-red
  
    .site-search__field--disabled
  

• 实例

  <!-- 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 -->

  .form {}

  .form--theme-xmas {}

  .form--simple {}

  .form__input { }

  .form__submit {}

  .form__submit--disabled {}

• Buttons实例

  <!-- 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文件中 -->

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

	 - 总结： 
	     将重用的东西当做一个对象来看， 然后将不同的属性 放到另一个类名去
	     ```css
	       <!-- 举例：  -->
	       .list{
	         background: #fff;
	       }
	       .list--width{
	         width: 300px;
	       }
	     ```

3 开发文档的书写规范
3.1 html规范
1.标签上属性的顺序建议如下：
class ( class 是为高可复用组件设计的,所以应处在第一位)
id name (id 更加具体且应该尽量少使用,所以将它放在第二位)
data-*
src for type href value
placeholder title alt
aria-* role
required readonly disabled
2.id/class 命名规则: BEM OOCSS SMACSS(扩展)
3.注释规范(最好用英文)

<!-- header–start -->

<!-- header–end -->

				       <!-- content--start -->
				       <div class="content">
				         
				       </div>
				       <!-- content--end -->
				       
				       <!-- footer--start -->
				       <footer>
				
				       </footer>
				       <!-- footer--end -->
			     </div>
		
3.2 css规范
1.属性顺序

	1.位置属性 ( position top right z-index display float etc.)
	2.大小 ( width height padding margin etc.)
	3.文字系列 ( font line-height letter-spacing color text-align ect.)
	4.背景 ( background border etc.)
	5.其他 ( animation transition etc.)
	6.以及注释的写法
		  <!-- 举例：  -->
		      .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;

        <!-- 注释 -->
        
2.尽量不使用选择器 （css3选择器）
	<!-- 举例：   -->
		    <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>
3.属性使用缩写：
	  <!-- 举例：  -->
	      body{
	        margin: 10px 0;
	        background: url('./img.png') center;
	      
4.去掉小数点前面的 0
	body{
	  margin: 10px .8px;
	  background: url('./img.png') center;
	}

3.3 Js规范
1.语言规范

	1.声明变量必须加上 let 关键字.不要再使用 var
	2.优先使用箭头函数
	3.使用模板字符串取代连接字符串
	
2.使用分号
	如果仅依靠语句间的隐式分隔,有时会很麻烦,使用分号更能清楚哪里是语句的起止,而且有些情况下,漏掉分号会出 BUG

3.块内函数声明
	1.不要在块内声明一个函数,e.g.
			  if (x) {
			      function zxm() {}
			  }

	2.如果确实需要,使用函数表达式来初始化变量
				  if (x) {
				      let foo = function() {}
				  }
4.循环注意
	1.forEach
	2.map
	3.filter
	4.every
	5.some
	6.for…in
	7.for…of
	8.for循环 while
	9.do…while
	
5.命名规范：
	1.camel 表示驼峰命名法 pascal表示 首字母大写
	2.变量名: 必须使用 camel 命名法
	3.参数名: 必须使用 camel 命名法
	4.函数名: 必须使用 camel 命名法
	5.方法/属性: 必须使用 camel 命名法
	6.私有 ( 保护 ) 成员: 必须以下划线开头
	7.常量名: 必须使用全部大写的下划线命名法,e.g. XTEP_HOST_API
	8.类名: 必须使用 pascal 命名法
	9.枚举名: 必须使用 pascal 命名法
	10.枚举的属性: 必须使用全部大写的下划线命名法,e.g. XTEP_HOST_API
	11.命名空间: 必须使用 camel 命名法
	12.语义: 命名同时还需要关注语义
6.声明：
	1.var let const 应该放在function 已进入函数的时候
	2.注释变量的功能及代表的含义,且应以字母顺序排序.每个变量单独占一行以便添加注释
		<!-- 举例： -->
		  var totalPrice = 1; //totalPrice表示商品购物车的总价   √
		  var num = 10,totalNum = 100 ;           不建议
		  
7.回调函数规范：
回调函数统一使用 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);
    });

8.标点规范
	js中统一使用反引号（``）或是单引号(’’)， 不使用双引号("")

9.函数默认值
	函数默认值写在其他参数后面
	  function zxm(a,b,name = 'zxm'){
	      console.log(name)
	  }