一.通用规范
这篇文章写的前端通用规则，另一篇文章写了关于react和vue的规范，
react和vue开发规范文档
HTML, JavaScript 和 CSS/SCSS 上的通用规则。
1.文件/资源命名
在 web 项目中，用减号（-）来分隔文件名，例如：order-detail-view.js。确保文件命名总是以字母开头而不是数字。
2.协议
不要指定引入资源所带的具体协议。
当引入图片或其他媒体文件，还有样式和脚本时，URLs 所指向的具体路径，不要指定协议部分（http:, https:），除非这两者协议都不可用。这样在请求资源协议无法确定时好用，而且能节约文件大小
//不推荐
<script src="http://cdn.com/foundation.min.js"></script>
//推荐
<script src="//cdn.com/foundation.min.js"></script>
3.文本缩进
一次缩进两个空格。
4.注释
写注释时一定要注意：写明代码的作用，重要的地方一定记得写注释
4.1 单行注释
说明：单行注释以两个斜线开始，以行尾结束
// 调用了一个函数
setTitle();
var maxCount = 10; // 设置最大量
4.2 多行注释
/*
* 代码执行到这里后会调用setTitle()函数
* setTitle()：设置title的值
*/
4.3 函数注释
/** 开始，注此处两个星
* 以星号开头，紧跟一个空格，第一行为函数说明
* @param {类型} 参数 单独类型的参数
* @param {[类型|类型|类型]} 参数 多种类型的参数
* @param {类型} [可选参数] 参数 可选参数用[]包起来
* @return {类型} 说明
@author 作者 创建时间 修改时间（短日期）改别人代码要留名
* @example 举例（如果需要）
*/
二.html规范
1.文档类型
推荐使用 HTML5 的文档类型申明： <!DOCTYPE html>.
HTML 中最好不要将无内容元素[1] 的标签闭合，例如：使用
而非 <br />.
2.脚本加载
脚本引用写在 body 结束标签之前，并带上 async 属性。
三.js规范细则
1.使用两个空格进行缩进。
2.除需要转义的情况外，字符串统一使用单引号。
3.不要定义未使用的变量。
4.关键字后面加空格。
if (condition) { ... } // ✓ ok
if(condition) { ... } // ✗ avoid
5.函数声明时括号与函数名间加空格。
function name (arg) { ... } // ✓ ok
function name(arg) { ... } // ✗ avoid
6.始终使用 === 替代 ==。
例外： obj == null 可以用来检查 null || undefined。
7.字符串拼接操作符 (Infix operators) 之间要留空格。
// ✓ ok
var x = 2
var message = 'hello, ' + name + '!'
// ✗ avoid
var x=2
var message = 'hello, '+name+'!'
8.逗号后面加空格。
9.else 关键字要与花括号保持在同一行。
10.不要丢掉异常处理中err参数。
// ✓ ok
run(function (err) {
if (err) throw err
window.alert('done')
})
// ✗ avoid
run(function (err) {
window.alert('done')
})
11.使用浏览器全局变量时加上 window. 前缀。
window.alert('hi') // ✓ ok
12.不允许有连续多行空行。
13.对于三元运算符 ? 和 : 与他们所负责的代码处于同一行
14.单行代码块两边加空格。
function foo () {return true} // ✗ avoid
function foo () { return true } // ✓ ok
15.对于变量和函数名统一使用驼峰命名法。
function my_function () { } // ✗ avoid
function myFunction () { } // ✓ ok
16.点号操作符须与属性需在同一行。
console.
log('hello') // ✗ avoid
console
.log('hello') // ✓ ok
17.函数调用时标识符与括号间不留间隔。
console.log ('hello') // ✗ avoid
console.log('hello') // ✓ ok
18.键值对当中冒号与值之间要留空白。
var obj = { 'key' : 'value' } // ✗ avoid
var obj = { 'key' :'value' } // ✗ avoid
var obj = { 'key':'value' } // ✗ avoid
var obj = { 'key': 'value' } // ✓ ok
19.构造函数要以大写字母开头。
function animal () {}
var dog = new animal() // ✗ avoid
function Animal () {}
var dog = new Animal() // ✓ ok
20.子类的构造器中一定要调用 super
class Dog {
constructor () {
super() // ✗ avoid
}
}
class Dog extends Mammal {
constructor () {
super() // ✓ ok
}
}
21.使用数组字面量而不是构造器。
var nums = new Array(1, 2, 3) // ✗ avoid
var nums = [1, 2, 3] // ✓ ok
22.避免使用 arguments.callee 和 arguments.caller。
23.避免对类名重新赋值。
class Dog {}
Dog = 'Fido' // ✗ avoid
24.不要修改使用 const 声明的变量。const声明的变量是只读的
25.避免使用常量作为条件表达式的条件（循环语句除外）。
if (false) { // ✗ avoid
// ...
}
if (x === 0) { // ✓ ok
// ...
}
while (true) { // ✓ ok
// ...
}
26.不要使用 debugger。
function sum (a, b) {
debugger // ✗ avoid
return a + b
}
27.不要对变量使用 delete 操作。
28.不要定义冗余的函数参数。
function sum (a, b, a) { // ✗ avoid
// ...
}
function sum (a, b, c) { // ✓ ok
// ...
}
29.类中不要定义冗余的属性。
class Dog {
bark () {}
bark () {} // ✗ avoid
}
30.对象字面量中不要定义重复的属性。
var user = {
name: 'Jane Doe',
name: 'John Doe' // ✗ avoid
}
31.switch 语句中不要定义重复的 case 分支。
32.同一模块有多个导入时一次性写完。
import { myFunc1 } from 'module'
import { myFunc2 } from 'module' // ✗ avoid
import { myFunc1, myFunc2 } from 'module' // ✓ ok
33.不要解构空值。
const { a: {} } = foo // ✗ avoid
const { a: { b } } = foo // ✓ ok
34.不要使用 eval()。
35.catch 中不要对错误重新赋值。
36.避免不必要的布尔转换。
const result = true
if (!!result) { // ✗ avoid
// ...
}
const result = true
if (result) { // ✓ ok
// ...
}
37.switch 一定要使用 break 来将条件分支正常中断。
38.不要省去小数点前面的0。
const discount = .5 // ✗ avoid
const discount = 0.5 // ✓ ok
38.避免对声明过的函数重新赋值。
function myFunc () { }
myFunc = myOtherFunc // ✗ avoid
39.不要对全局只读对象重新赋值。
window = {} // ✗ avoid
40.注意隐式的 eval()。
setTimeout("alert('Hello world')") // ✗ avoid
setTimeout(function () { alert('Hello world') }) // ✓ ok
41.嵌套的代码块中禁止再定义函数。
if (authenticated) {
function setAuthUser () {} // ✗ avoid
}
42.不要向 RegExp 构造器传入非法的正则表达式。
RegExp('[a-z') // ✗ avoid
RegExp('[a-z]') // ✓ ok
43.外部变量不要与对象属性重名。
var score = 100
function game () {
score: while (true) { // ✗ avoid
score -= 10
if (score > 0) continue score
break
}
}
44.不要书写不必要的嵌套代码块。
function myFunc () {
{ // ✗ avoid
myOtherFunc()
}
}
function myFunc () {
myOtherFunc() // ✓ ok
}
45.不要使用多行字符串。
const message = 'Hello \
world' // ✗ avoid
46.new 创建对象实例后需要赋值给变量。
new Character() // ✗ avoid
const character = new Character() // ✓ ok
47.使用 __dirname 和 __filename 时尽量避免使用字符串拼接。
const pathToFile = __dirname + '/app.js' // ✗ avoid
const pathToFile = path.join(__dirname, 'app.js') // ✓ ok
48.不要重复声明变量。
let name = 'John'
let name = 'Jane' // ✗ avoid
let name = 'John'
name = 'Jane' // ✓ ok
49.return 语句中的赋值必需有括号包裹。
function sum (a, b) {
return result = a + b // ✗ avoid
}
function sum (a, b) {
return (result = a + b) // ✓ ok
}
50.避免将变量赋值给自己。
name = name // ✗ avoid
51.避免将变量与自己进行比较操作。
if (score === score) {} // ✗ avoid
52.避免使用逗号操作符。
if (doSomething(), !!test) {} // ✗ avoid
53.不要随意更改关键字的值。
let undefined = 'value' // ✗ avoid
54.正确使用 ES6 中的字符串模板。
const message = 'Hello ${name}' // ✗ avoid
const message = `Hello ${name}` // ✓ ok
55.使用 this 前请确保 super() 已调用。
class Dog extends Animal {
constructor () {
this.legs = 4 // ✗ avoid
super()
}
}
56.用 throw 抛错时，抛出 Error 对象而不是字符串。
throw 'error' // ✗ avoid
throw new Error('error') // ✓ ok
57.不要使用 undefined 来初始化变量。
let name = undefined // ✗ avoid
let name
name = 'value' // ✓ ok
58.如果有更好的实现，尽量不要使用三元表达式。
let score = val ? val : 0 // ✗ avoid
let score = val || 0 // ✓ ok
59.return，throw，continue 和 break 后不要再跟代码。
60.避免不必要的 .call() 和 .apply()。
sum.call(null, 1, 2, 3) // ✗ avoid
61.禁止不必要的转义。
let message = 'Hell\o' // ✗ avoid
62.import, export 和解构操作中，禁止赋值到同名变量。
import { config as config } from './config' // ✗ avoid
import { config } from './config' // ✓ ok
63.禁止使用 with。
with (val) {...} // ✗ avoid
64.代码块中避免多余留白。
65.展开运算符与它的表达式间不要留空白。
fn(... args) // ✗ avoid
fn(...args) // ✓ ok
66.遇到分号时空格要后留前不留。
for (let i = 0 ;i < items.length ;i++) {...} // ✗ avoid
for (let i = 0; i < items.length; i++) {...} // ✓ ok
67.代码块首尾留空格。
if (admin){...} // ✗ avoid
if (admin) {...} // ✓ ok
68.注释首尾留空格。
//comment // ✗ avoid
// comment // ✓ ok
/*comment*/ // ✗ avoid
/* comment */ // ✓ ok
69.模板字符串中变量前后不加空格。
const message = `Hello, ${ name }` // ✗ avoid
const message = `Hello, ${name}` // ✓ ok
70.检查 NaN 的正确姿势是使用 isNaN()。
if (price === NaN) { } // ✗ avoid
if (isNaN(price)) { } // ✓ ok
71.用合法的字符串跟 typeof 进行比较操作。
typeof name === 'undefimed' // ✗ avoid
typeof name === 'undefined' // ✓ ok
72.自调用匿名函数 (IIFEs) 使用括号包裹。
const getName = function () { }() // ✗ avoid
const getName = (function () { }()) // ✓ ok
const getName = (function () { })() // ✓ ok
73.不要使用 (, [, or ` 等作为一行的开始。在没有分号的情况下代码压缩后会导致报错，而坚持这一规范则可避免出错。
74.严格模式
严格模式也确保了 javascript 代码更加的健壮，运行的也更加快速。
- 提高函数重用率
四.css规范
1.合理的避免使用ID
尽量少用id,先考虑用class
2.缩写属性
使用缩写属性，提高代码效率和可读性
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
可以写成
padding: 0 1em 2em;
- 单位和0
省略“0”值后面的单位。不要在0值后面使用单位，除非有值。
4.十六进制表示法
可能的话，使用3个字符的十六进制表示法，3个字符的十六进制表示法更简短。
//不推荐
color: #FF33AA;
//推荐
color: #f3a;
5.声明结束
为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。
6.属性名结束
属性名的冒号后使用一个空格。出于一致性的原因，
属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。
//不推荐
h3 {
font-weight:bold;
}
//推荐
h3 {
font-weight: bold;
}
7.规则分隔
规则之间始终有一个空行（双换行符）分隔。
html {
background: #fff;
}
//这里空行
body {
margin: auto;
width: 50%;
}
8.选择器嵌套 (SCSS)
在Sass中你可以嵌套选择器，这可以使代码变得更清洁和可读。嵌套所有的选择器，但尽量避免嵌套没有任何内容的选择器。
网友评论