前端单体编码有哪些规范
作者&投稿：籍屈 （若有异议请与网页底部的电邮联系）
这次给大家带来前端单体编码有哪些规范，使用前端单体编码规范的注意事项有哪些，下面就是实战案例，一起来看一下。
不论是前端还是后台代码，编码规范是尤其重要的，特别是大的项目中，在想开启之初就规范考代码、格式、和要求，会减少很多工作量的，有利于代码的后期维护。
前端单体编码规范整理表No范畴
验证内容1
页面设计
列表标题居中显示。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 - 段落
h1,h2,h3,h4,h5,h6 - 层级标题
strong,em - 强调
ins - 插入
del - 删除
abbr - 缩写
code - 代码标识
cite - 引述来源作品的标题
q - 引用
blockquote - 一段或长篇引用
ul - 无序列表
ol - 有序列表
dl,dt,dd - 定义表格11 HTML-书写规范性 属性：
1.属性名必须使用小写字母；
2.属性值必须用双引号包围；
3.自定义属性建议以 xxx- 为前缀，推荐使用 data- ，如<ol data-ui-type="Select"></ol>。12 HTML-书写规范性 编码1：
1.使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE。
2.页面必须包含 title 标签声明标题。
3.title 必须作为 head 的直接子元素，并紧随 charset 声明之后。
例<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>13HTML-书写规范性编码2：
1.保证 favicon 可访问，（根目录放置 favicon.ico 文件，使用 link 指定 favicon）
如<link rel="shortcut icon" href="path/to/favicon.ico">；
2.若项目为移动端或者为响应式布局，必须指定页面的 viewport。
14 HTML-书写规范性 引入：
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 影响看图体验，并且增加了页面尺寸)；
3.为重要图片添加 alt 属性；
4.有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现。
16 HTML-书写规范性 表单：
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）；
6.元素 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";
字体 操作系统 Family Name
宋体 (中易宋体) Windows SimSun
黑体 (中易黑体) Windows SimHei
微软雅黑 Windows Microsoft YaHei
微软正黑 Windows Microsoft JhengHei
华文黑体 Mac/iOS STHeiti
冬青黑体 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.每一行最多只包含一条语句，把;(分号)放到每条简单语句的结尾处；
2.return 语句
一条有返回值的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下拉列表文字太长不换行的解决方法
HTML与CCS结合
五笔补码有规则吗
加识别码仍不足四码时，击空格键。加识别码的作用是减少重码，加快选字。二、王码86版五笔对末笔画以及字型的特殊约定 86版五笔对于某些汉字所取的末笔画和标准笔顺有所不同（98版以及GB18030对此似有修正），以至不少常用汉字的五笔编码令人觉得匪夷所思。兹将有关规定照录如下：1、末字根为“力...
HS编码为39042100 ,初级形状未塑化的聚氯乙烯 单元单体的种类和比例是...
单体是氯乙烯，比例100%，
中心法则的基因编码
哺乳动物细胞里的基因编码产生一种糖蛋白PrP。人的PrP基因位于20号染色体短臂，PrP由253个氨基酸残基组成，在氨基端有22个氨基酸组成的信号 肽。在正常脑组织中的PrP称为PrPc，相对分子质量为33 000～35 000，对蛋白酶敏感。在病变脑组织中的PrP称为PrPsc，相对分子质量为27 000～30 000，是PrPc中的...
工程编号是什么意思
问题五：工程符号Φ8 是什么意思 直径8，单位一般是mm 问题六：施工号是什么意思 工号应该是单体工程吧 只是名称，像人的名字一样代号 问题七：一些建设工程上面标着项目编号，有的写着工程编码，这俩有什么区别呢？？？ 5分 项目包括工程，一个项目有多个工程组成，每个项目与工程都有一个特定的...
亚加力的海关商品编码
4.进出口时，向海关申报的报关单申报要素有：（1）品名；（2）外观；（3）成分含量；（4）单体单元的种类和比例。二、非初级形状的聚甲基丙烯酸甲酯：按照用途归入相应的海关编码 1.作为离子交换剂用，海关编码39140000 进出口时，向海关申报的报关单申报要素有：（1）品名；（2）用途；（3）外观；...
乳糖操纵子
lac位点通过反式作用突变被鉴定是为编码阻遏蛋白的基因。操纵基因是原来通过组成型突变鉴别出的,称为“Oc”,其分布特点提供了第一个顺式元件的证据,它是有功能的,但本身不编码。与OC突变相邻接的结构基因以组成型表达,这是由于突变改变了操纵基因,使阻遏蛋白不能与之结合。这样阻遏蛋白就不能阻止RNA聚合酶起始转录...
...种主要生物大分子单体的碳骨架与功能基因各有哪些特征?这4种生物大...
中间纤维有共同的基本结构，即构建成一个中央α螺旋杆状区，两侧则是大小和化学组成不同的端区。端区的多样性决定了中间纤维外形和性质的差异和特异性。以上这些结构单元并非是一成不变的，而是随细胞的生命活动而呈现高度的动态性，它们均由单体蛋白以较弱的非共价键结合在一起，构成纤维型多聚体，很...
什么是R.N.A.?
之后核糖体会帮助带着氨基酸的转移RNA与信使RNA进行碱基配对，进而将信使RNA解码。由于组成密码子的碱基共有四种，且以三字母为一单位，因此可能存在的密码子一共有64种（43）。与这些密码子对应的标准氨基酸有20种，因此大多数氨基酸对应了一种以上的密码子。另外有三个密码子称为“终止密码子”或“无...
PVC期货有哪些交易规则
（二）涨跌停板制度 PVC合约交割月份以前的月份涨跌停板幅度为上一个交易日结算价的4%，交割月份的涨跌停板幅度为上一交易日结算价的6%。（三）限仓制度 限仓是指交易所规定会员或客户可以持有的，按单边计算的某一合约投机头寸的最大数额。同一客户在不同期货公司会员处开有多个交易编码，各交易编码上...
报关申报6要素有哪些
报关申报6要素包括如下：1、外观；2、成分含量；3、单体单元的种类和比例；4、级别；5、产品用途；6、海关商品编码。报关的基本程序：1、报关单的填制：报关单是报关的主要文件，需要根据货物的实际情况准确填写；2、提交报关单及相关单证：除了报关单，还需提交合同、发票、装箱单等相关单证；3、海关...
卞蕊凯帝： Javascript编码规范HTML编码规范CSS编码规范Less编码规范E-JSON数据传输标准模块和加载器规范包结构规范项目目录结构规范图表库标准
解放区19153521556： java编码规范有哪些? - ？
卞蕊凯帝： JAVA代码规范: (1) 类名首字母应该大写.字段、方法以及对象(句柄)的首字母应小写.对于所有标识符,其中包含的所有单词都应紧靠在一起,而且大写中间单词的首字母.例如: ThisIsAClassName thisIsMethodOrFieldName 若在定义...
解放区19153521556： 简述符合web标准的HTML代码编写规范 - ？
卞蕊凯帝： 1、统一编码UTF82、每一个模块进行注释,省的改(或者别人改)的时候找不着,也是个良好的习惯.3、尽量通过外部文件引入css,减小html文档体积,有利于seo.4、div尽量在三层以内,还是从seo方面考虑.5、命名规范,比如“nav”...
解放区19153521556： java程序员有哪些应该注意的编码规范? - ？
卞蕊凯帝： 一、规范存在的意义 应用编码规范对于软件本身和软件开发人员而言尤为重要,有以下几个原因:1、好的编码规范可以尽可能的减少一个软件的维护成本 , 并且几乎没有任何一个软件,在其整个生命周期中,均由最初的开发人员来维护;2、...
解放区19153521556： java程序员有哪些应该注意的编码规范?？
卞蕊凯帝： Java编码规范: 尽量使用完整的英文描述符 采用适用于相关领域的术语 采用大小写混合使名字可读 尽量少用缩写,但如果用了,必须符合整个工程中的统一定义 避免使用长的名字(小于 15 个字母为正常选择) 避免使用类似的名字,或者仅仅...
解放区19153521556： 网页代码有什么规范? - ？
卞蕊凯帝： (一)xhtml的规范:1、所有的xhtml代码英文小写2、属性的值一定要用双引号(＂＂)括起来,且一定要有值3、每个标签都要有开始和结束,且要有正确的层次4、表现与结构完全分离,代码中尽量不涉及任何的表现元素,如style、font、...
解放区19153521556： Java程序编码规范是什么? ？
卞蕊凯帝： 命名规范 定义这个规范的目的是让项目中所有的文档都看起来像一个人写的,增加可读性,减少项目组中因为换人而带来的损失.(这些规范并不是一定要绝对遵守,但是...
解放区19153521556： 计算机软件开发到底有哪些规范? - ？
卞蕊凯帝： 你想问编码规范.还是设计规范 还是界面规范 还是操作规范 编码规范: 代码书写规范(如程序结构...) 代码注释规范(文件头注释、类注释、方法注释、注释的类型...) 代码命名规范(属性、方法、字段、事件、...如何是规范命名)
解放区19153521556： 软件代码编写规范标准有哪些 - ？
卞蕊凯帝： 软件编程规范有助于团队开发,不同的公司都不太相同,建议按照公司要求进行.一般有几种类型:注释规范、变量命名规范、方法调用规范等. 希望帮助到你.
解放区19153521556： 编程要遵循哪些规则? - ？
卞蕊凯帝： 这个问题很广.列出一些编码(非整开发阶段)上的供参考: 1.语法规则.语言是程序设计的基本核心工具,语法是能让你表达具体问题的 解决步骤的标准描述规范、并且能让解释系统对照内部指令表连续联系记号直至＂读懂＂的、然后顺利翻译成让计算机＂读懂＂的逻辑映射在文本序列的集合. 2.源代码规范: 风格,包括文件结构、程序版式、命名、选择语义使用,包括团队整套规范. 3.模式/算法设计: 具体包括优先折中选择,移植性、高效率,包括复用/通用性等. 4.数据结构:如据问题需求操作数据的逻辑要依照联系物理的规则.
