前端代码规范

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 阅读(31) 评论(0) 收藏举报

刷新页面返回顶部

Felix_Openmind

https://github.com/serendipitywzz