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

1. 目录构建规范
2. 前端命名规范
3. 前端工作规范
4. 开发文档的书写规范

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

命名原则：

• 简洁明了（如下：）
  • src 源代码
  • img 图片资源 image images
  • js JavaScript脚本
  • dep 第三方依赖包 development package
• 不使用复数（如下：）
  • 不使用 imgs docs

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

• src 源代码（逻辑）
• doc 文档
• dep 第三方依赖包
• test 测试

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

  srccommon  公共资源 imglogo.pngsprites.pngcssreset.cssjsconf.js  项目的配置文件public/static 静态资源jscsstplindex.htmlshopcar.htmlimgcomponent   组件 home shopcarloginregisteruserlistdetailview/tpl   项目模板           tpl  是  template 的缩写

总结：

以上目录开发规范有两种使用途径

		使用前端工程化工具如webpack、gulp等进行手动打造利用框架提供的脚手架工具进行修改

前端命名规范

这部分内容从以下两个方面来进行讲解

• CSS命名规范
  • BEM规范
  • OOCSS规范
• javaScript编写规范
  • jslint
  • eslint

css命名规范
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-searchElement使用_(两个)连接符来连接Block 和 Element。<!-- e.g. -->.block__element.header__title<div class = "header"><h3 class = "header__title"></h3></div>.site-search__fieldModifier使用--连接符来连接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文件 --><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;
  }
  

OOCSS规范

最典型的oocss规范使用案例：  bootstrap- 概念Object Oriented CSS，面向对象的CSS，旨在编写高可复用、低耦合和高扩展的CSS代码。OOCSS是以面向对象的思想去定义样式，将抽象和实现分离，抽离公共代码。
- 总结： 将重用的东西当做一个对象来看， 然后将不同的属性 放到另一个类名去<!-- 举例：  -->.list{background: #fff;}.list-width{width: 300px;}.list-height{}.list-color{}ul>liul.listli.list-itemli a.list-linkli h3.list-titleli p.list-textli button.list-btn-successli button.list-btn-danger注意： 以上css命名规范： 解决命名冲突

js编写代码规范

• jslint
• eslint

开发文档的书写规范

这部分内容从以下几个部分进行说明

html规范css规范js规范  

html规范

  1. 标签上属性的顺序建议如下： class ( class 是为高可复用组件设计的,所以应处在第一位)id name (id 更加具体且应该尽量少使用,所以将它放在第二位)data-*src for type href valueplaceholder title altaria-* rolerequired readonly disabled<div class="" id =""></div>
2. id/class 命名规则: BEM  OOCSS  SMACSS(扩展)
3. 注释规范(最好用英文)<div class="container"><!-- header--start --><header></header><!-- header--end --><!-- content--start --><div class="content"></div><!-- content--end --><!-- footer--start --><footer></footer><!-- footer--end --></div>

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;}

Js规范

1.语言规范：

• 声明变量必须加上 let 关键字.不要再使用 var
• 优先使用箭头函数
• 使用模板字符串取代连接字符串 `` ‘’+’’

2.使用分号：

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

3.块内函数声明：

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

6.声明：

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

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

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

7**.回调函数规范**

回调函数统一使用 Promise 函数,回调成功的参数统一为 res,错误参数为 errcallback.then((res) => {console.log('成功回调！', res);
}).catch((err) => {console.log('失败回调！', err);
});

8.标点规范：

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

9.函数默认值：

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

function zxm(a,b,name = ‘zxm’){

  console.log(name)

}

vue初步认识
前端发展历史

html

html [1990]----> html5 [2008.1.12]

css

css 1.0 1996

css 2.0 1998

css 3.0 2001

EcmaScript

1997年诞生

2015 EcmaScript 2015

2016 EcmaScript 2016 dart语言 vs javascript

随着前端项目的逻辑越来越复杂和难以维护，那么前端这边引进了后端的架构思想（ MV* ）

M Model 数据层

V View 视图层

VM ViewModel 视图模型（ 业务逻辑 VM 是 由 P 改名得来的）

P Presenter 提出者（ Controller 改名得来的 ）

C Controller 控制器 ( 业务逻辑 )

Backbone.js MVP 2010.10

Angular.js( 1.0 ) MVC 2010.10

Angular.ts ( 2.0 ) MVC -> MVVM 2016 目前已经更新到了 Angular7 ( 也属于angular2.0 版本 )

Vue 1.0 MVVVM 2014/07

Vue 2.0 MVVM 2016/09

React 2012 不太认可前端MVC这种架构思想， 你可以将React单纯看做是MVC中V

github统计量 （ 国际使用量 ）不代表大陆地区 单位是： K

angular.js angular.ts vue React

59.6 49.1 142 131

学习难度： Vue < React < Angular( 2.0 )

前端流行

移动 web && hybird app( 混合app )

app

1. native app ( 安卓  ios  java ME)2. webapp ( 应用在浏览器中的app )3. Hybird app ( 混合app ) 1. webapp 嵌入 第三方原生应用库（ 可以访问原生设备（手机） 的接口权限，比如：照相机 ）

MV*的图示

MVC

| C改名为P

MVP

| P更像是媒人了（ 连接 M V 的桥梁）

MVVM

| VM 是 由 p改名得来的 VM 和 V 的关系更加的亲密

| “MVVM”:双向数据绑定，View的变动，映射在 ViewModel，反之一样

注意：

我们以上的这几个框架都是： 单向数据流（ 数据由 父级 流向 子级 ）

初始Vue.js

1. Vue.js是尤雨溪的个人项目
2. Vue.js是一个MVVM框架
3. Vue.js也是一个javascript的渐进式框架（ 越学越难 ）
4. 前端还有一个比较知名的MVVM的个人项目： 司徒正美 avonlon.js

vue.js安装

1. script标签引入（ cdn| 下载 ）
2. 模块化安装 npm/cnpm/yarn

文档学习

1. 先找教程/5分钟快速上手/quick start
2. 下载安装
3. 基础demo
4. 学习api和配置

使用script标签引入，那么会暴露一个 Vue的全局变量

Vue是一个构造器函数我们要在模板中书写js语法，那么我们使用了一个叫做 mustache 的语法糖（ 双大括号 ）我们将js的语法写在{{}} 里面new Vue的到的实例，我们这边称之为 根实例很实例也是一个组件

组件： 组件是一个具有 html css js等的一个聚合体

数据改变，视图就会跟着改变，这种形式我们称之为： 数据驱动视图

M  ->  VM 

问题：

  \1. 为什么script标签引入之后，就会有一个全局变量呢？( function ( global ) {console.log( global ) //window对象global.Vue = function(){}})( this )\2. 为什么模块化引入( npm/cnpm/yarn  )也可以呢？vue使用了  Module.exports / amd ( typeof exports ==='object' ) && ( typeof module !== 'undefined' )  module.exports = factory() // Vue  :  typeof define === 'function' && define.amd ? define(factory) :

(global = global || self, global.Vue = factory());

看Vue.js源代码

  \1. 是有匿名函数来进行封装的( function () {})()第一个() 是匿名函数的定义第二个() 是匿名函数调用

匿名函数好处：

        \1. 安全性高\2. 解决命名冲( function ( global, factory ) {global 指的全局对象factory  工厂函数})( this, function () {})\2. vue是如何即可以使用Vue全局变量，也可以模块化安装\3. 它是利用原型来进行封装的\4. 原型的使用function Fn ( options ) {this   实例中 fn的到的结果   实例     var fn = new Fn()}Fn.protype.name = "Gabriel Yan "Fn.protype.init = function () {console.log( '功能' )}