前端单体编码有哪些规范

一、前端单体编码有哪些规范

这次给大家带来前端单体编码有哪些规范，使用前端单体编码规范的注意事项有哪些，下面就是实战案例，一起来看一下。

不论是前端还是后台代码，编码规范是尤其重要的，特别是大的项目中，在想开启之初就规范考代码、格式、和要求，会减少很多工作量的，有利于代码的后期维护。

列表标题居中显示。2页面设计查询数据区域数据展示的样式：

1.不定长中文，不定长英文，不定长中英文，不定长英数字靠左

2.定长，定值数据居中，日期，时间，序号居中

3.金额：靠右3共通-书写规范性每个文件头是否有正确的注释4共通-书写规范性每个function是否有正确注释5共通-书写规范性每个配置文件相关内容是否有注释6共通-书写规范性每个逻辑块是否有注释7共通-书写规范性是否有未使用的变量及引用8共通-书写规范性缩进使用tab，设置tab为4个空格9 HTML-书写规范性标签1：

1.标签名必须使用小写字母，如<p></p>；

2.对于无需自闭合的标签，不允许自闭合，如 input、br、img、hr等；

3.对 HTML5中规定闭合标签，不允许省略闭合标签。10 HTML-书写规范性标签2：

1标签使用必须符合标签嵌套规则，如 p不得置于 p中，tbody必须置于 table中。

2.HTML标签的使用应该遵循标签的语义。常见标签语义 p-段落

dl,dt,dd-定义表格11 HTML-书写规范性属性：

3.自定义属性建议以 xxx-为前缀，推荐使用 data-，如<ol data-ui-type="Select"></ol>。12 HTML-书写规范性编码1：

1.使用 HTML5的 doctype来启用标准模式，建议使用大写的 DOCTYPE。

2.页面必须包含 title标签声明标题。

3.title必须作为 head的直接子元素，并紧随 charset声明之后。

<title>页面标题</title>

</head>13HTML-书写规范性编码2：

1.保证 favicon可访问，（根目录放置 favicon.ico文件，使用 link指定 favicon）

如<link rel="shortcut icon" href="path/to/favicon.ico">；

2.若项目为移动端或者为响应式布局，必须指定页面的 viewport。

1.引入 CSS时必须指明 rel="stylesheet"，如<link rel="stylesheet" href="page.css">；

2.引入 CSS和 JavaScript时可以无须指明 type属性，（有默认值）；

3.在 head中引入页面需要的所有 CSS资源，JavaScript应当放在页面末尾，或采用异步加载。（将 script放在页面中间将阻断页面的渲染）。15 HTML-书写规范性图片：

1.禁止 img的 src取值为空。延迟加载的图片也要增加默认的 src（src为空会导致页面重加载)；

2.避免为 img添加不必要的 title属性，(多余的 title影响看图体验，并且增加了页面尺寸)；

4.有下载需求的图片采用 img标签实现，无下载需求的图片采用 CSS背景图实现。

1.有文本标题的控件必须使用 label标签将其与其标题相关联；

2.使用 button元素时必须指明 type属性值；

3.负责主要功能的按钮在 DOM中的顺序应靠前，（建议如此，具体以设计为准）。17 HTML-书写规范性视频与音频：

1.在支持 HTML5的浏览器中优先使用 audio和 video标签来定义音视频元素；

2.只在必要的时候开启音视频的自动播放；

3.在 object标签内部提供指示浏览器不支持该标签的说明，如<object width="100" height="50" data="something.swf">DO NOT SUPPORT THIS TAG</object>。18 CSS-书写规范性样式行长度每行不得超过 120个字符，除非单行不可分割。19 CSS-书写规范性命名：

1.class、id必须单词全字母小写，单词间以-(中划线)分隔；

2.class、id必须代表相应模块或部件的内容或功能，不得以样式信息进行命名，如 left, right, center, red, black等单词单独出现在命名里；

3.class必须加上相应前缀（避免全局污染），如 g-代表全局样式、m-代表模块的样式、ui-代表组件的样式等，具体以项目规定为准；

4.单个样式不能允许出现!important；

5.不允许 class只用于让 JavaScript选择某些元素，创建无样式信息的 class，（使用id）；

