本文将从以下几个方面来概述前端的开发工作 1.目录构建规范 2.前端命名规范 3.前端工作规范 4.开发文档的书写规范
1-1：命名原则：
- 简洁明了（如下：） * src 源代码 * img 图片资源 * js JavaScript脚本 * dep（dependencies） 第三方依赖包 - 不使用复数（如下：） * 不使用 imgs docs 不规范的： imgs images styles 首页 购物车 javascripts ... 1-2:根目录（root）结构按职能划分 - src 源代码（逻辑） - doc 文档 - 后台接口文档 doc文件， 在线网页 - 当前项目的说明文档 - dep 第三方依赖包 - test 测试1-3:根据业务逻辑进行文件夹的划分
- src目录名词解释： - common 公共资源 - public/static 静态资源 - component 组件 - view/tpl（template） 模板文件 ``` src common 公共资源 img logo.png sprites.png css reset.css js conf.js 项目的配置文件 public/static 静态资源 js css tpl index.html shopcar.html img component 组件( 就是html css js 等的一个聚合体 ) home shopcar login register user list detail view/tpl 项目模板 tpl 是 template的缩写1-4:总结 以上目录开发规范有两种使用途径 1.使用前端工程化工具如webpack.gulp等进行手动打造 2.利用框架提供的脚手架进行修改
这部分从以下两个方面来进行讲解 2.1 css命名规范: BEM规范 OOCSS规范 2.2javascript编写规范: jslint eslint 2.1.1BEM规范 概念： 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 .site-search__fieldModifier
使用–连接符来连接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; }概念 Object Oriented CSS，面向对象的CSS，旨在编写高可复用、低耦合和高扩展的CSS代码。 OOCSS是以面向对象的思想去定义样式，将抽象和实现分离，抽离公共代码。
总结： 将重用的东西当做一个对象来看， 然后将不同的属性 放到另一个类名去 <!-- 举例： --> .list{ background: #fff; } .list--width{ width: 300px; }我们从 日报 、 周报以及邮件格式三个方面来了解 3-1：日报内容如下 上午你做了什么， 下午你做了什么， 遇到的什么问题？是否有解决？ 明天的计划？ 最后再内容最后面跟上日期 3-2：周报内容如下： 2016.07.25-2016.07.29周报：
本周工作主要内容： 完成了宏视云h5播放器升级及大数据上报；修复xk-h5播放器bug：在三星手机自带浏览器无法进行滑动seek;admin-console后台管理系统初步完成终端访问页面和数据统计概览页面的制作； 工作中存在的主要问题： - webserver大数据展示页面移植到admin-console后台管理系统存在bootstrap与jquery.easyui冲突等几个兼容性问题； - 解决这个问题的思路可能不是最有效的方法，可能使用iframe会快些；使用iframe存在如何在easyui页面控制iframe页面及如何在浏览器窗口改变时，iframe也跟着改变等问题；下周工作计划： 完成上周未完成的admin-console大数据展示页面的制作；完成工作以后，如果有时间的话尝试下用iframe解决；询问师兄有没有可以帮忙做的工作；4.署名：
什么部分 什么职位 什么姓名 什么时间 附件 需要说明附件是做什么的？ 转发; 需要对原邮件进行说明。，然后写清楚自己的意图这部分内容从以下几个部分进行说明
html规范css规范js规范