或者 标签提供参数。 : HTML5 中新增的,标签定义了一个容器，用来嵌入外部应用或者互动程序（插件）。
:该对象提供了一个安全的方式来验证用户。
: 标签为媒体元素（比如 和 ）定义媒体资源。image.png
属性顺序应该按照特定的顺序出现以保证易读性。可以不按照下列标准，但是需要有规律，避免混杂交错。特别是使用Vue指令，事件、属性、绑定属性，一堆一堆放一起，避免穿插，降低可读性 。
class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
💡Tips： v-bind（ : ）、v-on（ @ ）一堆放，具体规范需要遵从 “ 易读性 ”、“ 复杂度 ”、 “ 标准化 ”、“ 语义化 ” 等。 不过要避免过度规范，过犹不及，还得在保证实用性的情况下规范代码，毕竟代码才是主体。还有按功能模块编写注释也很重要！
#
👉 三、CSS 代码规范编写CSS代码时，缩进规范参照 HTML 缩进规范，如果加装了 “ 预编译器（ less、Scss ） ” 的话， 结构缩进也参照 HTML 的缩进规范。
空格规范① 以下几种情况不需要空格：
属性名后多个规则的分隔符','前!important '!'后属性值中'('后和')'前行末不要有多余的空格② 以下几种情况需要空格：
属性值前选择器 '>', '+', '~' 前后' { ' 前!important ' ! ' 前@else 前后属性值中的 ', '后注释 '/' 后和 '/' 前案例如下：
/ not good /.element {
color :red! important;
background-color: rgba(0,0,0,.5);
}
/ good /.element {
color: red !important;
background-color: rgba(0, 0, 0, .5);
}
/ not good /.element ,.dialog{
...
}
/ good /.element,.dialog {
}
/ not good /.element>.dialog{
...
}
/ good /.element > .dialog{
...
}
/ not good /.element{
...
}
/ good /.element {
...
}
空行 / 换行 规范① 以下几种情况需要空行：
文件最后保留一个空行'}' 后最好跟一个空行，包括scss中嵌套的规则属性之间需要适当的空行，具体见属性声明顺序② 以下几种情况不需要换行：
'{' 前③ 以下几种情况需要换行：
'{' 后和 '}' 前每个属性独占一行多个规则的分隔符 ',' 后/ 空行 // not good /.element {
...
}.dialog {
color: red;
&:after {
...
}
}
/ good /.element {
...
}
.dialog {
color: red;
&:after {
...
}
}
/ 换行 // not good /.element{
color: red; background-color: black;}
/ good /.element {
color: red;
background-color: black;
}
/ not good /.element, .dialog {
...
}
/ good /.element,.dialog {
...
}
注释注释统一用'/ /'（scss中也不要用'//'），具体参照右边的写法；
缩进与下一行代码保持一致；
可位于一个代码行的末尾，与代码间隔一个空格。
案例如下：
/ not good /.element{
color: red; background-color: black;}
/ good /.element {
color: red;
background-color: black;
}
/ not good /.element, .dialog {
...
}
/ good /.element,.dialog {
...
}
命名规则类名使用小写字母，以中划线分隔id 采用驼峰式命名scss 中的变量、函数、混合、placeholder采用驼峰式命名案例如下：
/ class /.element-content {
...
}
/ id /
myDialog {
...
}
/ 变量 /$colorBlack: #000;
/ 函数 /@function pxToRem($px) {
...
}
/ 混合 /@mixin centerBlock {
...
}
/ placeholder /%myDialog {
...
}
属性声明顺序相关的属性声明按右边的顺序做分组处理，组之间需要有一个空行。如果对应属性有简写形式，在明确简写形式的属性值的情况下，一般建议简写！
👉 四、JavaScript 代码规范
缩进JavaScript 代码缩进参照 HTML缩进规则，以 “ 简洁 ”、“ 易读 ” 为主。
单行长度不要超过 80 ，但如果编辑器开启 word wrap 可以不考虑单行长度。该换行的地方换行，避免因为代码过长导致观看不便。
案例如下：
// TruesetTimeout(() => {
...
}, 1000);
// falsesetTimeout(() => {
...}, 1000);
分号分号这种对于美观性影响不大的符号，在语法必须的情况下，不可省略（如： for(表达式1; 表达式2; 表达式3;)）。关于规范，不同的公司有着不同的规范，有些公司建议做个” 无分号 “强者，有些建议必写，这个是可选的。
以下几种情况后需加分号：
变量声明表达式returnthrowbreakcontinuedo-while/ var declaration /var x = 1;
/ expression statement /x++;
/ do-while /do {
x++;
} while (x < 10);
空格、空行、换行➡️ 以下几种情况不需要空格：
对象的属性名后前缀一元运算符后后缀一元运算符前函数调用括号前无论是函数声明还是函数表达式，'(' 前不要空格数组的 '[' 后和 ']' 前对象的 '{' 后和 '}' 前运算符 '(' 后和 ')' 前➡️ 以下几种情况需要空格：
二元 / 三元运算符前后代码块 ' { ' 前下列关键字前：else, while, catch, finally下列关键字后：if, else, for, while, do, switch, case, try, catch, finally, with, return, typeof单行注释 ' // ' 后（若单行注释和代码同行，则 ' // ' 前也需要），多行注释 '*' 后对象的属性值前for循环，分号后留有一个空格，前置条件如果有多个，逗号后留一个空格无论是函数声明还是函数表达式，'{'前一定要有空格函数的参数之间单行 / 多行 注释，注释符合后都需要空格➡️ 以下几种情况需要空行：
变量声明后（当变量声明在代码块的最后一行时，则无需空行）注释前（当注释在代码块的第一行时，则无需空行）代码块后（在函数调用、数组、对象中则无需空行）文件最后保留一个空行➡️ 以下几种情况不需要换行：
下列关键字后：else, catch, finally代码块'{'前➡️以下几种情况需要换行：
代码块'{'后和'}'前变量赋值后换行的地方，行末必须有','或者运算符；
案例如下：
// not goodconst fnName_1 = (list=[])=>{
let personInfo={
name :'xxx',
age :20,
sex: '男'
}
// 循环输出list内容
for(let i=0;i<=list.length;i++){
console.log(list[i]==='匿名'? list[i]: '***' )
}
return personInfo;
}
// goodconst fnName_1 = ( list = [] ) => {
let personInfo = {
name: 'xxx',
age: 20,
sex: '男'
}
// 循环输出list内容
for( let i = 0; i <= list.length; i++ ) {
console.log(list[i] === '匿名' ? list[i] : '***' )
}
// 输出信息
return personInfo;
}
方法参数注释/**
@func
@desc 一个带参数的函数
@param {string} a - 参数a
@param {number} b=1 - 参数b默认值为1
@param {string} c=1 - 参数c有两种支持的取值1—表示x2—表示xx
@param {object} d - 参数d为一个对象
@param {string} d.e - 参数d的e属性
@param {string} d.f - 参数d的f属性
@param {object[]} g - 参数g为一个对象数组
@param {string} g.h - 参数g数组中一项的h属性
@param {string} g.i - 参数g数组中一项的i属性
@param {string} [j] - 参数j是一个可选参数*/function foo(a, b, c, d, g, j) {
...
}
引号： 统一使用 单引号// not goodvar x = "test";
// goodvar y = 'foo', z = '
';
变量命名标准变量采用小驼峰式命名，语法： thisNameText（除了对象的属性外，主要是考虑到cgi返回的数据）'ID' 在变量名中全大写'URL' 在变量名中全大写'Android' 在变量名中大写第一个字母'iOS' 在变量名中小写第一个，大写后两个字母常量全大写，用下划线连接构造函数，大写第一个字母jquery 对象必须以 '$' 开头命名var thisIsMyName;
var goodID;
var reportURL;
var AndroidVersion;
var iOSVersion;
var MAX_COUNT = 10;
function Person(name) {
this.name = name;
}
// not goodvar body = $('body');
// goodvar $body = $('body');
变量声明一个函数作用域中所有的变量声明尽量提到函数首部，用一个var / let 声明，不允许出现两个连续的var声明。
function doSomethingWithItems(items) {
// use one var
var value = 10,
result = value + 10,
i,
len;
for (i = 0, len = items.length; i < len; i++) {
result += 10;
}
}
函数无论是函数声明还是函数表达式，'(' 前不要空格，但 '{' 前一定要有空格；
函数调用括号前不需要空格；
立即执行函数外必须包一层括号；
不要给 inline function 命名；
参数之间用 ', ' 分隔，注意逗号后有一个空格。
数组、对象对象属性名不需要加引号；
对象以缩进的形式书写，不要写在一行；
数组、对象最后不要有逗号。
// not goodlet a = {
'b': 1
};let a = {
b: 1};
var a = {
b: 1,
c: 2, // 最后一个不需要逗号
};
// goodlet a = {
b: 1,
c: 2
};
括号下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。
// not goodif (condition) doSomething();if (condition) doSomething();
// goodif (condition) {
doSomething();
}💬 小温有话说内容大致就这样子啦，总得来说，代码规范这件事，主要要主要代码的 ” 简洁 “、” 有条理 “、” 易读性 “ 方面着手，避免过度规范，降低代码书写效率！
今天的内卷就到这里啦！ 觉得有帮助的小伙伴，点点赞！支持一下吧
📃 参考文献Code Guide by @AlloyTeam往期内容 💨🔥 ＜ 在Vue中，为什么 v-if 和 v-for 不建议一起使用 ？ ＞
🔥 ＜ elementUi 中 树状侧边栏，机构单位 - 岗位 字典 ＞
🔥 ＜ 了解 HTTP 这一篇就够了 ：什么是 HTTP ？HTTP 和 HTTPS 有什么区别 ？ ＞
🔥 ＜Javascript技巧： Javascript 是个难泡的妞，学点技巧征服 “ 她 ” ＞
🔥 ＜ 每日小技巧：Vue常用修饰符 ＞