7.同一页面，不同的标签，避免使用相同的 name与 id（同一标签可使用）。20 CSS-书写规范性当一个 rule包含多个 selector时，每个选择器声明必须独占一行。21 CSS-书写规范性属性选择器中的值必须用双引号包围。如input[name="acd"]{??}22 CSS-书写规范性当数值为 0- 1之间的小数时，省略整数部分的 0。如 opacity:.8 23 CSS-书写规范性 url()函数中的路径不加引号。如 background: url(bg.png);24 CSS-书写规范性长度为 0时须省略单位。如 padding: 0 5px25 CSS-书写规范性样式代码应独立保存在后缀名为.css的文件中，非特殊情况下不得写行间样式。26 CSS-书写规范性 RGB颜色值必须使用十六进制记号形式#rrggbb。不允许使用 rgb()。27 CSS-书写规范性颜色：

1.RGB颜色值必须使用十六进制记号形式#aabbcc，不允许使用 rgb();

2.颜色值可以缩写时，必须使用缩写形式;如#fff,#000

3.颜色值不允许使用命名色值；如使用red green等不确定值

4.颜色值都统一使用小写英文字母。28 CSS-书写规范性字体1：

1. font-family属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中，严禁使用中文。例 font-family:"Microsoft YaHei";

微软雅黑 Windows Microsoft YaHei

微软正黑 Windows Microsoft JhengHei

冬青黑体 Mac/iOS Hiragino Sans GB

文泉驿正黑 Linux WenQuanYi Zen Hei

文泉驿微米黑 Linux WenQuanYi Micro Hei29 CSS-书写规范性字体2：

1.font-family按「西文字体在前、中文字体在后」、「效果佳(质量高/更能满足需求)的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族( serif/ sans-serif)；

例 font-family: Arial, sans-serif;30 CSS-书写规范性字号：

1.需要在 Windows平台显示的中文内容，其字号应不小于 12px；

2.需要在 Windows平台显示的中文内容，不要使用除 normal外的 font-style。31 JS-书写规范性命名：

常见的几种命名：驼峰命名thisIsAnApple、帕斯卡命名ThisIsAnApple、下划线命名this_is_an_apple、中划线命名this-is-an-apple

1.方法/属性名、变量名、参数名、命名空间、函数名，必须使用驼峰命名；

2.类名、枚举名、构造函数，必须使用帕斯卡命名；

3.常量名、枚举的属性：必须使用全部大写的下划线命名法，如IS_DEBUG_ENABLED；

4.私有（保护）成员(属性、函数等)：必须以下划线_开头；

5.boolean类型的应当使用is、has等起头，表示其类型；

6.命名同时还需要关注语义，如变量名应当使用名词、函数名应当用动宾短语(getAccListData)、类名应当用名词。32 JS-书写规范性 JavaScript程序应独立保存在后缀名为.js的文件中。33 JS-书写规范性避免每行超过80个字符。34 JS-书写规范性尽量减少全局变量的使用，不要让局部变量覆盖全局变量。35 JS-书写规范性可以使用共通函数的情况下，是否使用了共通函数。36 JS-书写规范性语句：

1.每一行最多只包含一条语句，把;(分号)放到每条简单语句的结尾处；

一条有返回值的return语句不要使用()(括号)来括住返回值。如果返回表达式,则表达式应与return关键字在同一行,以避免误加分号错误；

3.避免使用continue语句，它很容易使得程序的逻辑过程晦涩难懂；

4.eval是JavaScript中最容易被滥用的方法，避免使用。37 JS-书写规范性 ES5语法必须将代码包裹成一个 IIFE(Immediately-Invoked Function Expression)，用以创建独立隔绝的定义域，防止全局命名空间被污染。38 JS-书写规范性代码中加入js严格模式‘use strict'39 JS-书写规范性变量声明：使用var或let声明变量，不指定变量将被隐式地声明为全局变量，这将对变量难以控制。40 JS-程序疏通性明智地使用真假判断，if(a== true)是不同于 if(a)的，这种判断会通过特殊的操作将其转换为 true或 false，下列表达式统统返回 false：false, 0, undefined, null, NaN,（空字符串）. 41 JS-程序疏通性避免在循环中创建函数，在简单的循环语句中加入函数是非常容易形成闭包而带来隐患。42 JS-程序疏通性避免在语句块内声明函数，严格模式下是会报语法错误。43 JS-程序疏通性用数组和对象字面量来代替数组和对象构造器，数组构造器很容易让人在它的参数上犯错。44 JS-程序疏通性三元条件判断（if的快捷方法），用三元操作符分配或返回语句，避免在复杂的情况下使用。45 JS-程序疏通性字符串统一使用单引号(‘)，不使用双引号(“)，这在创建 HTML字符串非常有好处：如

