前端代码美化的艺术

更新日期: 2019-11-08阅读: 2.2k标签: 代码

前言

原本只是想简单的聊一下代码格式化的问题,无奈本文拖沓了很久,在此期间,我又思考了很多,我越来越觉得代码格式化是一门艺术。为了衬托“艺术”二字,可能叫“代码美化”更贴切一点,但是本文的深度远没有标题那么宏大。

在我看来,代码质量不仅体现在逻辑上,也要体现在形式上。尤其前端代码,在日渐复杂的单页面开发中,代码格式化不仅是为了美观,也是为了更好的阅读及检查。关于代码的格式化并没有统一的标准,每个人都有自己的见解,所以本文的目的以探讨和推荐为主。

可能很少有人会去考虑这方面的问题,毕竟美化插件都是现成的,比如常用的 Prettier,只要一个快捷键就可以迅速格式化,但是代码格式化插件的标准并不一定是最好的。

本文范例主要以 angular 为主,但是代码美化的建议同样适用于 reactvue


每行代码多少字符合适?

关于代码字符数一直是一个争论不休的问题。在 Python编码风格指导(PEP8) 规定了每行不超过 80 个字符。Prettier 默认也是 80 个字符。

赞成这条规范的人认为 80 个字符紧凑美观,在大屏显示器也可以分多栏显示。

我最开始也是赞成 80 个字符的建议,但是当我遵循这条规范写了近一年的 Angular 代码之后,我发现这条规范有一些缺陷。

首先这条规范是 Python 编码风格的建议,而 Python 的代码是以缩进代表代码块,类、函数等在定义时也没有大括号及小括号,算上括号前的空格,这就比一般的代码少几个字符。

其次现代的编程模式大多是面向对象的风格,类的继承、接口实现等都可能导致代码很长,在 Angular 中可能还会实现多个钩子函数的接口。

另外,Angular 的代码风格建议不要为了精简变量命名而损失易读性,所以很多时候函数命名可能很长,再加上类型系统及链式调用等,单行代码很容易超过 80 个字符,这样就会造成过多的折行。

下面是一段使用 80 字符宽度格式化的 TS 代码:


我们再看一下扩大到 100 字符之后的效果:


这段代码或许还不是最典型的例子,但是也能看出两者的不同,在实际的业务当中,类似的折行可能更多,而从我个人的角度来看,过多的折行反而破坏了代码的完整度。目前常用的代码宽度有三种,分别是 80、100、120,很显然,80 太短,120 太长,以中庸之道,取 100 刚好。


模板格式化

代码宽度对模板(html)的影响也很大,下面我们重点聊一下关于模板的格式化问题。以下是使用 Prettier 的默认设置格式化的效果:


上面这种格式化方案非常普遍,但是我个人并不喜欢这种格式化的效果,原因有以下几点:

  • 开始标签末尾的尖括号看上去有点突兀。

  • 所有属性全部换行,整体有些松散,模板代码可能变得很长。

  • 标签和属性的区分度不高。

我比较喜欢下面的格式化方案,整齐紧凑,属性之间相互对齐,标签一目了然。


简单说一下上面这种格式化效果的方法:需要使用 VSCode 默认的 HTML 格式化插件。在  首选项-设置-扩展-HTML ,设置  Wrap Attributes  属性,选择  preserve-aligned (保留属性的包装,但对齐),这个选项允许单行显示多个标签。

Prettier 好像无法实现(有了解的朋友可以给我留言)。


属性排序及建议

最近在格式化代码的过程中,我总结了一套排序规则及格式化建议,大家可以参考一下。


属性排序

给元素属性排序是一个可有可无的操作,但是合理的属性顺序同样有利于代码的阅读及检查。这和排列 css 属性顺序几乎是一样的。在编写 CSS 的时候,我会刻意的按照以下顺序排列属性:

  1. Positioning

  2. Box model

  3. Typographic

  4. Visual

  5. Misc

详情参考 Code Guide,以下是元素属性的排序建议:

  • 模板引用变量

  • class

  • 结构型指令

  • 属性型指令

  • 双向绑定

  • 属性绑定

  • 事件绑定


