7.前端开发规范 eslint-jslint规范

前端的开发规范

1.目录构建的规范

命名原则：

1. 简洁
   比如： src 源代码 img 图片资源 js JavaScript脚本 dep 第三方依赖包
2. 不使用复数
   比如： 不使用 imgs docs

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

比如：

1. src 源代码（逻辑）
2. doc 文档
3. dep 第三方依赖包
4. test 测试

• 根据业务逻辑进行文件夹的划分
  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. 纯手动打造
2. 快速构建工具做 —》 改造

2. 前端命名规范

BEM && OOCSS 针对的都是 css 命名规范
jslint eslint js使用规范

BEM规范

1. 概念：
   Block Element Modifier，它是一种前端命名方法，旨在帮助开发者实现模块化、可复用、高可维护性和结构化的CSS代码。
2. BEM是定义了一种css class的命名规范，每个名称及其组成部分都是存在一定的含义。
3. 由拉丁字母, 数字, -组成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实例
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规范

1. 概念

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

2. 总结：

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

.list{
background: #fff;
}
.list--width{
width: 300px;
}

jslint eslint规范
js代码的编写习惯

3. 前端工作规范

日报、周报

日报：

今天
上午你做什么
下午你做了什么
遇到什么问题？是否有解决？
明天的计划？（明天准备做什么）

周报：

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

邮件的发送

1. 明确邮件发送谁？
   参与者： 一定要想清楚， 如果不清楚， 记得问一下你直接上司（同事）
2. 邮件的主题：

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

3. 邮件正文

• 称呼要明确：
• 条理分明
  举例：
  各位老师好：
  一下内容是xxx 请xxx

4. 署名：
   什么部分 什么职位 什么姓名 什么时间
5. 附件
   需要说明附件是做什么的？
6. 转发;
   需要对原邮件进行说明。，然后写清楚自己的意图

4. 开发文档的书写规范

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. 注释规范(最好用英文)

<div class="container">
<!-- 头部--start -->
<header></header>
<!-- 头部--end -->
<!-- 内容--start -->
<div class="content">
</div>
<!-- 内容--end -->
<!-- 底部--start -->
<footer>
</footer>
<!-- 底部--end -->
</div>

2. css规范

1. 属性顺序
   位置属性 ( 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;
<!-- 注释 -->
}

2. 尽量不使用选择器 （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>

3. 属性使用缩写：
   举例：

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

4. 去掉小数点前面的 0

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

3. 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表示 首字母大写
   变量名: 必须使用 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,错误参数为 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)
}