Web前端进阶之路: 提升代码质量篇

2023-06-01 0 469

责任编辑探讨的主要就文本是:提升标识符产品质量的方式。

高产品质量的标识符的必要性

高效率的标识符充分体现在三个各方面:

更易保护。Bug少。

当市场需求发生改变,或出Bug须要改时,更易保护的标识符改出来更容易,更慢。改这些差劲的标识符,费时不说,心境也显得差劲。

Bug少的标识符。有助于提升最终目标采用者的满意率。这也是开发者的民心所向。

怎样写下更易保护的标识符?

事实证明,更易保护的标识符:

有国际标准化的标识符艺术风格(Code Style)。科学合理的标识符结构设计。更易管理工作的工程项目正式版。明晰明了的递交信息。

国际标准化的标识符艺术风格(Code Style)

标识符艺术风格指由标识符的对齐,字符,重新命名等各方面的签订合同。国际标准化的标识符艺术风格能增加工程项目组核心成员的认知生产成本。上面,他们依次从 HTML,CSS 和 JavaScript 而言。

HTML

1 HTML 是要满足用户W3C国际标准。

下列是三个较为关键的:

HTML文件格式要有文件格式默认值(DTD)。规范化所推荐采用:<!DOCTYPE html>。要表述页面的代码。 所推荐: <meta charset=”UTF-8″>。条码中的拉丁字母要是大写拉丁字母。条码要卷曲。自卷曲条码,以 / 卷曲条码,如 <input type=”text” />。条码特性值用单引号包出来。特性中文名称中的拉丁字母要是大写拉丁字母。自订特性名,以 data- 结尾。img 条码的 alt 特性关主。相片读取失利时,会表明 alt 特性的值。

能用HTML国际标准验证工具

检查,HTML 是否符合W3C国际标准。

2 选择语义化(Semantic)的HTML条码。

条码语义化(Semantic)指根据文本的语义,去选择与之匹配的条码。

采用语义化条码的原因:

有助于开发者保护标识符。语义化条码能提升标识符的可读性,让开发者更慢找到最终目标标识符。有利于SEO。爬虫通过语义化条码,能抓取更多页面的关键信息。

常用的语义化条码有:header, footer, aside, article, section, hgroup, h1~h6, nav, strong, small。所推荐通读下HTML Living Standard

尽量不用 div 和 span 这2个没有实际意义的条码。

CSS

1 CSS的类名用BEM重新命名法

BEM

是由Yandex公司推出的

CSS 的样式应用是全局性的,没有作用域可言。 BEM 通过元素的重新命名遵循遵循 block-name__element-name–-modifier-name 来保证重新命名的唯一性。因此,BEM 能够帮助你在后端开发中实现可复用的组件和标识符共享。

BEM写法示例:

标题

文本。

BEM错误的写法:

__ 只能有一个。block__elem1__elem2__elem3 要改成 block__elem3 或 block3__elem3。修饰符中不能有__。 block–xmas__btn 要改成 在 block 上加类名: block–xmas。block–xmas__btn 改成: block__btn。

更多错误用法及纠正:Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them

2 语义化CSS的类名

根据模块的功能来重新命名,而不是根据样式来重新命名。如:给红色的提示文字起类名。类名能叫 tip,不应该叫 color-red。如果类名是color-red,那以后提示文字要改成绿色,类名也要改,用功能来重新命名不会出现这种问题。

上面是常见类名:

布局: header(头部), footer(尾部), main(主栏),side(侧栏), wrap(盒容器), item(条目)。模块: nav(导航), subnav(子导航), breadcrumb(面包屑), menu(菜单), tab(选项卡), title(标题), list(列表), content(文本), table(表格), form(表单), hot(热点), top(排行), login(登录), log(标志), search(搜索), slide(幻灯), tip(提示), help(帮助), news(新闻), download(下载), regist(注册), vote(投票), copyright(版权), result(结果), button(按钮), input(输入), avatar(采用者头像), badge(徽章), tag(条码)。状态: collapsed(收拢的), expanded(展开的), current(当前), selected(选中的), active(活跃的), enabled(可用), disabled(不可用)。

3 CSS特性的书写顺序

我的CSS特性的书写顺序规则是:先写布局类的,再写细节类;从外到内,从上到下,从左到右。

按照这个规则,常见的CSS特性的书写顺序是: display, position, top, bottom, left, right, z-index, margin, border,border-radius,box-shadow, padding, width, height, line-height, background, text-align, font-size, font-family, color, transition, animation。

4 其他

类名用驼峰。类名要优先用BEM重新命名,再用驼峰。如 info-box–header。给 js 用到的类名,以 js- 结尾。

JavaScript

主流的 JavaScript 标识符艺术风格有 JavaScript 国际标准代码艺术风格(JavaScript Standard Style) 和 Airbnb JavaScript 标识符艺术风格

我的工程项目常用JavaScript 国际标准标识符艺术风格。能用 PrettierPrettier-standard 来格式化标识符。除此之外,JavaScript 国际标准标识符艺术风格中没有涉及的规则,但我觉得要验证的。能用 ESLint 来补充验证。我觉得须要遵守的规则,见这里

科学合理的标识符结构设计

科学合理的标识符结构设计,往往符合上面的一些原则。

简单的,容易认知的

单一职责。一个函数只做一件事。单一职责的优点:

降低标识符的复杂度。因为做的事少了,分支判断就少了,也就变简单了。有助于标识符复用。

KISS原则。KISS原则是英语 Keep It Simple, Stupid 的首拉丁字母缩写。在结构设计当中应当注重简约的原则。

