前端代码编写规范标准

上传人：x*** IP属地：安徽上传时间：2023-01-04 格式：DOC 页数：22 大小：142.50KB 积分：20 举报 版权申诉

已阅读5页，还剩17页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

22/22前端代码编写规命名规则项目名称项目名称驼峰式命名。例：myProject目录命名采用单数命名法。例：cssimgfontjsJS文件命名字母全部小写，单词之间用“-”。例：popup-window.jsCSS文件命名字母全部小写，单词之间用“-”。例：popup-window.cssHTML文件命名文件名称驼峰式命名。例：riverMonitor.htmlHTML语法缩进使用Tab（4个空格）;解释：对于非HTML标签之间的缩进,比如script或style标签容缩进，与script或style标签的缩进同级。<style>/*样式容的第一级缩进与所属的style标签对齐*/ul{padding:0;}</style><ul><li>first</li><li>second</li></ul><script>//脚本代码的第一级缩进与所属的script标签对齐require(['app'],function(app){app.init();});</script>嵌套的节点应该缩进;在属性上使用双引号（字符串拼接除外）;属性名全小写，用“-”做分隔符;自动闭合标签处不能使用斜线。<html><head><title>Pagetitle</title></head><body><imgsrc="images/company_logo.png"alt="Company"><h1class="hello-world">Hello,world!</h1></body></html>HTML5doctype页面开头的doctype大写，html小写。例：<!DOCTYPEhtml><!DOCTYPEhtml><html> ...</html>字符编码采用UTF-8的编码格式。例：<metacharset=”UTF-8”><!DOCTYPEhtml><html><head><metacharset="UTF-8"></head>...</html>引入CSS,JSCSS引入使用<link><linkrel="stylesheet"href="code-guide.css">JS引入使用<script><scripttype="text/javascript"href="code-guide.js"></script>页面不允许出现style标签。属性属性名必须使用小写字母<tablecellspacing="0">...</table><tablecellSpacing="0">...</table属性值必须使用双引号包围不允许使用单引号。<scriptsrc="esl.js"></script><scriptsrc='esl.js'></script><scriptsrc=esl.js></script>属性顺序classidnamedata-*src,for,type,href,value,max-length,max,min,patternplaceholder,title,altaria-*,rolerequired,readonly,disabled标签标签名必须使用小写字母<p>HelloStyleGuide!</p><P>HelloStyleGuide!</P>1．对于无需自闭合的标签，不允许自闭合解释：常见无需自闭合标签有input、br、img、hr等。<inputtype="text"name="title"><inputtype="text"name="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–定义列表图片禁止

img

的

src

取值为空。延迟加载的图片也要增加默认的

src。解释：src

取值为空，会导致部分浏览器重新加载一次当前页面，参考：s://developer../performance/rules.html#emptysrc[建议]避免为

img

添加不必要的

title

属性。解释：多余的

title

影响看图体验，并且增加了页面尺寸。[建议]为重要图片添加

alt

属性。解释：可以提高图片加载失败时的用户体验。[建议]添加

width

和

height

属性，以避免页面抖动。[建议]有下载需求的图片采用

img

标签实现，无下载需求的图片采用CSS背景图实现。解释：产品logo、用户头像、用户产生的图片等有潜在下载需求的图片，以

img

形式实现，能方便用户下载。无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用CSS背景图实现。表单1．控件标题[强制]有文本标题的控件必须使用

label

标签将其与其标题相关联。解释：有两种方式：将控件置于

label

。label

的

for

属性指向控件的

id。推荐使用第一种，减少不必要的

id。如果DOM结构不允许直接嵌套，则应使用第二种。示例：<label><inputtype="checkbox"name="confirm"value="on">我已确认上述条款</label><labelfor="username">用户名：</label><inputtype="textbox"name="username"id="username">2．按钮[强制]使用

button

元素时必须指明

type

属性值。解释：button

元素的默认

type

为

submit，如果被置于

form

元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出

type

属性。示例：<buttontype="submit">提交</button><buttontype="button">取消</button>[建议]尽量不要使用按钮类元素的

