前端单体编码规范整理

时间 2019-11-16

原文原文链接

不管是前端仍是后台代码，编码规范是尤为重要的，特别是大的项目中，在想开启之初就规范考代码、格式、和要求，会减小不少工做量的，有利于代码的后期维护。
欢迎你们继续整理。
前端单体编码规范整理表 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 标签使用必须符合标签嵌套规则，如 div 不得置于 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> 13 HTML-书写规范性编码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.只在必要的时候开启音视频的自动播放；php

在 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 5px 25 CSS-书写规范性样式代码应独立保存在后缀名为.css的文件中，非特殊状况下不得写行间样式。 26 CSS-书写规范性 RGB颜色值必须使用十六进制记号形式 #rrggbb。不容许使用 rgb()。 27 CSS-书写规范性颜色：
1.RGB颜色值必须使用十六进制记号形式 #aabbcc，不容许使用 rgb();
2.颜色值能够缩写时，必须使用缩写形式;如#fff,#000
3.颜色值不容许使用命名色值；如使用red green等不肯定值
4.颜色值都统一使用小写英文字母。 28 CSS-书写规范性字体1：css

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 Hei 29 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 <div class="makes-sense"></div>'. 46 JS-程序疏通性不要冗余程序，如下的例子做为参考：
・存在未使用的子程序
・重复初始化
・定义未使用的变量 47 JS-逻辑正确性没有奇怪的逻辑（空函数及未处理的分支等） 48 JS-逻辑正确性文本输入框字符串长度以两点为基础作限制：一、业务上是否要求；二、数据库字段长度是否知足 49 JS-逻辑正确性查询完成后，查询条件应该保留在对应的输入框中 50 JS-逻辑正确性是否对查询结果进行了排序。 51 JS-逻辑正确性查询区域的共计条数应该为当前查询的全部数据的总条数。而不是当前页面的显示条数 52 JS-逻辑正确性查询条件输入框应该去除先后空格后查询转载于猿2048:➧《前端单体编码规范整理》前端