前端代码规范

HTML编码规约

资源加载 => 引入CSS和JS的时候无需指定type，根据H5规范其text/css和text/javascript是其默认值

 // goood
<link rel='stylesheet' href='example.css'/>
 
<style>
 
</style>
 
<script src='example.js'></script>

在head标签中引入CSS，在body结束标签前引入JS

在中指定外部样式表和嵌入式样式会导致页面重排和重绘, 对页面的渲染造成影响
CSS在标签中引入

 <!-- bad -->
<!DOCTYPE html>
<html>
  <head>
    <script src="mod-a.js"></script>
    <script src="jquery.js"></script>
  </head>
  <body>
    <style>
      .mod-example {
        padding-left: 15px;
      }
    </style>
  </body>
</html>
 
<!-- good -->
<!DOCTYPE html>
<html>
  <head>
    <style>
      .mod-example {
        padding-left: 15px;
      }
    </style>
  </head>
  <body>
    ...
    <script src="path/to/my/script.js"></script>
  </body>
</html>

外部资源的引用地址跟随页面协议，省略协议部分

 <link rel="stylesheet" href="//g.alicdn.com/lib/style/index-min.css" />

使用preload预加载关键资源

 <link ref='preload' href='style.css' as='style'/>

脚手架模板

 <!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台" />
    <meta name="keyword" content="淘宝,掏宝,网上购物,C2C" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, viewport-fit=cover" />
    <title>淘宝网</title>
    <link rel="stylesheet" href="example.css" />
  </head>
  <body>
    <div id="container"></div>
    <script src="example.js"></script>
  </body>
</html>

CSS编码规约

不要使用id选择器，id选择器优先级过高，难以进行样式覆盖

 /* bad */
.normal {
  padding: 10px;
}
#special {
  padding: 15px;
}
 
/* good */
.normal {
  padding: 10px;
}
.normal.special {
  padding: 15px;
}

属性声明的顺序

定位： eg: position、left、right、top、bottom、z-index
盒模型：eg: display、float、width、height、margin、padding、border
文字排版：eg: font、color、line-height、text-align
外观：background

 .declaration-order {
  /* 定位 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
 
  /* 盒模型 */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  border: 1px solid #e5e5e5;
 
  /* 排版 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;
 
  /* 外观 */
  background-color: #f5f5f5;
 
  /* 其他 */
  opacity: 1;
}

数组拼接

 // bad
const array = [1, 2].concat(array);
 
// good
const array1 = [1, 2, ...array];

使用字面量创建对象

 // bad
const obj = new Object();
 
// good
const obj = {};

使用对象属性和方法的简写语法

ES6提供对象属性和方法的简写语法；

 const value = 'foo';
 
// bad
const atom = { 
  value: value,
  addValue: function(value) {
    return value + 'added';
  }
}
 
// good
const atom = {
  value,
  addValue(value) {
    return value + 'added';
  }
}

对象浅拷贝 => 使用扩展运算符处理对象

替代Object.assign方法，来进行对象的浅拷贝

 // good
const original = { a:1, b:2};
const copy = {...original, c:3}

对象的动态属性名应直接写在字面量定义中

ES6允许在新建对象字面量中使用表达式作为属性名，将所有属性定义在一个地方

 function getKey(k) {
  return `a key named ${k}`;
}
 
// bad 
const obj = {
  id: 1,
  name: 'tod',
}
obj[getKey('foo')] = 'foo';
 
// good
const obj = {
  id: 1,
  name: 'tod',
  [getKey('foo')]: 'foo'
}

函数 - 不要用Function构造函数创建函数

使用new Function函数会像eval()方法一样执行字符串

 // good
const sum = (a, b) => (a + b);

不要在快中使用函数声明，在非函数快(eg: if、while)中不要使用函数声明

条件表达式的计算结果

 if({}) {
  // true
}
 
if([]) {
  // true
}
 
if(0) {
  // false
}
 
if('0') {
  // true
}
 
if('') {
  // false
}

posted @ 2023-06-29 12:04 Felix_Openmind 阅读(12) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具

2025年3月

日

一

二

三

四

五

六

Felix_Openmind

https://github.com/serendipitywzz

前端代码规范

HTML编码规约

脚手架模板

CSS编码规约

数组拼接

使用字面量创建对象

使用对象属性和方法的简写语法

对象浅拷贝 => 使用扩展运算符处理对象

对象的动态属性名应直接写在字面量定义中

函数 - 不要用Function构造函数创建函数

不要在快中使用函数声明，在非函数快(eg: if、while)中不要使用函数声明

条件表达式的计算结果

最新随笔

随笔分类 (404)

随笔档案 (410)

文章分类 (66)

文章档案 (99)

软件开发

阅读排行榜

	// goood
	<link rel='stylesheet' href='example.css'/>

	<style>

	</style>

	<script src='example.js'></script>

	<!-- bad -->
	<!DOCTYPE html>
	<html>
	<head>
	<script src="mod-a.js"></script>
	<script src="jquery.js"></script>
	</head>
	<body>
	<style>
	.mod-example {
	padding-left: 15px;
	}
	</style>
	</body>
	</html>

	<!-- good -->
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	.mod-example {
	padding-left: 15px;
	}
	</style>
	</head>
	<body>
	...
	<script src="path/to/my/script.js"></script>
	</body>
	</html>

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="utf-8" />
	<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台" />
	<meta name="keyword" content="淘宝,掏宝,网上购物,C2C" />
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, viewport-fit=cover" />
	<title>淘宝网</title>
	<link rel="stylesheet" href="example.css" />
	</head>
	<body>
	<div id="container"></div>
	<script src="example.js"></script>
	</body>
	</html>

	/* bad */
	.normal {
	padding: 10px;
	}
	#special {
	padding: 15px;
	}

	/* good */
	.normal {
	padding: 10px;
	}
	.normal.special {
	padding: 15px;
	}

	.declaration-order {
	/* 定位 */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;

	/* 盒模型 */
	display: block;
	float: right;
	width: 100px;
	height: 100px;
	border: 1px solid #e5e5e5;

	/* 排版 */
	font: normal 13px "Helvetica Neue", sans-serif;
	line-height: 1.5;
	color: #333;
	text-align: center;

	/* 外观 */
	background-color: #f5f5f5;

	/* 其他 */
	opacity: 1;
	}

	// bad
	const array = [1, 2].concat(array);

	// good
	const array1 = [1, 2, ...array];

	const value = 'foo';

	// bad
	const atom = {
	value: value,
	addValue: function(value) {
	return value + 'added';
	}
	}

	// good
	const atom = {
	value,
	addValue(value) {
	return value + 'added';
	}
	}

	// good
	const original = { a:1, b:2};
	const copy = {...original, c:3}

	function getKey(k) {
	return `a key named ${k}`;
	}

	// bad
	const obj = {
	id: 1,
	name: 'tod',
	}
	obj[getKey('foo')] = 'foo';

	// good
	const obj = {
	id: 1,
	name: 'tod',
	[getKey('foo')]: 'foo'
	}

	if({}) {
	// true
	}

	if([]) {
	// true
	}

	if(0) {
	// false
	}

	if('0') {
	// true
	}

	if('') {
	// false
	}