var msg='This is some HTML<p class="makes-sense"></p>'.46 JS-程序疏通性不要冗余程序，以下的例子作为参考：

?定义未使用的变量47 JS-逻辑正确性没有奇怪的逻辑（空函数及未处理的分支等）48 JS-逻辑正确性文本输入框字符串长度以两点为基础做限制：1、业务上是否要求；2、数据库字段长度是否满足49 JS-逻辑正确性查询完成后，查询条件应该保留在对应的输入框中50 JS-逻辑正确性是否对查询结果进行了排序。51 JS-逻辑正确性查询区域的共计条数应该为当前查询的所有数据的总条数。而不是当前页面的显示条数52 JS-逻辑正确性查询条件输入框应该去除前后空格后查询

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

Safari浏览器select下拉列表文字太长不换行的解决方法

二、web前端安全编码规范整合

1、在web的开发的开发过程中，前端总是在处理后端打的各种变量，变量可以包含着中的各种各样的字符，如果不对这些字符进行”特殊“处理的话，轻者导致页面不正常的显示，潜入了其他的东西，亦即页面挂了，或者弹出不应该弹出的东西，这些都是我们不期望看到的，重者可能导致密码泄露，网站的访问量突然猛增，服务器挂掉。那么怎么做好web前端安全编码规范整合。

2、1）直接显示在页面上，eg：div{%username%}/div,inputtype="text" value="{%username%}"/

3、2）在script标签中，eg：scriptvar test='{%username%}';var test="{%username%}"/script

4、3）在页面事件中，eg:divonclick="alert('{%username%}')"334455/div

5、4）在innerHTML的语境中，eg:divid="test"/div scriptvartest="{%username%}";document.getElementById('test').innerHTML=test;/script

6、5）在页面链接的url中：eg：a href="{%username%}"/a

7、下面来一个一个的分析上面提到了7种语境中的转义情况：

8、1）直接显示在页面上（简称页面html环境中）：

9、为了保证用户的本意，完完全全的展示在页面上，这类主要是防止标签的自闭合，属性中的单引号，双引号已经存在的情况下不正确显示，所以必须转义4个字符：,,",' to为转义的意思（下同）

10、倍领安全网提醒您：网络安全防范措施与应用一定要实施起来，这样才能保障信息安全。另外也可多学习一些网络安全常识和网络安全技术知识。

三、Web前端开发规范之css规范

今天小编要跟大家分享的文章是关于Web前端开发规范之css规范。Web前端作为开发团队中不可或缺的一部分，需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。来和小编一起看一看css规范的原则吧！

2、协作开发及分工：i会根据各个模块，同时根据页面相似程序，事先写**体框架文件，分配给前端人员实现内部结构&表现&行为。共用css文件base.css由i书写，协作开发过程中，每个页面请务必都要引入，此文件包含reset及头部底部样式，此文件不可随意修改。

3、class与id的使用：id是唯一的并是父级的，class是可以重复的并是子级的，所以id仅使用在大的模块上，class可用在重复使用率高及子级中。id原则上都是由我分发框架文件时命名的，为JS预留钩子的除外。

4、为JS预留钩子的命名，请以js_起始，比如：js_hide，js_show。

5、class与id命名：大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文&数字&来组合命名，如i_comment，fontred，width200。避免使用中文拼音，尽量使用简易的单词组合。总之，命名要语义化，简明化

6、规避class与id命名(此条重要，若有不明白请及时与i沟通)：a)通过从属写法规避，示例见d。b)取父级元素id/class命名部分命名，示例见d。c)重复使用率高的命名，请以自己代号加下划线起始，比如i_clear。d)a，b两条，适用于在2中已建好框架的页面，如，要在2中已建好框架的页面代码中加入新的div元素，按a命名法则：...，样式写法：#mainnav.firstnav{.......}按b命名法则：...，样式写法：.main_firstnav{.......}

7、css属性书写顺序，建议遵循：布局定位属性-->自身属性-->文本属性-->其他属性.此条可根据自身习惯书写，但尽量保证同类属性写在一起.属性列举：布局定位属性主要包括：display&list-style&position(相应的top，right，bottom，left)&float&clear&visibility&overflow;

自身属性主要包括：width&height&margin&padding&border&background。

文本属性主要包括：color&font&text-decoration&text-align&vertical-align&white-space&

8、书写代码前，提高样式重复使用率。

以上就是小编今天为大家分享的关于Web前端开发规范之css规范的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。