本文主要从以下几个方面总结前端开发规范1.目录构建规范2.前端命名规范3.前端工作规范4.开发文档编写规范1.前端目录构建规范我们从命名原则、根目录、业务逻辑等方面进行目录构建。1.1命名原则：简洁明了（如下：）src源代码img图片资源jsJavaScript脚本dep第三方依赖包不要使用复数（如下：）不要使用imgsdocs1.2根目录（root）结构按功能划分（如下：）src源代码（逻辑）doc文档dep第三方依赖包测试测试1.3按业务逻辑划分文件夹（如下：）src目录名词解释：公共公共资源public/static静态资源组件组件视图/tpl模板文件srccommon公共资源imglogo.pngsprites.pngcssreset.cssjsconf.js项目配置文件public/static静态资源jscsstplindex.htmlshopcar.htmlimgcomponentcomponenthomeshopcarloginregisteruserlistdetailview/tpl项目模板tpl是template1.4的缩写总结：以上目录开发规范有两种使用方式。1、使用webpack、gulp等前端工程工具手动构建。2.使用框架提供的脚手架工具进行修改。下面从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;border-radius:3px;padding:7px12px;border:1pxsolid#D5D5D5;background-image:linear-gradient(#EEE,#DDD);字体：70013px/18pxHelvetica,arial;}.button--state-success{color:#FFF;background:#569E3Dlinear-gradient(#79D858,#569E3D)repeat-x;border-color:#4A993E;}.button--state-danger{color:#900;}2.1.2OOCSS规范概念ObjectOrientedCSS，面向对象的CSS，旨在编写高复用、低耦合和高扩展的CSS代码OOCSS是用面向对象的思想来定义样式，将抽象与实现分离，提取公共代码。总结：把可复用的东西当成一个对象，然后把不同的属性放到另一个类名中.list{background:#fff;}.list--width{width:300px;}2.2JS代码编写规范·jslint·eslint3.前端工作规范下面我们从日报、周报、邮件格式三个方面来了解3.1每日内容如下早上你下午做了什么？你遇到了什么问题？有解决办法吗？明天的计划？（你明天打算做什么）最后，跟上内容最后的日期。3.2周报内容如下：·2019.05.25-2019.06.2周报：i．本周主要工作内容：§完成鸿视云h5播放器升级及大数据报表；§修复xk-h5播放器bug：三星手机浏览器无法滑动搜索；§admin-console后台管理系统初步完成了终端接入页面和数据统计概览页面的制作；二.工作中存在的主要问题问题：iii．-web服务器大数据展示页面移植到admin-console后台管理系统时存在bootstrap与jquery.easyui冲突等兼容性问题；四.-解决这个问题的思路可能不是最有效的方法，有可能使用iframe会更快；使用iframe，存在easyui页面如何控制iframe页面，浏览器窗口变化时如何改变iframe等问题；v.下周工作计划：§完成上周未完成的后台大数据展示页面创建；§完成工作后，如果有时间，尝试使用iframe解决；§询问是否有任何工作可以提供帮助；3.3常用的电子邮件格式如下：1\.指定将电子邮件发送给谁？o参会人员：一定要想清楚，如果不清楚，记得问问你的直属主管（同事）2\.电子邮件的主题：o必须只有一个主题。如有必要，可以添加：[请审阅]等字3\。邮件正文o地址要清楚：o条理清晰示例：o领导您好：o以下内容为xxx请熟悉/请复习4\.签名：o什么部分，什么职位，什么名字和时间5\.附件o需要解释附件的作用吗？6\。向前;o需要解释原始邮件。,然后写清楚你的意图4.开发文档的编写规范这部分从以下几个部分来讲解：html规范css规范js规范4.1html规范1\.标签上的属性顺序建议如下：class(class是为高复用组件设计的，所以应该排在第一位)idname(id比较具体，尽量少用，所以放它排在第二位）data-**srcfortypehrefvalueplaceholdertitlealtaria-**rolerequiredreadonlydisabled2\.id/class命名规则：BEMOOCSSSMACSS(extended)3\.注释规范（最好是英文的）4\．5\.6\.<标题>7\.8.9\.10\.11.12\.
13\.14.15\.16\.<页脚>17.18\.19\.20\.
