本文主要从以下几个方面总结了前端开发规范：1.目录构建规范2.前端命名规范3.前端工作规范4.编写开发文档规范前端目录构建规范我们从命名原则、根目录、业务逻辑等方面构建目录1.1命名原则：简洁明了（如下：）src源代码img图片资源jsJavaScriptscriptdep第三方依赖包不要使用复数（如下：）不要使用imgsdocs1.2根目录（root）结构按功能划分（如下：）src源码（逻辑）docdocumentdepthird-party依赖包测试test1.3按业务逻辑划分文件夹（如下：）src目录名词解释：公共公共资源public/static静态资源组件componentview/tpl模板文件src公共公共资源imglogo.pngsprites.pngcssreset.cssjsconf.js项目配置文件public/static静态资源jscsstplindex.htmlshopcar.htmlimgcomponent组件homeshopcarloginregisteruserlistdetailview/tplprojecttemplatetpl是template1.4的缩写总结：有以上目录开发规范的两种使用方式使用webpack、gulp等前端工程工具手动构建使用框架提供的脚手架工具修改前端命名约定。我将从以下两个方面来解释这部分?CSS命名规范oBEM规范oOOCSS规范?javaScript编写规范ojslintoeslint2.1css命名规范2.1.1BEM规范概念：BlockElementModifier，这是一种前端命名方法，旨在帮助开发人员实现模块化、可重用、高度可维护和结构化的CSS代码。BEM是一种定义css类的命名约定，每个名称及其组成部分都有一定的含义。css的单个名称，由拉丁字母、数字、-组成。BlockElementModifier是一个独立且有意义的实体，例如header,container,menu,checkbox等Block的一部分，没有独立的意义，例如headertitle,menuitem,Aflagoflistitem,etc.BlocksorElements，可以用来改变它的外观，行为，状态。例如disabled,checked,fixed等。命名由拉丁字母、数字、-组成css的单一名称。Block使用Conciseprefixname来命名一个独立的、有意义的抽象块或组件。.block.header.site-searchElement使用__连接器连接Block和Element。.block__element.header__title.site-search__fieldModifier使用--connector连接Block或Element和Modifier。.block--modifier.block__element--modifier.header--hide.header__title--color-red.site-search__field--disabled实例.form{}.form--theme-xmas{}.form--simple{}.form__input{}.form__submit{}.form__submit--disabled{}Buttons实例普通按钮成功按钮危险按钮.button{display:inline-block;边界半径：3px；填充：7px12px；边框：1px实心#D5D5D5；背景图像：线性渐变（#EEE，#DDD);字体：70013px/18pxHelvetica,arial;}.button--state-success{颜色：#FFF;背景：#569E3D线性渐变（#79D858，#569E3D）重复x；边框颜色：#4A993E；}.button--state-danger{颜色：#900；}2.1.2OOCSS规范概念ObjectOrientedCSS，面向对象的CSS，旨在编写高可重用、低耦合、高扩展的CSS代码OOCSS是以面向对象的思想定义样式，将抽象与实现分离，提取公共代码。总结：把可重用的东西当成一个对象，然后把不同的属性放到另一个类名```css.list{background:#fff;}.list--宽度{宽度：300px;}```2.2js编码规范?jslint?eslint前端工作规范我们从三个方面来理解：日报、周报和email格式有什么问题？有解决办法吗？明天的计划？（你明天打算做什么）最后，跟上内容末尾的日期3.2周报内容如下：?2016.07.25-2016.07.29周报：i．本周主要工作内容：?完成鸿视云h5播放器升级和大数据报表；?修复xk-h5播放器bug：三星手机内置浏览器无法进行滑动搜索；?admin-console后台管理系统初步完成了终端接入页面和数据统计概览页面的制作；二.工作中存在的主要问题问题：iii.-web服务器大数据展示页面移植到admin-console后台管理系统时存在bootstrap与jquery.easyui冲突等兼容性问题；iv.-解决这个问题的思路可能不是最有效的方法，可能使用iframe会更快；使用iframe，存在easyui页面如何控制iframe页面，浏览器窗口变化时如何改变iframe等问题；v.下周工作计划：?完成上周未完成的后台大数据展示页面制作；?完成工作后，如果有时间，尝试使用iframe解决；?问问你的兄弟有没有什么工作可以帮忙；3.3常用的邮件格式如下：1.指定邮件发给谁？o参会者：一定要想清楚，如果不清楚，记得问问你的直接主管（同事）2.邮件主题：o主题必须只有一个o如有必要，可以加上：【请review]等3.邮件正文o标题要清晰：o清晰示例：o领导您好：o以下内容为xxx请熟悉/请审核4.签名：o什么部分，什么职位，什么姓名和时间5.附件o需要说明附件是做什么用的？6.转发；o需要解释原始邮件，然后写清楚你的意图。开发文档的编写规范将从以下几个部分进行说明：html规范?css规范?js规范4.1html规范1.标签上的属性顺序建议如下：class(class用于高可复用组件设计，所以应该放在第一位)idname(id比较具体，尽量少用，所以放在第二位)data-srcfortypehrefvalueplaceholdertitlealtaria-rolerequiredreadonlydisabled2.id/class命名规则：BEMOOCSSSMACSS（扩展）3.注释规范（最好是英文）>8.11.
14.
