登录 | 地图 欢迎访问【UZ导航】
当前位置:网站首页 > 推荐 > Admin > 正文

写代码需要注意的问题

admin 2020-10-07 101 浏览 0 评论

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

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

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

每行代码多少字符合适,关于代码字符数一直是一个争论不休的问题,Python作风规定了每行不超过 80 个字符

最开始我也是赞成 80 个字符的建议,但是随着写代码的深入,我发现了有一些缺陷。

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

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

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


在实际的业务当中,类似的折行可能更多,从个人的角度来看,过多的折行反而破坏了代码的完整度。目前常用的代码宽度有三种,分别是 80、100、120,很显然,80 太短,120 太长,以中庸之道,取 100 刚好。

代码宽度对模板(html)的影响也很大,下面我们重点聊一下关于模板的格式化问题。

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

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

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

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

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

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

在格式化代码的过程中,有一套排序规则及格式化建议。

1、属性排序

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

  1. Positioning

  2. Box model

  3. Typographic

  4. Visual

  5. Misc

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

  • 模板引用变量

  • class

  • 结构型指令

  • 属性型指令

  • 双向绑定

  • 属性绑定

  • 事件绑定

2、格式化建议

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

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

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

  • 插值表达式尽量换行

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

3、函数格式化

模板和函数非常类似,模板属性就好比函数参数。如果使用 Prettier 进行格式化,函数字符超出限制之后,所有参数默认全部折行显示,这种方式的潜在问题和模板属性折行的问题非常类似。

4、美化

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

相关推荐

一个C程序的源代码是如何运行在硬件上的?

C语言的编译链接过程要把我们编写的一个c程序(源代码)转换成可以在硬件上运行的程序(可执行代码),需要进行编译和链接。编译就是把文本形式源代码翻译为机器语言形式的目标文件的过程。链接是把目标文件、操作...

谷歌联盟怎么赚钱?

最先大家做的这个是一个真正刷广告的新项目,是一个长期性可做的制造行业,无论做为静态数据游戏玩家来讲,還是做为团体领导人员来讲,做好了全是一份能够长期性造成赢利的一个管路盈利,就如同这些做POS机推广...

美国正式对谷歌发起反垄断诉讼,剑指搜索和广告两大核心业务

传闻已久的美国司法部诉谷歌反垄断终于落地。当地时间10月20日下午,美国司法部联合11个州检察长正式起诉谷歌违反反垄断法,要求谷歌恢复搜索和搜索广告市场的竞争。参与发起该诉讼的11个州分别是阿肯色州、...

百度 全球最大的中文搜索引擎网站

北京百度网讯科技有限公司,中国十大热门网站,全球最大的中文搜索引擎、最大的中文网站,中国最受欢迎、影响力最大的中文网站,中国最具价值的品牌之一,亚洲最受尊敬企业,全球最具创新力企业百度,全球最大的中文...

不懂如何买电脑,配置怎么选,新手买电脑教程

新手如何购买笔记本电脑?高考告一段落,开学季即将来临。对于新手学生来说,没有笔记本电脑怎么上大学?说到购买笔记本电脑,我们需要考虑几个方面。下面小白系统为大家讲解如何购买笔记本电脑。I.。确...

什么是友情链接,网站友情链接怎么弄?

一、网站友情链接在优化中启到的作用1、引导蜘蛛抓取网站,特别是新站帮助更大,新站没有权重,搜索引擎对其也无信赖度,爬行抓取频率很低,通过高质量友链引导,可以提高搜索引擎抓取的频率,利于提高新站的收录;...

程序员每天写出好代码的5大方法,需要有工匠精神!

有不少的程序员天天写代码,但是还是被自己的代码丑哭了。有些好的代码具有易理解、可扩展、易维护的特点,简直是人见人爱。今天w3cschool就跟程序员小伙伴们分享每天写出好代码的5种方法:0、想好再写有...

手把手教你搭建一个自己的网站

在没有网络的情况下,经营一家企业已经不再可行,即使是一家实体企业。从产品落地到营业时间,消费者都转向了互联网。即使是一个设计良好的简单网站,也能让你在自己的领域占据优势。如果你有产品要卖,你的网站就能...

优化经验:网站关键词排名查看方法

网站经过一段时间的优化,网站开始有了收录,这时候了解网站有哪些关键词在搜索引擎上有排名就十分的重要,能够为我们的优化提供指导,接下来就介绍一下如何通过工具了解网站哪些关键词在搜索引擎上有排名。我们可以...

虚拟主机的优势

虚拟主机是从服务器分离出来的主机空间,就是一台运行在服务器上分开多个的虚拟”的服务器,每个虚拟主机都有独立的域名和完整的网站空间,虚拟主机也可以配备独立的IP,相同都是每台虚拟主机和一台独立的主机是一...

术业有专攻:选购服务器必备干货,10步骤你知道多少?

闻道有先后,术业有专攻。怎么判断自己需要什么配置的服务器?什么样的服务器配置方案更好呢?从业人员建议先列一份需求清单表,标明CPU、内存、硬盘、带宽、防御、线路、价格等需求属性及参数,再结合根据自己的...

10个最佳博客网站 - 详细比较

文章介绍的博客源码没有技术不要直接使用,仅供学习啊参考如非要使用请下载本地托管到本地服务商使用。这样浏览速度快,需要把网站的JS改成本地,否则网站打不开,打开速度也超级慢。开始写博客有很多理由。可能希...

网站运营是做什么的?网站运营技巧大揭秘

很多做运营的同学搞不清网站运营到底是做什么的?以为网站运营就是写写文章,发发外链、做做友情链接之类的,今天这篇文章主要揭秘网站运营技巧。目前很多同学在从事网站运营工作的时候,做的最多的就是做SEO、发...

网页排版设计的10个小技巧

沟通在设计中起着至关重要的作用。这是建立用户和网站之间的明确联系,并帮助你的用户实现目标的关键。当我们谈论网页设计环境中的沟通时,这通常是指文本。排版在这个过程中起着至关重要的作用:网络中超过95%的...

写代码需要注意的问题

代码质量不仅体现在逻辑上,也要体现在形式上。尤其前端代码,在日渐复杂的单页面开发中,代码格式化不仅是为了美观,也是为了更好的阅读及检查。关于代码的格式化并没有统一的标准,每个人都有自己的见解。但是很少...

取消回复欢迎 发表评论:

×
×