name

属性。解释：由于浏览器兼容性问题，使用按钮的

name

属性会带来许多难以发现的问题。具体情况可参考此文。3．可访问性(A11Y)[建议]负责主要功能的按钮在DOM中的顺序应靠前。解释：负责主要功能的按钮应相对靠前，以提高可访问性。如果在CSS中指定了

float:right

则可能导致视觉上主按钮在前，而DOM中主按钮靠后的情况。示例：<style>.buttons.button-group{float:right;}</style><divclass="buttons"><divclass="button-group"><buttontype="submit">提交</button><buttontype="button">取消</button></div></div><style>.buttonsbutton{float:right;}</style><divclass="buttons"><buttontype="button">取消</button><buttontype="submit">提交</button></div>[建议]当使用JavaScript进行表单提交时，如果条件允许，应使原生提交功能正常工作。解释：当浏览器JS运行错误或关闭JS时，提交功能将无法工作。如果正确指定了

form

元素的

action

属性和表单控件的

name

属性时，提交仍可继续进行。示例：<formaction="/login"method="post"><p><inputname="username"type="text"placeholder="用户名"></p><p><inputname="password"type="password"placeholder="密码"></p></form>[建议]在针对移动设备开发的页面时，根据容类型指定输入框的

type

属性。解释：根据容类型指定输入框类型，能获得能友好的输入体验。示例：<inputtype="date">多媒体[建议]当在现代浏览器中使用

audio

以与

video

标签来播放音频、视频时，应当注意格式。解释：音频应尽可能覆盖到如下格式：MP3WAVOgg视频应尽可能覆盖到如下格式：MP4WebMOgg[建议]在支持

HTML5

的浏览器中优先使用

audio

和

video

标签来定义音视频元素。[建议]使用退化到插件的方式来对多浏览器进行支持。示例：<audiocontrols><sourcesrc="audio.mp3"type="audio/mpeg"><sourcesrc="audio.ogg"type="audio/ogg"><objectwidth="100"height="50"data="audio.mp3"><embedwidth="100"height="50"src="audio.swf"></object></audio><videowidth="100"height="50"controls><sourcesrc="video.mp4"type="video/mp4"><sourcesrc="video.ogg"type="video/ogg"><objectwidth="100"height="50"data="video.mp4"><embedwidth="100"height="50"src="video.swf"></object></video>[建议]只在必要的时候开启音视频的自动播放。[建议]在

object

标签部提供指示浏览器不支持该标签的说明。示例：<objectwidth="100"height="50"data="something.swf">DONOTSUPPORTTHISTAG</object>js生成标签在js文件中生成标签让容更难查找，更难编辑，性能更差，应该尽量避免这种情况的出现减少标签数量在编写HTML代码时，需要尽量避免多余的父节点;很多时候，需要通过迭代和重构来使HTML变得更少;任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。例：<spanclass="avatar"><imgsrc="..."></span><imgclass="avatar"src="...">使用高于完美尽量组训HTML标准和语义，但是不应该以浪费实用性作为代价；任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。整体结构HTML基础设施文件应以“<!DOCTYPE>”首行顶格开始，推荐使用“<!DOCTYPEhtml>”。必须申明文档的编码charset，且与文件本身编码保持一致，推荐使用UTF-8编码<metacharset="utf-8"/>。根据页面容和需求填写适当的keywords和description。页面title是极为重要的不可缺少的一项。123456789101112131415<!DOCTYPEhtml><html><head><meta

charset="utf-8"/><title>NEC：更好的CSS方案</title><meta

name="keywords"

content=""/><meta

name="description"

content=""/><meta

name="viewport"

content="width=device-width"/><link

rel="stylesheet"

href="css/style.css"/><link

rel="shortcuticon"

href="img/favicon.ico"/><link

rel="apple-touch-icon"