格式化建议

  • 五个及五个以下属性尽量不要强制换行

  • 某些属性建议放在一起,比如  ngModel 和  name , label 和  value

  • 元素标签尽量对齐(除单行元素外)

  • 插值表达式尽量换行

  • 和 type  有关的属性尽量前置

以下是根据以上规则格式化后的代码:



函数格式化

我觉得模板和函数非常类似,模板属性就好比函数参数。如果使用 Prettier 进行格式化,函数字符超出限制之后,所有参数默认全部折行显示,这种方式的潜在问题和模板属性折行的问题非常类似,我觉得函数参数如果也能用  preserve-aligned  可能会更好,但是 VSCode 无法做到这一点。

谷歌推荐  clang-format  进行格式化,初步试了一下,并没有达到满意的效果,可能配置文件有点问题。我觉得关于函数的格式化问题暂时可以不必深究。


总结

代码美化只是一种形式,它不会对逻辑产生任何影响,但是好的代码格式会间接影响我们编码的速度,甚至影响到代码的质量。

【本文作者】叙帝利:前人人网,网易前端开发工程师,开源项目 ng-matero,photoviewer,domq,three-dots 的作者

作者: 叙帝利 
来源: https://zhuanlan.zhihu.com/p/83249845

链接: https://fly63.com/article/detial/6341

不要浪费时间写完美代码

一个系统可以维持5年,10年,甚至20年以上,但是代码和设计模式的生命周期非常短,当对一个解决方案使用不同的方法进行迭代的时候,通常只能维持数月,数日,甚至几分钟的时间

Google内部在代码质量上的实践

良好的编程习惯涉及到很多方面,但在软件行业内,大多数的公司或组织都不会把良好的编程习惯列为主要关注点。 例如,具有可读性和可维护性的代码比编写好的测试代码或使用正确的工具更有意义,前者的意义在于可以让代码更易于理解和修改。

减少嵌套,降低代码复杂度

减少嵌套会让代码可读性更好,同时也能更容易的找出bug,开发人员可以更快的迭代,程序也会越来越稳定。简化代码,让编程更轻松!

关于 Google 发布的 JS 代码规范

Google为了那些还不熟悉代码规范的人发布了一个JS代码规范。其中列出了编写简洁易懂的代码所应该做的最佳实践。代码规范并不是一种编写正确JavaScript代码的规则,而是为了保持源代码编写模式一致的一种选择。

你解决的问题比你编写的代码更重要!

程序员似乎忘记了软件的真正目的,那就是解决现实问题。您编写的代码的目的是为了创造价值并使现有世界变得更美好,而不是满足您对自我世界应该是什么的以自我为中心的观点。有人说:如果你拥有的只是一把锤子,那么一切看起来都像钉子一样

tinymce与prism代码高亮实现及汉化的配置

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方强大,并且功能配置灵活简单。另一特点是加载速度非常快的。

js函数式编程与代码执行效率

函数式编程对应的是命令式编程, 函数式编程的核心当然是对函数的运用. 而高阶函数(Higher-order)是实现函数式编程的基本要素。高阶函数可以将其他函数作为参数或者返回结果。所以JS天生就支持函数式编程

接手代码太烂,要不要辞职?

朋友发表了一条说说:入职新公司,从重构代码到放弃”,我就问他怎么了?他说,刚进一家新公司,接手代码太烂,领导让我先熟悉业务逻辑,然后去修复之前项目中遗留的bug,实在不行就重构

js高亮显示关键词_页面、搜索关键词高亮显示

页面实现关键词高亮显示:在项目期间遇到一个需求,就是搜索关键词时需要高亮显示,主要通过正则匹配来实现页面关键词高亮显示。在搜索结果中高亮显示关键词:有一组关键词数组,在数组中筛选出符合关键字的内容并将关键字高亮

写优雅的代码,做优雅的程序员

软件工程学什么? 学计算机,写程序,做软件,当程序员。听说学计算机很辛苦? 是的,IT行业加班现象严重。在计算机世界里,技术日新月异,自学能力是程序员最重要的能力之一。选了这个专业,就要时刻保持好奇心和技术嗅觉,不能只满足于完成课内作业。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!