编写高质量可维护美观的代码

---

前言

这一篇是我最近一直想写的，出来实习后发现如何把代码写的美观也是一门很重要的事情。
特别每一次完成实习导师交给我的任务，在实现好功能的时候，提交给导师，导师都会到我手把手review，每次都能学习了很多。
在工作中，作为一个前端开发工程师，复现UI给的设计图的效果是必须的，但是这只是基本的一部分。一个好的前端开发和初级前端开发是很大的区别的。也许大家都能实现同样的一个效果，但本质上的代码一看就知道优了，下面我想通过我自己的两个例子（我和我的实习导师的对话）来介绍，和分享我的感悟。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、对于API的使用

这个案例的需要就是实现一个功能，就是常见的对数据的处理，我们从接口拿到的接口的数据的格式不一定符合我们的需求，如下面的 data1，需要把它格式成成我们要得 date2 的样式。

const data1 = [
  { category: '热门城市', name: 'name1', code: '上海' },
  { category: '热门城市', name: 'name2', code: '北京' },
  { category: '城市名', name: 'name3', code: '成都' },
];

const data2 = [
	{ label: '热门城市', options: [
		{ value: 'name1', label: '上海' }, 
		{ value: 'name2', label: '北京'}
		]}, 
	{ label: '城市名', options: [
		{  value: 'name3', label: '成都'}, 
        }
    ]

那么下面就是我写的实现的代码

function test(list) {
  let res = []
  let jsonIndex = {}
  list.forEach((item) => {
    let arrIndex = Reflect.has(jsonIndex, item.category) ? jsonIndex?.[item.category] : res.length
    let obj = res?.[arrIndex]
    if (obj) {
      obj.options = obj.options.concat({
        value: `${item.id}`,
        label: `${item.name}`,
      })
    } else {
      obj = {
        label: item.category,
        options: [
          {
            value: `${item.id}`,
            label: `${item.name}`,
          },
        ],
      }
    }
    res[arrIndex] = obj
    jsonIndex[item.category] = arrIndex
  })
  return res
}

下面是给我导师看了后，教导我优化后的代码

const res = [];
data.forEach(item => {
  const findIndex = res.findIndex(f => f.label === item.category);
  const option = { value: item.code, label: item.name };

  if(findIndex !== -1) {
    res[findIndex].options.push(option);
  } else {
    res.push({ label: item.category, options: [option] })
  }
});

是不是，简直完全不一样了，无论从观感和可读性上来说，从本质上，他们的思想是一样的，但是通过不一样的写法，和优化就一下子高大上了~~~

我一直觉得，写代码就好像写字一样，两个人去抄写一篇文章，别人可以写的很漂亮的字，看起来赏心悦目，而要是你写的，只有你自己能读懂呢？（过两个星期后可能你自己都读不懂~~）那么做到写的漂亮就很重要了。就有一个很重要的问题了，如何写的漂亮！下面我们再看一个例子。

得出的经验，在编写中我们可以多去使用JavaScript中的各类的迭代方法，需要去熟悉和认识他们的不同。根据不同的场合去选择不同的，选择合适的往往会极大的简便我们的代码，更加的便于阅读和理解。那么不仅仅对于迭代的方法，我们需要深入的了解ES6，JavaScript的APi等等，都可以给我们带来极大地便捷。

这方面我们的学习可以去通过，多阅读一些大佬的代码，同时我们在编写的过程中，如果我们觉得写的不好的地方，可以去问一些大佬，有没有更加好的方法去实现（哈哈哈，我就经常这么干，多问，多读，多看）

可以看看该篇文章：前端JavaScript对数组的所有循环操作方法以及使用区别

再看多个例子：

上面的这段代码是我实现的，但是后面我的导师带我review的时候，我们写成了下面的这种。是不是天壤之别，哈哈哈，其实他们解决的是同一件事，那么对代码进行优化多重要啦！

二、标签的多元化使用以及命名规范

还有一个我也想拿出来分享的，但感觉公司的代码，不好上随便发布到公共平台，那么我就不贴代码，来和大家说说我再这个任务中的一些错误和体会。

这个任务是使用element ui 中的 el-dialog 实现一个展示数据的弹窗，听起来很简单是吧，确实，当时我也觉得简单，但是后面才发现很多细节需要推敲。

1. 首先一点就是不要都用div跟span，这样看起来其实不太好看，满屏的这种，而且也不便于语义化，可以多去了解各种标签，比如使用 h1-h6标签 / b标签 / p标签等等
2. 考虑下一步，要是以后还是在这里添加多一个功能，是不是，可以直接加上数据就可以了？
3. 命名上区分中横线和下横线使用场景区别，中横线一般可以等价于驼峰命名，而下划线可以用变量命名等，其实没有绝对的，根据你的习惯来有自己的规范就好了~~
4. 布局上，应该注意的，比如页面记得结构，对于class的命名是不是可以分为header / middle / bottom 根据位置对最外层的元素命名。
5. 命名上也是需要讲究而不是随意的，好的命名往往对于新人以及别人解决问题的时候，更好的定位到问题的所在。在现在的开发中，往往会用到BEM来定义类名，这样就能在调试的时候很好的找到问题的部分是在哪一个组件中。不单单是对于类的命名方式，对于我们的定义的方法和接口中的接口命名，我们同样都要语义化，最好别人阅读该方法的名称就能理解该方法是解决什么问题的。
   
   比如上面的命名是不是非常的简单明了，该方法实现的功能一目了然。

可以看看该篇文章：Http常用标签分析以及行内元素和块级元素

三、函数式编程

---

总结

哎，回头在来补充吧，没有案例，不好说，自己的学习也还不到为，也还不能很好的表述出来。但总的来说，要想写的好的代码，我们可以多去参考一些优秀的源码，去看如果你写，你会如何写，和别人的有什么不同，为什么他这么做？相信一定会有很大的帮助的！