前端代码美化的艺术基础指南_代码小白基础

前言原本只是想简单的聊一下代码格式化的问题,无奈本文拖沓了很久,在此期间,我又思考了很多,我越来越觉得代码格式化是一门艺术。为了衬托“艺术”二字,可能叫“代码美化”更贴切一点,但是本文的深度远没有标题那么宏大。在我看来,代码质量不仅体现在逻辑上,也要体现在形式上。尤其前端代码,在日渐复杂的单页面开发中,代码格式化不仅是为了美观,也是为了更好的阅读及检查。关于

前端代码美化的艺术基础指南

前言

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

前端代码美化的艺术基础指南_代码小白基础

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

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

本文范例主要以 Angular 为主,但是代码美化的建议同样适用于 React 和 Vue。

每行代码多少字符合适?

关于代码字符数一直是一个争论不休的问题。在 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 的作者

海计划公众号
(0)
上一篇 2020/03/23 08:56
下一篇 2020/03/23 08:56

您可能感兴趣的内容

  • Theia指南教程_采用TypeScript实现的云和桌面IDE框架

    Theia指南教程 官方网址:http://theia-ide.org GitHub:https://github.com/theia-ide/theia 简介描述:采用TypeS…

    2020/03/07
  • DNS域名解析步骤使用教程_域名小白常识

    整个过程大体描述如下,其中前两个步骤是在本机完成的,后8个步骤涉及到真正的域名解析服务器:1.浏览器会检查缓存中有没有这个域名对应的解析过的IP地址,如果缓存中有,这个解析过程就结束。浏览器缓存域名也是有限制的,不仅浏览器缓存大小有限制,而且缓存的时间也有限制,通常情况下为几分钟到几小时不等,域名被缓存的时间限制可以通过TTL属性来设置。这个缓存时间太长和太

    2020/03/30
  • 在vue中使用layer弹框插件,实现数据交互功能基础教程_layer攻略教程

    layer.js是一个小巧方便的弹出层插件,目前很多网站都在使用。最近在使用vue框架开发中,需要使用弹窗,就引入了layer.js。引入如下,在main.js中:import ‘./layerm/layer.js’//弹窗
    import ‘./layerm/layer.css’//弹窗样式这样在组件中就可以使用layer.open的功能了,我们都知道lay

    2020/04/05
  • spop.js入门知识一款纯js toast消息提示通知插件

    spop.js基础入门 官方网址:http://silvio-r.github.io/spop/ GitHub:https://github.com/silvio-r/spop 简…

    2020/03/05
  • 微前端的好处和缺陷入门攻略_微前端小白攻略

    上周 Twitter 上关于“微前端”的话题火了,支持和反对两派都拿出了有力的论据,吵得不可开交。这场争论让我想起了“CSS in JS”的大讨论,两边也都说服不了对方。以前我在这种争论里也是咄咄逼人,但这次我决定采取更中立的态度。我认为,就像“CSS in JS”一样,实施微前端具体有哪些代价、有哪些区别,都取决于你的项目和组织资源约束条件。实现微前端也有

    2020/03/29
  • javascript的事件流模型都有什么?零基础入门_事件小白知识

    事件流:当你在页面触发一个点击事件后,页面上不仅仅有一个元素响应该事件而是多个元素响应同一个事件,因为元素是在容器中的。事件发生的顺序就是事件流,不同的浏览器对事件流的处理不同。冒泡事件流:当触发一个节点的事件时,会从当前节点开始,依次触发其祖先节点的同类型事件,直到DOM根节点 。捕获事件流:当触发一个节点的事件时,会从DOM根节点开始,依次触发其祖先节点

    2020/03/22
  • 为什么很多网站的静态资源使用独立的域名?入门基础知识_域名菜鸟教程网

    什么是静态资源不根据访问的条件变化的资源就是静态资源,比如 html,js,css,webfont 等文件。为什么很多网站的静态资源使用独立的域名1.避免发送无意义的 cookie ,当我们的浏览器第一次请求服务器的时候,会根据服务器响应报文中的 set-Cookie 来保存 cookie ,以后再次向这个服务器发送请求的时候都会带上 cookie ,所以我

    2020/03/24
  • bulma菜鸟攻略基于 Flexbox 的当代 CSS 框架

    bulma基础入门 官方网址:http://bulma.io/ GitHub:https://github.com/jgthms/bulma 简介描述:基于 Flexbox 的当代…

    2020/03/05
  • 一个新式的基于文本的浏览器 Browsh入门百科_浏览器作者: 翻译入门攻略

    什么是Browsh?Browsh是一个纯文本浏览器,可以运行在大多数的TTY终端环境和任何浏览器。目前,终端客户端比浏览器客户端更先进。TTY 客户端终端客户端即时更新和交付,以便于体验新的功能,例如,你可以观看视频。它使用UTF-8半块技巧(▀)从每个字符单元中获取2中颜色,从而仿真基本图形。对那些支持它的终端,除了键盘输入,它也可以理解鼠标输入。因此,你

    2020/04/05
  • 百度正式开源转发引擎 BFE,曾支撑春晚红包百亿流量小白攻略_引擎菜鸟攻略

    BFE(Baidu Front End,百度统一前端)是百度的统一七层流量转发平台。据了解,BFE 平台目前已接入百度大部分流量,每日转发请求接近 1 万亿,峰值 QPS 超过 1000 万。在 2019 年百度春晚红包活动中,BFE 平台在超大用户压力、数次流量波峰下平稳运行,保证了春晚红包活动的顺利进行。作为综合的流量转发平台,BFE 平台集成了以下 4

    2020/03/23
  • VUE comfirm 弹出框实例入门知识_组件入门知识

    使用VUE做demo,需要用弹出框,在网上找了一下,找了一个能用的,把使用方法总结一下,备忘 新建自定义组件拷贝自定义插件的内容,放在components下新建的Comfirm.vue中<div v-if="isShowConfirm" class="my-confirm"

    2020/03/22
  • IconMonstr基础入门免费简约素材图标下载站

    IconMonstr基础入门 官方网址:https://iconmonstr.com/ 简介描述:免费简约素材图标下载站  iconmonstr是一个朴实、朴素的图标素材…

    2020/03/05
  • 稿定设计入门基础_做图做视频必备,在线设计器

    稿定设计入门基础 官方网址:https://www.gaoding.com/ 简介描述:做图做视频必备,在线设计器 在线快速图片和视频编辑,不会PS也能搞定设计。海报、简历、PPT…

    2020/03/11
  • h5开发在ios浏览器遇到的坑入门基础知识_h5菜鸟攻略

    1.click事件;要在css中加上cursor: pointer;ios的点击才有效2.margin-bottom问题;在ios上,最后一个元素加margin-bottom无效。3.时间转化问题由时间转时间戳时new Date(‘2019-07-3 11:22:32’).getTime(); //苹果显示NAN在ios上 new Date(“2019-07

    2020/03/29
  • 运动呢!牛哄哄的蓝牙运动耳机又怎能少!使用攻略_蓝牙小白教程

    运动中听着美美的音乐自然让人心旷神怡,腿也更有劲了!这样……或者这样……还是这样……当然,既不想尴尬,又想有更好的运动时听歌体验,最佳方式莫过于戴上一款蓝牙运动耳机!利视达运动跑步无线蓝牙耳机利视达运动跑步无线蓝牙耳机利视达运动跑步无线蓝牙耳机,这款耳机选择了入耳斜角设计,大小适中,佩戴舒适感很强,但密封性效果较为一般,健身房中佩戴还是没有任何问题的,音质方

    2020/03/29
  • 元素focus页面不滚动不定位的JS处理使用帮助_元素入门基础知识

    有时候我们希望元素被focus的时候页面不发生滚动,例如我们点击一个按钮打开一个弹框,此时点击弹框中的关闭按钮隐藏弹框后,希望键盘的焦点回到之前的按钮上,我们就会执行如下JavaScript代码:button.focus();但是有时候会带来另外一个比较严重的体验问题,那就是如果弹框显示之后我们页面发生了滚动,原本点击的按钮跑到了屏幕显示区域之外,这个时候,

    2020/03/24