那些前端必须要知道的优雅代码

月下脆竹書閣

已于 2022-06-23 16:26:34 修改

阅读量856

点赞数 2

分类专栏：代码规范文章标签：代码规范

于 2022-06-15 09:24:01 首次发布

本文链接：https://blog.csdn.net/c_x_m/article/details/125279601

版权

代码规范专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端代码习惯总结

文件命名
CSS
JS

文件命名

一般来说资源文件的名字习惯如下命名：

以字母开头，避免数字开头
全部用小写，这样的话不容易在引用的时候因为大小写而出错
用-来分隔单词，而不是下划线
对于压缩过的文件，比如 css 或者 js 文件，使用 .min 代替 -min

CSS

设置编码类型为utf-8,以防乱码
缩进占位一般为一个制表符（Tab键，相当于四个空格）

空格

大括号之间空格 {
冒号之后空格 color: red
对于一些特别的属性值里存在逗号分隔的情况，比如 rgba(248, 248, 248, .5)，需要在每个逗号后加上空格

换行和空行

每个 css 规则之间需要一个空行。
单行注释的前面需要一个空行。
一个规则里存在多个选择器的时候，每个选择器的逗号后换行。
一个声明块里有多个声明的时候，每条声明后都需要换行；只有一条声明的时候，声明和选择器同行。
对于逗号分隔且非常长的属性值，可以考虑换行并且缩进一个制表符。
media query 声明的第一行空行，这样就不会和第一条声明杂在一起，显得拥挤。

.modal {
    width: 500px;
    margin: 0 auto;
}
 
.modal a,
.modal span { color: #41b883; }
 
/* common */
.shadow {
    box-shadow:
        1px 1px 1px #000,
        2px 2px 1px 1px #ccc inset;
}
 
@media screen and (max-width: 640px) {
    .modal .modal-con a {
        font-size: 12px;
    }
}

ID和Class的命名规范

全部字母用小写，避免使用驼峰命名法
使用短横线-作为连接单词直接的字符，避免使用下划线_
命名尽可能语义化，让人一目了然
尽量避免使用ID选择器，因为 ID 是作为某个元素的唯一标识而设定的，而样式是可覆盖的
避免使用标签进行双重限定
选择器的嵌套层级最好不要超过3级，否则显得很冗长，效率上也未必更高。
属性选择器记得使用双引号，避免单引号和不用引号例如：input[type="text"] { line-height: 1.2; }

声明的顺序

如果包含了 content属性，则应该最优先书写，即写到声明块的最上面。
定位相关的属性，比如position、top、left、z-index、display、float、visibility和overflow、flex等。
布局相关的属性，比如display、float、visibility、overflow、flex和clear等。
盒模型相关的属性，比如width、height、margin、padding、border以及box-sizing等。
文本排版印刷相关的属性，比如font、line-height、vertical-align、text-align和white-space、text-decoration等。
视觉感官上相关的属性，比如color、background、list-style、transform、transition和animation等。

.box {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
 
    /* Layout */
    display: block;
    float: right;
 
    /* Box-model */
    width: 100px;
    height: 100px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
 
    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    text-align: center;
 
    /* Visual */
    color: #333;
    background-color: #f5f5f5;
}

尽可能的使用简写属性

在 css 中存在一些属性是可以拆分成其他独立属性的，比如background、border、font、list-style、margin 和 padding 等。这些属性在 css 里被称为复合属性，又因为一个属性包含了多个独立属性，所以在书写的时候使得代码更加简洁，所以又喜欢称其为简写属性，这里的简写也可以理解为动词。

每条声明都以分号结尾

在 css 里，如果声明不以分号结尾是会出问题的，但是也有一个例外，那就是声明块的最后一个声明是可以不用分号结尾的。但是如果改变了声明的顺序或者新增了声明，那原来的那条没有带分号的声明就有可能不是最后一条声明了，肯定就出问题了，所以为了避免这种不必要的错误发生，我们要习惯给每个声明都加上分号。

双引号

在 css 的世界里很多地方是很有必要用引号的，为了避免混淆，建议需要引号的地方都使用双引号，而不用单引号。
对于 font-family 属性，如果属性值是带空格的英文比如 Helvetica Neue 或者是中文，那么建议加上双引号，比如content 属性。
对于 URI 资源的引用，有使用到url()引入资源的时候，不用带引号。比如引入背景图片、字体定义的时候引入字体包等。

尽量不要使用 !important

这是非常霸道的规则。有时候因为使用了 !important，使得脚本程序改变不了样式渲染的结果，非常可恶。所以建议不要使用这个属性，取而代之的是，如果真的需要提高某个选择器的优先级，可以通过增加样式的层级来达到这个目的。

值和单位

所有属性和值尽量都用小写。
属性值为0的时候，不要带单位。
当可能的时候尽量使用三位的十六进制计数法，比如表示颜色的时候。
font-weight使用数值化表示方法，用400代替 normal、700代替 bold。
line-height尽量不要带单位，除非必须用px来标定。
当属性值是介于0到1之间的小数时，可以直接把0省略。.pannel { opacity: .8; }

注释

文件

/**
 * @name: 文件名或模块名
 * @description: 文件或模块描述
 * @author: author-name(mail-name@domain.com)
 *          author-name2(mail-name2@domain.com)
 * @update: 2015-04-29 00:02
 */

单行/多行注释

单行

/* abc */

多行

/**
abc 
*/

JS

连环if优化

未优化的代码

// 未优化前代码
function getColor(code){
  if(code === '200'){
    return 'blue-blue'
  }else if(code === '201'){
    return 'green-green'
  }else if(code === '202'){
    return 'red-red'
  }else{
    return 'other-other'
  }
}

使用switch优化（仅优化代码结构，也提高了代码可读性，但不是最优解）

// 使用 switch 优化
function getColor2(code){
  switch(code){
    case '200':
      return 'blue-blue'
      break
    case '201':
      return 'green-green'
      break
    case '202':
      return 'red-red'
      break
    default:
      return 'other-other'
      break
  }
}
console.log(getColor2('200'))

使用映射优化（代码量降低，可读性高）

很明显，使用映射优化的代码，代码量降低了，同时也没有影响代码的可读性，对于更加复杂的分支，通过映射的写法将会有更加明显的优势，而且这样做还有一个好处，如果分支非常复杂时，可以将映射抽离，作为 json 文件引入到代码中，进一步优化代码，更加易于维护

// 使用映射优化 
function getColor3(code){
  var colorMap = {
    '200': 'blue-blue',
    '201': 'green-green',
    '202': 'red-red',
  }
  return colorMap[code] || 'other-other'
}
console.log(getColor3('200'))

可选链操作符?.

未优化

if(req && req.data && req.data.params && req.data.params.type === '200'){}

优化后

if(req?.data?.params?.type === '200'){}

合并对象

未优化
逐一赋值的方式，当key越多，代码 ugly 的程度会急剧增加

let info = {
  name: 'yimwu',
  tel: '134xxxxx320'
}
let otherInfo = {
  name: 'yimwu',
  age: '18',
  address: 'gd'
}
info.age = otherInfo.age
info.address = otherInfo.address
console.log(info)

通过扩展运算符优化

let info = {
  name: 'yimwu',
  tel: '134xxxxx320'
}
let otherInfo = {
  name: 'yimwu',
  age: '18',
  address: 'gd'
}
info = {...info, ...otherInfo}
console.log(info)

通过 ES6 方法 Object.assign() 优化

let info = {
  name: 'yimwu',
  tel: '134xxxxx320'
}
let otherInfo = {
  name: 'yimwu',
  age: '18',
  address: 'gd'
}
Object.assign(info, otherInfo)

深拷贝

未优化（传统深拷贝）

function deepClone(obj) {
  if (typeof obj != 'object') return obj;
  var temp = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
          if (obj[key] && typeof obj[key] == 'object') {
              temp[key] = deepClone(obj[key])
          } else {
              temp[key] = obj[key];
          }
      }
  }
  return temp;
}
let info = {
  name: 'yimwu',
  tel: '134xxxxx320',
  address: {
    home: 'jy',
    company: 'gz'
  }
}

let infoCopy = deepClone(info)

通过JSON方法优化

通过 JSON.parse 和 JSON.stringify 巧妙地将对象转化成字符串再进行解析，js 将重新赋值到新的内存块中，达到深拷贝的效果

let info = {
  name: 'yimwu',
  tel: '134xxxxx320',
  address: {
    home: 'jy',
    company: 'gz'
  }
}

let infoCopy = JSON.parse(JSON.stringify(info))