当我们开始搭建前端项目的时候,需要从这五个方面去考虑:易开发、可扩展、易维护、易构建、易测试。
易开发:首先是开发工具是否完善,我们采用的技术栈是否有对应的开发工具来支持。然后我们需要考虑所用的技术栈的生态圈是否繁荣。这就意味着我们在遇到实际的业务场景的时候,生态圈中是否有对应的解决方案。还有就是社区是否活跃,那这意味着当我们遇到问题的时候,比如说遇到一个 bug, 或者是遇到一个很难解决的问题,那社区中是否有人遇到类似的问题。如果社区很活跃,那我们可能会很容易去找到答案,所以这个是我们判断技术栈是否易开发需要考虑的问题。然后我们再进行项目架构的时候,要选择这几个方面都非常完善的技术。
可扩展:最主要是我们增加新功能的时候是否容易,是否会增加系统的复杂度。如果说我们每增加一点功能,系统复杂度显著增加。那么当项目变得庞大之后,整个项目会变得越来越难扩展以及越来越难维护。这里需要我们去考虑以什么样的架构的方式,能够让系统在扩展的同时,整体的复杂度并不会显著的提高。
易维护:这方面主要的表现是我们写出来的代码是不是容易理解。不能够去依赖于个人的技术能力或者是技术的素质来保证代码是否容易理解,而是要能够设计出一种实践方式或者是架构方式,让大家都在一定的规范中去写代码,大家写出来的代码风格趋于一致。这样的话,整体项目才是能够容易理解的。而不是每个人写出来的代码都是有各自的风格。所有的代码应该是保证一致性,就需要由最佳实践的这种规范来定义,以及通过代码校验的工具来保证。另外是文档是否健全,我们在开发项目的时候,需要用注释、架构图,或者是文档,去描述项目中的一些关键点。让后来的开发人员,或者是过一段时间之后,你去看仍然能够很容易去理解项目。这样才能够去维护项目。
易构建:主要是我们的项目架构要是一个通用的技术和架构,而不是非常特殊的自己创建的一些技术架构。这样的话,我们可以保证现有的一些构建技术不需要做太多的定制化,就能够进行打包和部署。第二是构建工具的选择,因为现在比较流行的构建工具,比如说webpack、vite、rollup等等,这些工具其实都对应一定的技术架构。所以说我们基本上要用这些工具支持的技术栈。如果使用一个非常冷门的技术,可能它有些特别之处,但是构建的话需要做很多事情,那我们会减少选择这个技术的优先级。
易测试,这是非常关键的一点,我们能够进行单元测试的前提是,我们要保证能够写出易于测试的业务逻辑。这就要求我们对业务逻辑的功能的分层必须要非常清楚,比如分为UI层和数据层。这样的话才能够进行单元测试。单元测试在传统的web开发的时候是一个非常困难的问题,因为以前比如说我们基于jquery开发,那其实所有的业务逻辑都是揉在一起的,你很难去进行单元测试。然后你的业务逻辑副作用必须非常的少,就是说每个功能模块。它里面的内容必须是高内聚的,对外部的依赖非常少,这样的话才更容易测试。第三,我们尽量使用纯函数,那这个也是 react 技术非常倡导的一点,比如说。react 的组件基本上可以理解为一个纯函数,它的输出完全取决于他的输入,这样的函数很容易进行单元测试,所以我们的架构也需要保证这样几点才能够容易测试。
这五个方面并不是相互独立的,不是说我们每个方面都可以做得很好,而是要有一个权衡。比如说,一个应用程序如果是易开发的,那它可能易扩展的程度就会差一点。举个例子,我们用jquery开发一个简单功能,它可能非常容易开发,一个页面中可以包含所有的js、css和html,我们在一个页面中就可以完成一个简单的功能。可以说是非常易于开发,但是这样的结构,会很难扩展或者维护。当功能变复杂或者要增加新的功能的时候,那他就会变得困难。所以我们在考虑够需要在各方面做一个权衡,然后在某些方面通过一些工具来改善它带来的一些缺点。