专栏首页九彩拼盘的叨叨叨写出好的前端代码不是件容易事

写出好的前端代码不是件容易事

什么样的代码算是好代码? 在我看来,易于维护的代码就是好代码。当然代码还可以从性能,安全等方面来考量。这些不在本文的讨论范围之内。

怎样的代码算是易于维护的呢? 当需求发生改变,或要做新需求时,我们能较无痛的改代码来满足需求。

在我看来,易于维护的代码要满足如下条件

代码风格的统一

如果一个项目,代码风格不统一,会有不少问题,如

  • 修改代码时,不知按照哪种风格来写
  • 增加对代码理解的时间
  • 影响看代码的心情

尽可能的避免代码重复

重复的代码会产生的问题是:如果重复代码的逻辑需要改,则需要改多个地方,容易出错。

如何减少重复的代码呢?

  • 在JS中,可以将重复的代码写成一个方法,如果是可通用的,可以写在独立的JS文件中。
  • 在CSS中,则需要借助Sass,Less之类的预处理语言的Mixins的功能。将重复的部分写成一个Mixins。

配置和逻辑分开

如果是在逻辑中写死的配置,会导致的问题是:

  1. 每次需要改配置,必须去逻辑中找。如果逻辑很复杂,那这过程无疑是很痛苦的
  2. 如果逻辑会被多个地方用,而不同的地方用时,配置会有不同时,那还要去改逻辑

我的一般做法是

  • JS中,对于整个站的通用配置,写在config.js里。如果是某个js的配置,在文件的开头,用defaultParam对象来存放可变的配置,用const来定义不可变的配置
  • CSS中,依旧要借助预处理语言。对于整站的配置,定义在_variables.scss里。对于某个具体CSS文件里,在文件开头用变量来定义

减少代码的副作用

做法:

  • JS中,方法中的沟通尽量不要用全局变量;不要在Array之类的全局对象的原型链上添加方法;尽量不要定义全局的方法和变量:如果确实有很多变量,方法放在全局上,可以学习jQuery,将很多变量,方法放在一个全局对象上;自定义事件,事件的名称也要有命名空间。
  • CSS中,要做到无副作用,难度很大。对于简单页面,一个方法是,把页面上的元素都分成一个个组件,写样式时,选择器要用组件选择器 当前元素选择器。当组件变的复杂时,组件也会包含很多子组件。然后,选择器就会越来越长。。。我的解决方案是用的BEM

提高代码的可读性

做法:

  • 变量,方法等的合理命名,通过名称可以知道这个大概做什么的。如果则要加注释来说明一下。
  • 对于不容理解的代码加注释
  • 尽可能不用魔法数字,如以下代码
function getRandomNum(){
    return 100 * Math.random();
}

我们会觉得上面代码中的100很莫名其妙。如果改成

function getRandomNum(){
    const MAX_RETURN_NUM = 100;
    return MAX_RETURN_NUM * Math.random();
}

是不是觉得易读多啦XD

  • 对于HTML,选择合适标签

一个方法只做一件事

这样做,一来提高代码的复用性,二来让调试也变的更容易,三来让测试变的更容易。

写测试代码

通过写测试,我们再也不怕,改的代码影响以前的功能啦,也可以放心的重构代码啦~当然,可被测试的代码,其质量也不会特别差。

暂时就想到这些。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    初级前端和高级前端有什么差别?在我看来,初级前端关注点在完成功能,高级前端能在完成功能的基础上,做的又好又快。做的好,就是代码质量高,做的快就是开发效率高。

    Joel
  • 最近写的《后台管理系统的前端代码生成工具》介绍

    《后台管理系统的前端代码生成工具》做的是生成项目 admin-template 的列表,新增,编辑,详情页的代码,如上图所示。通过点击“生成下载内容”,点相应的...

    Joel
  • 听说你想学前端?--非同寻常的前端入门法

    但是,学习的效果并不好。最近我读了些关于学习方面的书,觉得学习需要方法。下面我按照重要程度一个个来说。

    Joel
  • 写了 100 万行代码的程序员身上发生了什么故事

    看完之后就头皮一阵发麻,让我写一万行的代码?!are you kidding me?(黑人问号脸)我估计写到20万的时候就会突然有个疑问—-“咦?我的头发呢?”

    哲洛不闹
  • Google 为什么把几十亿行代码放在一个库

    谷歌最早使用 CVS 进行代码管理,1999年改为 Perforce。那时是一台 Perforce 主机,加上各种缓存机。

    黄泽杰
  • 人工智能在软件开发领域应用现状

    江湖上一直流传着这样的传闻:“程序员们很快就要失业了,因为人工智能马上就能写出完美的代码了”。人工智能是以软件形式存在的,编写了这些强大软件的码农们,如果被自己...

    yuanyi928
  • Google 为什么把几十亿行代码放在一个库

    《ACM通信》有一篇论文《为什么 Google 要把几十亿行代码放在一个库?》,作者是谷歌基础设施小组的工程师。作者详细讲述了Google的代码为什么全部放在一...

    芋道源码
  • 谷歌的代码管理

    谷歌和 Facebook 都只有一个代码仓库,全公司的代码都放在这个库里。 我一直很困惑,为什么要这样做,不同语言的项目放在一个库有什么好处? 最新一期的《AC...

    用户1667431
  • 谷歌的代码管理

    谷歌和 Facebook 都只有一个代码仓库,全公司的代码都放在这个库里。 我一直很困惑,为什么要这样做,不同语言的项目放在一个库有什么好处? 最新一期的《AC...

    ruanyf
  • 天天写代码,觉得自己特别苦逼?嗯,还有20年AI就来解放你

    Root 编译整理 量子位 出品 | 公众号 QbitAI “年轻人呐,别想着写代码写到老啊喂。时代在变啦!” 美国能源部橡树岭国家实验室研究委员会苦口婆心地劝...

    量子位

扫码关注云+社区

领取腾讯云代金券