href="img/touchicon.png"/></head><body></body></html>结构顺序和视觉顺序基本保持一致按照从上至下、从左到右的视觉顺序书写HTML结构。有时候为了便于搜索引擎抓取，我们也会将重要容在HTML结构顺序上提前。用div代替table布局，可以使HTML更具灵活性，也方便利用CSS控制。table不建议用于布局，但表现具有明显表格形式的数据，table还是首选。结构、表现、行为三者分离，避免联使用link将css文件引入，并置于head中。使用script将js文件引入，并置于body底部。保持良好的简洁的树形结构每一个块级元素都另起一行，每一行都使用Tab缩进对齐（head和body的子元素不需要缩进）。删除冗余的行尾的空格。使用4个空格代替1个Tab（大多数编辑器中可设置）。对于容较为简单的表格，建议将tr写成单行。你也可以在大的模块之间用空行隔开，使模块更清晰。1234567891011121314151617181920<body><div

class="m-side">

<div

class="side">

<div

class="sidein">

<div

class="sideblk">

<div

class="m-hd3"><h3

class="tit">热门标签</h3></div>

...

</div>

<div

class="sideblk">

<div

class="m-hd3"><h3

class="tit">最热TOP5</h3><a

href="#"

class="s-fc02f-fr">更多»</a></div>

...

</div>

</div></div></body>CSS缩进缩进使用Tab（4个空格）。.element{position:absolute;top:10px;left:10px;border-radius:10px;width:50px;height:50px;}分号每个属性声明末尾都要加分号。.element{width:20px;height:20px;}空行文件最后保留一个空行;‘}’结尾后跟一个空行。.element{...}.dialog{color:red;&:after{...}}换行每个属性独占一行。.element{color:red;background-color:black;}注释注释统一用‘/**/’，具体参照例中写法;缩进与下一行代码保持一致;可位于一个代码行的末尾,与代码间隔一个空格。例：/*Modalheader*/.modal-header{/*50px*/width:50px;color:red;/*colorred*/}引号最外层统一使用双引号;url的容要用引号;属性选择器找那个的属性值需要引号。.element:after{content:"";background-image:url("logo.png");}li[data-type="single"]{...}命名命名使用小写字母，以“-”分隔;Id采用驼峰式命名;/*class*/.element-content{...}/*id*/#myDialog{...}颜色颜色十六进制用小写字母，尽量使用简写;例：.element{color:#abcdef;background-color:#012;}杂项不允许有空的规则;元素选择器用小写字母;属性值‘0’后面不加单位;不要在一个文件里出现两个一样的规则;用border:0;代替border:none;;尽量少用“*”选择器。JavaScript缩进缩进使用Tab（4个空格）varx=1,y=1;if(x<y){x+=10;}else{x+=1;}分号以下几种情况后需加分号：变量声明表达式returnthrowbreakcontinuedo-while/*vardeclaration*/varx=1;/*expressionstatement*/x++;/*do-while*/do{x++;}while(x<10);空行以下几种情况需要空行：变量声明后;注释前;代码块后;文件最后保留一个空行。换行以下几种情况不需要换行：解释：超长的不可分割的代码允许例外,比如复杂的正则表达式,长字符串不在例外之列。下列关键字后：else,catch,finally代码块‘{’前以下几种情况需要换行：代码块‘{’后和‘}’前变量复制后单行注释双斜线后，必须跟一个空格;缩进与下一行代码保持一致;可位于一个代码行的末尾,与代码间隔一个空格。if(condition){//ifyoumadeithere,thenallsecuritycheckspassedallowed();}varzhangsan='zhangsan';//onespaceaftercode多行注释最少三行，“*”后跟一个空格。/**onespaceafter'*'*/varx=1;文件注释文件顶部必须包含文件注释，用file标识文件说明/***fileDescribethefile*/8.命名空间注释命名空间使用namespace标识/***namespace*/varutil={};9．类注释/***parm*return*/functionDeveloper(){//constructorbody}变量命名变量名采用驼峰式命名（除对象的属性外）varthisIsMyName;‘id’在变量名中‘i’大写例：IdvargoodId;‘url’在变量名中全大写varreportURL;‘Android’在变量名写第一个字母varAndroidVersion;‘iOS’在变量名中小写第一个字母，大写后两个字母variOSVersion;常量全大写，用下划线varMAX_COUNT=10;构造函数，大写第一个字母functionPerson(name){=name;}变量声明每个var只能声明一个变量。varhangModules=[];varmissModules=[];varvisited={};数组、对象对象属性名不需要加引号;对象以缩进的形式书写,不要写在一行。vara={b:1,c:2};括号下列关键字后必须有大括号（即使代码块的容只有一行）If，else,for,while,do,switch,try,catch,finally,with。Null使用场景：初始化一个将来可能被赋值为对象的变量与已经初始化的变量做比较作为一个参数为对象的函数的调用传参作为一个返回对象的函数的返回值不使用场景：不要用null来判断函数调用时有无传参不要与未初始化的变量做比较//notgoodfunctiontest(a,b){if(b===null){//notmeanbisnotsupply...}}vara;if(a===null){...}//goodvara=null;if(a===null){...}Undefined永远不要直接使用undefined进行变量判断;使用typeof和字符串‘undefined’对变量进行判断。//notgoodif(person==undefined){...}//goodif(typeofperson=='undefined'){...}Jshint比较用‘==’，‘!=’;if(a==1){a++;}不要在层作用域的代码里声明了变量,之后却访问了外层作用域的同名变量;//notgoodvarx=1;functiontest(){if(true){varx=0;}x+=1;}变量不要先使用后声明;不要在同个作用域下声明同名变量;不要在一些不需要的地方加括号,例：delete(a.b);不要使用未声明的变量;数组中不要存在空元素;//notgoodvarnums=[];for(vari=0;i<10;i++){(function(i){nums[i]=function(j){returni+j;};}(i));}不要声明了变量却不使用;不要在循环部声明函数;//notgoodfunctiontest(){console.log(x);varx=1;}杂项不要混用Tab和Space;不要在一处使用多个Tab或Space;行尾不要有空白字符;不允许有空的代码块。//notgoodvara=1;functionPerson(){//notgoodvarme=this;//goodvar_this=this;//goodvarthat=this;//goodvarself=this;}//goodswitch(condition){case1:case2:...break;case3:...//whyfallthroughcase4...break;//whynodefault}//notgoodwithemptyblockif(condition){}E-JSON数据传输标准JSON数据类型JSON（JavaScriptObjectNotation）是一种轻量级，基于文本，语言无关的数据交换格式。其包括了基本数据类型4种和复合数据类型2种，共6种数据类型。在下面章节中，JSON数据类型的表示法为JSON+空格+数据类型，如：JSONArray。传输的数据，包括对象属性以与数组成员，