DRY原则:增加重复标识符

DRY 是 Dont repeat yourself 的简称。大量重复标识符会导致的问题是:如果修改某重复的标识符出了问题,就要修改所有的包含该有问题的标识符。增加保护生产成本。

同样的标识符出现了三次,就应该考虑去消除这些重复标识符。

高内聚低耦合

高内聚指模块内的标识符是紧密联系的。低内聚的模块结构设计的坏处有:模块的职责不明确,较为松散;更有甚者是完成不相关的功能。

低耦合指模块间的依赖尽可能低。高耦合的标识符很脆弱。比如一个模块直接读取另一个模块的内部数据,那么当内部数据变了,调用模块就不能工作了。配置与逻辑分离能降低耦合。配置与逻辑分离指把配置标识符从逻辑标识符中抽出来。

签订合同优于配置(convention over configuration)

签订合同优于配置,也称作按签订合同编程。指通过重新命名规则之类的约束来增加程序中的配置,旨在增加软件开发者须要做决定的数量,获得简单的好处,而又不失灵活性。

写组件时,对特性的结构设计,能用签订合同优于配置的做法。

健壮性

健壮性是指软件对要求以外输入情况的处理能力。健壮的系统是指由要求以外的输入能够判断出这个输入不符合要求,并能有科学合理的处理方式。

健壮的标识符,就是考虑的全面。具体而言:异常标识符,是否捕获;写 switch 语句时,是否有 default 分支;当接口报错时,代码是否能正确处理;采用者填表单的非法输入,是否会让程序奔溃;当采用者输错网址,是否会跳404页面等等。

怎样提升结构设计标识符的能力

多读优秀源码。了解结构设计模式(Design pattern)。结构设计模式代表了最佳的实践,通常被有经验的面向对象的软件开发者所采用。多写。用心的写。同时经常回顾自己过去写的标识符。

更易管理工作的工程项目正式版

语义化版本规范化

让工程项目正式版显得更易管理工作。通过这个规范化,采用者能了解版本变更的影响范围。 版本格式:主正式版.次正式版.修订号,正式版递增规则如下:

主正式版:当你做了不兼容的 API 修改,次正式版:当你做了向下兼容的功能性新增,修订号:当你做了向下兼容的问题修正。

先行正式版及版本编译元数据能加到“主正式版.次正式版.修订号”的后面,作为延伸。

明晰明了的递交关键信息

我采用的递交关键信息的格式为: 递交类型: 任务id或备注。如:fix: 1432。注意:不要忘写列冒号和字符。递交类型包括:

feature: 新功能。fix: 改bug。perf: 优化。 如: 标识符写法优化,性能优化等。ver: 版本升级。doc: 添加文件格式。test: 添加测试。

能用commitlinthusky

来验证递交关键信息符合递交关键信息规范化。

怎样写下Bug少的标识符

上面提到的:科学合理的标识符结构设计能降低Bug率。除此之外,还能通过:标识符评审,标识符review和结对编程。

标识符测试

通过标识符测试,能验证标识符的正确性。这边指的标识符测试,是指用标识符来测试标识符。

要求工程项目组每次标识符递交前,所有测试用例要通过。测试用例覆盖的标识符的bug不会太多。

结构设计和编写测试用例很耗时间。因此,只对必要的标识符做标识符测试。标识符测试的适用场景:

长期工程项目。关键的标识符。如常用的组件和涉及到钱的业务逻辑。业务变动慢的标识符。

我目前测试框架用的是 Jest,断言库用的是 power-asset

。端对端的测试框架所推荐等我玩得溜后再所推荐。

标识符评审(Code Reveiw)

标识符审查一般能找到及移除约65%的错误,最高能到85%。

标识符评审是指通过阅读标识符来检查源标识符与代码国际标准的符合性以及标识符产品质量的活动。标识符评审能是一个人 Review 其他人的标识符,也能是一群人一起 Review 标识符。

标识符评审的好处:

在工程项目的早期发现缺陷,将损失降至最低。评审的过程也是重新梳理思路的过程,双方都加深了对系统的认知。促进工程项目组沟通、促进知识共享、共同提升。

结对编程(Pair Programming)

结对编程是一种敏捷软件开发的方式,三个程序员在一个计算机上共同工作。一个人输入标识符,而另一个人审查他输入的每一行标识符。输入标识符的人称作驾驶员,审查标识符的人称作观察员(或导航员)。三个程序员经常互换角色。

结对编程的好处:

提升标识符产品质量。提升工作时的专注度。互相学习。加深工程项目组核心成员之间的互相了解。

坏处:可能会出现一些争执。争执时间超过10分钟还没结果的,能找Leader。

他们工程项目组做结对编程时的要求:

结对编程会按单个任务来,预约好时间,至少提前十五分钟。结对编程 适合 1个小时以上的任务。结对编程前,参与者双方都要了解任务的市场需求。驾驶员列出市场需求描述,实现步骤,测试文本。结对编程的过程中,双方保持交流。

工具

Sonar

标识符产品质量管理工作工具。Your teammate for

Code Quality and Security。PhabricatorFacebook 出品的任务管理工作软件。里面包含标识符审查工具,任务管理工作,bug 追踪等功能。

我组建了一个后端自学团,学习后端技术。在团里,会严格监督大家每天学习打卡,给大家分享学习资料,给大家匹配学习伙伴,定期组织大家进行项目实战。想要加入一起学习的小伙伴能私信我或是给我留言。

链接:Web后端高阶之路: 提升标识符产品质量篇

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务