1. 前端的开发规范

目录构建的规范
命名原则：
简洁
比如： src 源代码 img 图片资源 js JavaScript脚本 dep 第三方依赖包
不使用复数
比如：不使用 imgs docs
根目录（root）结构按职能划分
比如：

  1. src 源代码（逻辑）2. doc 文档3. dep 第三方依赖包4. test 测试根据业务逻辑进行文件夹的划分srccommon 公共资源imglogo.pngsprites.pngcssreset.cssjsconf.js 项目的配置文件public/static 静态资源jscsstplindex.htmlshopcar.htmlimg  component 组件//一些封装好了的代码，apihomeshopcarloginregisteruserlistdetail

view/tpl 项目模板 tpl 是 template的缩写

纯手动打造
快速构建工具做 —》改造

2. 前端命名规范

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

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
使用简洁的前缀名字来命名一个独立且有意义的抽象块或组件。
举例

    .block.header.site-searchElement

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

.block__element
.header__title
.site-search__field

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

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

概念
Object Oriented CSS，面向对象的CSS，旨在编写高可复用、低耦合和高扩展的CSS代码。
OOCSS是以面向对象的思想去定义样式，将抽象和实现分离，抽离公共代码。
总结：
将重用的东西当做一个对象来看，然后将不同的属性放到另一个类名去
举例：

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

jslint eslint规范

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：询问师兄有没有可以帮忙做的工作；

邮件的发送

明确邮件发送谁？
参与者：一定要想清楚，如果不清楚，记得问一下你直接上司（同事）
邮件的主题：
* 主题必须有且仅有一个
* 必要时，可以添加：【请批阅】、等字眼
邮件正文
* 称呼要明确：
* 条理分明
举例：
各位老师好：
一下内容是xxx 请xxx
署名：
什么部分什么职位什么姓名什么时间
附件
需要说明附件是做什么的？
转发;
需要对原邮件进行说明。，然后写清楚自己的意图

4. 开发文档的书写规范

html规范

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

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;<!-- 注释 -->
}

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

js规范

1.声明规范必须使用let关键字，不要再使用var&nbsp;&nbsp; 有点使用箭头函数&nbsp;&nbsp; 使用模板字符串取代连接字符串
2.使用分号
3.块内函数声明
不要再块内声明函数
4.forEach是用力啊循环数组的
5.map，for..in， for..of，filter，some，

6.命名规范

   camel表示驼峰命名pascal表示首字母大写变量名：必须使用camel规范参数名：必须使用camel规范函数命：必须使用camel规范方法/属性：必须使用camel规范私有成员：必须下划线开头常量命名：必须使用全部大写的下划线命名法类名：pascal命名法

7.声明

 &nbsp;&nbsp; 在函数的最前面应先用var let声明&nbsp;&nbsp; 注释变量的功能和含义，且以字母顺序排序，每个变量单独占一行一边添加注释；

8.回调函数规范

 &nbsp;&nbsp; 回调函数统一使用promise，成功的参数统一使用res，错误参数err

9.数据绑定变量定义规范
10.函数默认值

  &nbsp;&nbsp; 函数默认值写在其他参数的后面

11.标点规范

 &nbsp;&nbsp; js中统一使用反引号(``)或单引号('')，不使用双引号

前端开发规范和开发文档的书写规范相关推荐

腾讯企业邮箱开发（非官方开发文档方式
** 之前项目系统中包含了一个邮箱下载模块,其中对接的是腾讯企业邮箱,这个模块前后也维护了不短时间,想写下这篇文章来聊聊具体问题,如果有需要对接腾讯企业邮箱的需求,同时官方给予的开发文档无法满足需求, ...
敏捷开发：编写开发文档的利与弊
敏捷开发学习总结: 思考开发文档的利与弊文档是个好东西,这是不可否认的,但是太依赖文档也有弊端,下面我从不同的度来分析一下文档的利与弊,然后思考在敏捷开发时,文档又是如何进行的. 从公司的角度来看 ...
微信小程序怎么开发(小程序开发文档)
微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 2017年1月9日~2018年1月9日,小程序正式上线一周年.上线以来,小程序不断地释放新能力, ...
一看就懂！renren-fast 快速开发框架使用以及开发文档
目录 renren-fast框架介绍入门快速开始 1.后端部署 2.前端部署测试实战开发文档链接: https://pan.baidu.com/s/1LHT0cI1XDM6YZAiF2OX ...
前端开发文档（开发之前个人的准备）
前言: 前端开发文档,目前自己正在开发的项目之前的个人准备,按照自己的开发习惯来编写,有问题或者不足的地方还望指出,谢谢~ 如有侵权,实属无意,请立即联系,立删. 环境搭建需要准备的软件 a. No ...
NFC开发 —————实用工具以及开发文档（四）
关于开发NFC必不可少的就是官方开发软件,以及开发文档,这篇文章给大家详细讲解一下,关于官方软件合集<文章末尾有下载地址> Android NFC开发(一) NFC开发 -----实现NF ...
Android的开发文档规范
Android的开发文档规范我们项目的代码时间时间很长,经过太多人手,代码的规范性堪忧,目前存在较多的比较自由的「代码规范」,这非常不利于项目的维护,代码可读性也不够高. 分析现有项目的代码的情况, ...
rap技术原理_RAP如何自动在方法上生成前端开发文档
针对阿里妈妈前端大牛来说这个工具的诞生,为java开发人员节约了多少开发时间.非常感谢. 废话不多说直接看源码: 安装说明大家可以根据上面的文档源码来直接部署.重点来了.重要的话说三遍.idea如何完 ...
软件工程开发文档写作教程(05)—可行性研究报告写作规范
本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 本文参考资料:电子工业出版社<软件文档写作教程> 马平,黄冬梅编著软件工程开发文档现状一 ...

前端开发规范和开发文档的书写规范