前端架构：从入门到微前端
上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
上一章目录下一章

3.2 代码组织决定应用架构

开发人员在构建架构之后面临的第一个挑战是，如何读懂代码结构。在接触代码之前，我们所要面对的就是代码的组织方式。我们可能会做如下一些事情：

◎ 打开README了解应该阅读哪些相关的资料。

◎ 阅读package.json了解系统的基础设施、使用了哪些组件库，以及配置了哪些构建脚本。

◎ 浏览主目录下的一个个文件，了解系统的一些插件的配置。

◎ 进入项目代码中阅读和了解。

不同框架有不同的文件组织方式，不同团队也有不同的规范。比如使用Java或Spring框架，默认会遵循这样的一些文件夹规范：model文件夹用于存放与模型相关的代码，repository文件夹用于存放与数据源相关的代码，service文件夹用于存放与服务相关的代码等。这些代码的组织形式实际上反映了应用的架构。

Python语言的Django框架使用的方式是基于业务的组织形式，即每个“应用”（即某一业务领域，如用户管理）是一个单独的文件夹，在它的目录中拥有自己完整的相关代码。下面是一个Django应用的代码结构：

        .
        ├—— __init__.py
        ├—— admin.py
        ├—— apps.py
        ├—— migrations
        |   └—— __init__.py
        ├—— models.py
        ├—— tests.py
        └—— views.py

对于前端来说也是相似的。下面是Angular生成的应用（通过ng new xxx可生成）的主目录下的结构：

        e2e                                     //E2E测试文件夹
        src                                     //源码文件夹
        .editorconfig                           //编辑器统一格式配置文件
        .gitignore                              //Git忽略文件的配置文件
        angular.json                            //Angular配置文件
        package.json                            //软件包相关信息的配置文件
        README.md                               //文档
        tsconfig.json                           //TypeScript编译配置文件
        tslint.json                             //TypeScript代码风格配置文件

通过上面的文件名信息，我们可以快速地了解系统的一些基础组成。这对于其他前端框架也是相似的，这些配置文件实则是定义了一系列的规范。对于不同的开发者，它们可以起到规范的作用。

在src目录的app文件夹下，有如下一些文件：

        ├—— app.component.css
        ├—— app.component.html
        ├—— app.component.spec.ts
        ├—— app.component.ts
        ├—— app.module.ts
        └—— header
            ├—— header.component.css            //CSS样式文件
            ├—— header.component.html           //HTML模板文件
            ├—— header.component.spec.ts        //测试文件
            └—— header.component.ts             //TypeScript代码逻辑

面代码中的header是通过Angular的CLI生成的。举Angular的例子是为了说明代码组织结构的重要性。此外，还需要注意文件名。如果这里的header组件实际上是一个用于页面底部的组件，那么就会很尴尬。

从这里的代码组织形式来看，它更像是基于组件的架构，而不再是类似于MVC形式的架构。对于其他前端框架比如React，如果我们通过状态来管理应用，那么从组织构建上看，它像MVC架构。

从文件名上就可以了解这是一个组件（Component），而由于CSS、HTML、TypeScript的分离，我们又可以快速地在修改代码时找到对应的文件。这种特性对于庞大工程的项目来说相当有帮助，但是对于简单的业务，比如加载（Loading）组件时，使用与React、Vue相似的结构会更简洁，即一个文件包含CSS、HTML、JavaScript代码。

注意：这里主要针对框架默认生成的代码组织架构，一个Vue组件也可以拆分成多个文件，一个Angular组件也可以写成一个文件。而默认生成的，意味着这个框架是约定俗成的，在生成的时候需要加以注意。

因此，当我们定下了前端应用的架构时，我们应该按照与架构相似的方式来编写，以免随着代码架构的变化而腐烂。当架构在未来发生变化的时候，我们就需要相应地更改代码的组织方式。

上一章目录下一章