前端代码编写规范.docx
- 文档编号：28471536
- 上传时间：2023-07-14
- 格式：DOCX
- 页数：32
- 大小：26.97KB
前端代码编写规范.docx
《前端代码编写规范.docx》由会员分享，可在线阅读，更多相关《前端代码编写规范.docx（32页珍藏版）》请在冰豆网上搜索。
前端代码编写规范
前端代码编写规
命名规那么
1.工程名称
工程名称驼峰式命名。
例：
myProject
2.目录命名
采用单数命名法。
例：
cssimgfontjs
3.JS文件命名
字母全部小写，单词之间用“-〞。
例：
popup-window.js
4.CSS文件命名
字母全部小写，单词之间用“-〞。
例：
popup-window.css
5.HTML文件命名
文件名称驼峰式命名。
例：
riverMonitor.html
HTML
1.语法
缩进使用Tab〔4个空格〕;
解释：
对于非HTML标签之间的缩进,比方script或style标签容缩进，与script或style标签的缩进同级。
- first
- second
嵌套的节点应该缩进;
在属性上使用双引号〔字符串拼接除外〕;
属性名全小写，用“-〞做分隔符;
自动闭合标签处不能使用斜线。
2.HTML5doctype
页面开头的doctype大写，html小写。
例：
DOCTYPEhtml>
DOCTYPEhtml>
...
3.字符编码
采用UTF-8的编码格式。
例：
DOCTYPEhtml>
...
4.引入CSS,JS
CSS引入使用
JS引入使用
页面不允许出现style标签。
5.属性
1.属性名必须使用小写字母
--good-->
--bad-->
2.属性值必须使用双引号包围 不允许使用单引号。 --good--> --bad--> 6.属性顺序 class id name data-* src,for,type,href,value,max-length,max,min,pattern placeholder,title,alt aria-*,role required,readonly,disabled 7.标签 标签名必须使用小写字母 --good--> HelloStyleGuide!
--bad-->
HelloStyleGuide!
1．对于无需自闭合的标签，不允许自闭合
解释：
常见无需自闭合标签有input、br、img、hr等。
--good-->
--bad-->
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 取值为空，会导致局部浏览器重新加载一次当前页面，参考：
s:
//developer../performance/rules.html#emptysrc
[建议]防止为 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构造不允许直接嵌套，那么应使用第二种。
例如：
2．按钮
[强制]使用 button 元素时必须指明 type 属性值。
解释：
button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交。
为显示区分其作用方便理解，必须给出 type 属性。
例如：
[建议]尽量不要使用按钮类元素的 name 属性。
解释：
由于浏览器兼容性问题，使用按钮的 name 属性会带来许多难以发现的问题。
具体情况可参考此文。
3．可访问性（A11Y）
[建议]负责主要功能的按钮在DOM中的顺序应靠前。
解释：
负责主要功能的按钮应相对靠前，以提高可访问性。
如果在CSS中指定了 float:
right 那么可能导致视觉上主按钮在前，而DOM中主按钮靠后的情况。
例如：
--good-->
--bad-->
[建议]当使用JavaScript进展表单提交时，如果条件允许，应使原生提交功能正常工作。
解释：
当浏览器JS运行错误或关闭JS时，提交功能将无法工作。
如果正确指定了 form 元素的 action 属性和表单控件的 name 属性时，提交仍可继续进展。
例如：
[建议]在针对移动设备开发的页面时，根据容类型指定输入框的 type 属性。
解释：
根据容类型指定输入框类型，能获得能友好的输入体验。
例如：
10.多媒体
[建议]当在现代浏览器中使用 audio 以及 video 标签来播放音频、视频时，应当注意格式。
解释：
音频应尽可能覆盖到如下格式：
∙MP3
∙WAV
∙Ogg
视频应尽可能覆盖到如下格式：
∙MP4
∙WebM
∙Ogg
[建议]在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素。
[建议]使用退化到插件的方式来对多浏览器进展支持。
例如：
[建议]只在必要的时候开启音视频的自动播放。
[建议]在 object 标签部提供指示浏览器不支持该标签的说明。
例如：
11.js生成标签
在js文件中生成标签让容更难查找，更难编辑，性能更差，
应该尽量防止这种情况的出现
12.减少标签数量
在编写HTML代码时，需要尽量防止多余的父节点;
很多时候，需要通过迭代和重构来使HTML变得更少;
任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
例：
--Notwell-->
--Better-->
13.使用高于完美
尽量组训HTML标准和语义，但是不应该以浪费实用性作为代价；
任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
14.整体构造
HTML根底设施
∙文件应以“
DOCTYPE......>〞首行顶格开场，推荐使用“
DOCTYPEhtml>〞。
∙必须申明文档的编码charset，且与文件本身编码保持一致，推荐使用UTF-8编码
∙根据页面容和需求填写适当的keywords和description。
∙页面title是极为重要的不可缺少的一项。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
DOCTYPEhtml>
构造顺序和视觉顺序根本保持一致
∙按照从上至下、从左到右的视觉顺序书写HTML构造。
∙有时候为了便于搜索引擎抓取，我们也会将重要容在HTML构造顺序上提前。
∙用div代替table布局，可以使HTML更具灵活性，也方便利用CSS控制。
∙table不建议用于布局，但表现具有明显表格形式的数据，table还是首选。
构造、表现、行为三者别离，防止联
∙使用link将css文件引入，并置于head中。
∙使用script将js文件引入，并置于body底部。
保持良好的简洁的树形构造
∙每一个块级元素都另起一行，每一行都使用Tab缩进对齐〔head和body的子元素不需要缩进〕。
删除冗余的行尾的空格。
∙使用4个空格代替1个Tab〔大多数编辑器中可设置〕。
∙对于容较为简单的表格，建议将tr写成单行。
∙你也可以在大的模块之间用空行隔开，使模块更清晰。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
--侧栏容区-->
--热门标签-->
...
《贝的故事》教案4.docx