必须(MUST)

是6种JSON数据类型之一。

杜绝(MUSTNOT)

使用function、Date等js对象类型。基本数据类型Number可以表示整数和浮点数。Boolean可以表示真假，值为true或false。String表示一个字符串。Null通常用于表示空对象。"true"和true，这两个数据代表的是不同的数据类型。非字符串类型数据输出时一定

不要(MUSTNOT)

为两端加上双引号，否则可能产生不希望的后果（如if中判断"false"的结果是true）。其他容易产生错误的例子如：0和"0"等。复合数据类型Object是无序的集合，以键值对的方式保持数据。一个Object中包含零到多个name/value的数据，数据间以逗号(,)分隔。name为String类型，value可以是任意类型的数据。Object的最后一个元素之后一定

不要(MUSTNOT)

加上分隔符的逗号，否则可能导致解析出错。Array(数组)为多个值的有序集合，数组元素间以逗号(,)分隔。响应头status响应的status

必须(MUST)

为200。通常JSON数据被用于通过XMLRequest对象访问，通过javascript进行处理。返回错误的状态码可能导致错误不被响应，数据不被处理。Content-TypeContent-Type字段定义了响应体的类型。一般情况下，浏览器会根据该类型对容进行正确的处理。对于传输JSON数据的响应，Content-Type

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

前端代码编写规范标准

文档简介

温馨提示

最新文档

评论

前端代码编写规范标准

文档简介

温馨提示

最新文档

评论

相关文档