前端代码编写规范

前端代码编写规范命名规则1.项目名称项目名称驼峰式命名。例：myProject2.目录命名采用单数命名法。例：cssimgfontjs3.JS文件命名字母全部小写，单词之间用“-”链接。例：popup-window.js4.CSS文件命名字母全部小写，单词之间用“-”链接。例：popup-window.css5.HTML文件命名文件名称驼峰式命名。例：riverMonitor.htmlHTML1.语法缩进使用Tab（4个空格）;解释：对于非HTML标签之间的缩进,比如script或style标签内容缩进，与script或style标签的缩进同级。style/*样式内容的第一级缩进与所属的style标签对齐*/ul{padding:0;}/styleullifirst/lilisecond/li/ulscript//脚本代码的第一级缩进与所属的script标签对齐require(['app'],function(app){app.init();});/script嵌套的节点应该缩进;在属性上使用双引号（字符串拼接除外）;属性名全小写，用“-”做分隔符;自动闭合标签处不能使用斜线。htmlheadtitlePagetitle/title/headbodyimgsrc=images/company_logo.pngalt=Companyh1class=hello-worldHello,world!/h1/body/html2.HTML5doctype页面开头的doctype大写，html小写。例：!DOCTYPEhtml!DOCTYPEhtmlhtml.../html3.字符编码采用UTF-8的编码格式。例：metacharset=”UTF-8”!DOCTYPEhtmlhtmlheadmetacharset=UTF-8/head.../html4.引入CSS,JSCSS引入使用linklinkrel=stylesheethref=code-guide.cssJS引入使用scriptscripttype=text/javascripthref=code-guide.js/script页面不允许出现style标签。5.属性1.属性名必须使用小写字母!--good--tablecellspacing=0.../table!--bad--tablecellSpacing=0.../table2.属性值必须使用双引号包围不允许使用单引号。!--good--scriptsrc=esl.js/script!--bad--scriptsrc='esl.js'/scriptscriptsrc=esl.js/script6.属性顺序classidnamedata-*src,for,type,href,value,max-length,max,min,patternplaceholder,title,altaria-*,rolerequired,readonly,disabled7.标签标签名必须使用小写字母!--good--pHelloStyleGuide!/p!--bad--PHelloStyleGuide!/P1．对于无需自闭合的标签，不允许自闭合解释：常见无需自闭合标签有input、br、img、hr等。!--good--inputtype=textname=title!--bad--inputtype=textname=title/2.标签使用必须符合标签嵌套规则解释：比如div不得置于p中，tbody必须置于table中。ul标签包含着li、dl标签包含着dt和dd。3.标签使用必须符合标签嵌套规则常见标签语义：P–段落h1,h2,h3,h4,h5,h6–层级标题strong,em–强调ins–插入del–删除abbr–缩写code–代码标识cite–引述来源作品的标题q–引用blockquote–一段长篇引用ul–无序列表ol–有序列表dl,dt,dd–定义列表8.图片禁止img的src取值为空。延迟加载的图片也要增加默认的src。解释：src取值为空，会导致部分浏览器重新加载一次当前页面，参考：[建议]避免为img添加不必要的title属性。解释：多余的title影响看图体验，并且增加了页面尺寸。[建议]为重要图片添加alt属性。解释：可以提高图片加载失败时的用户体验。[建议]添加width和height属性，以避免页面抖动。[建议]有下载需求的图片采用img标签实现，无下载需求的图片采用CSS背景图实现。解释：1.产品logo、用户头像、用户产生的图片等有潜在下载需求的图片，以img形式实现，能方便用户下载。2.无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用CSS背景图实现。9.表单1．控件标题[强制]有文本标题的控件必须使用label标签将其与其标题相关联。解释：有两种方式：1.将控件置于label内。2.label的for属性指向控件的id。推荐使用第一种，减少不必要的id。如果DOM结构不允许直接嵌套，则应使用第二种。示例：labelinputtype=checkboxname=confirmvalue=on我已确认上述条款/labellabelfor=username用户名：/labelinputtype=textboxname=usernameid=username2．按钮[强制]使用button元素时必须指明type属性值。解释：button元素的默认type为submit，如果被置于form元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出type属性。示例：buttontype=submit提交/buttonbuttontype=button取消/button[建议]尽量不要使用按钮类元素的name属性。解释：由于浏览器兼容性问题，使用按钮的name属性会带来许多难以发现的问题。具体情况可参考此文。3．可访问性(A11Y)[建议]负责主要功能的按钮在DOM中的顺序应靠前。解释：负责主要功能的按钮应相对靠前，以提高可访问性。如果在CSS中指定了float:right则可能导致视觉上主按钮在前，而DOM中主按钮靠后的情况。示例：!--good--style.buttons.button-group{float:right;}/styledivclass=buttonsdivclass=button-groupbuttontype=submit提交/buttonbuttontype=button取消/button/div/div!--bad--style.buttonsbutton{float:right;}/styledivclass=buttonsbuttontype=button取消/buttonbuttontype=submit提交/button/div[建议]当使用JavaScript进行表单提交时，如果条件允许，应使原生提交功能正常工作。解释：当浏览器JS运行错误或关闭JS时，提交功能将无法工作。如果正确指定了form元素的action属性和表单控件的name属性时，提交仍可继续进行。示例：formaction=/loginmethod=postpinputname=usernametype=textplaceholder=用户名/ppinputname=passwordtype=passwordplaceholder=密码/p/form[建议]在针对移动设备开发的页面时，根据内容类型指定输入框的type属性。解释：根据内容类型指定输入框类型，能获得能友好的输入体验。示例：inputtype=date10.多媒体[建议]当在现代浏览器中使用audio以及video标签来播放音频、视频时，应当注意格式。解释：音频应尽可能覆盖到如下格式：MP3WAVOgg视频应尽可能覆盖到如下格式：MP4WebMOgg[建议]在支持HTML5的浏览器中优先使用audio和video标签来定义音视频元素。[建议]使用退化到插件的方式来对多浏览器进行支持。示例：audiocontrolssourcesrc=audio.mp3type=audio/mpegsourcesrc=audio.oggtype=audio/oggobjectwidth=100height=50data=audio.mp3embedwidth=100height=50src=audio.swf/object/audiovideowidth=100height=50controlssourcesrc=video.mp4type=video/mp4sourcesrc=video.oggtype=video/oggobjectwidth=100height=50data=video.mp4embedwidth=100height=50src=video.swf/object/video[建议]只在必要的时候开启音视频的自动播放。[建议]在object标签内部提供指示浏览器不支持该标签的说明。示例：objectwidth=100height=50data=something.swfDONOTSUPPORTTHISTAG/object11.js生成标签在js文件中生成标签让内容更难查找，更难编辑，性能更差，应该尽量避免这种情况的出现12.减少标签数量在编写HTML代码时，需要尽量避免多余的父节点;很多时候，需要通过迭代和重构来使HTML变得更少;任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。例：!--Notwell--spanclass=avatarimgsrc=.../span!--Better--imgclass=avatarsrc=...13.使用高于完美尽量组训HTML标准和语义，但是不应该以浪费实用性作为代价；任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。14.整体结构HTML基础设施文件应以“!DOCTYPE......”首行顶格开始，推荐使用“!DOCTYPEhtml”。必须申明文档的编码charset，且与文件本身编码保持一致，推荐使用UTF-8编码metacharset=utf-8/。根据页面内容和需求填写适当的keywords和description。页面title是极为重要的不可缺少的一项。123456789101112131415!DOCTYPEhtmlhtmlheadmetacharset=utf-8/titleNEC：更好的CSS方案/titlemetaname=keywordscontent=/metaname=descriptioncontent=/metaname=viewportcontent=width=device-width/linkrel=stylesheethref=css/style.css/linkrel=shortcuticonhref=img/favicon.ico/linkrel=apple-touch-iconhref=img/touchicon.png//headbody/body/html结构顺序和视觉顺序基本保持一致按照从上至下、从左到右的视觉顺序书写HTM