写点什么

前端架构趣谈

  • 2019-09-06
  • 本文字数:2072 字

    阅读完需:约 7 分钟

前端架构趣谈

时至今日,对项目架构的设计判断仍是一项极为复杂的难题。每个人在启动项目之初,都会参考一系列不同的文章与博客,希望借此确定项目架构的具体开发方法。​



给设计质量低下的项目“擦屁股”,可能要比设计好项目更加困难。


您的项目架构应该简洁且直观,这样当有新的开发人员接手管理时,才能够在理解数据跟踪及其背后体现的 UI 路径时不致遇上太多无法理解的问题。


人们使用的是架构而非一个个独立组件,因此架构中的各个组件应该只是独立的文件。


为什么我们的项目架构应该尽量强调简洁与直观?


  • 易于管理。

  • 易于理解。

  • 编码经过优化。

  • 组件更新更简单。

  • 文件或者组件越小,调试起来越轻松。


下图所示,就是本文想要表达的基本观点。



项目的架构


下面,我们将通过一系列明确的流程帮助大家了解项目的结构设计方式:

组件划分

组件越小,就越易于处理


将 UI 拆分成一个个小型组件。代码行(LOC)越少,我们对代码的掌控能力就越强,调试与必要时的更新也就越简单。大家可以尝试通过以下方式增强项目的架构:


  • 将公共组件移动到不同的目录当中。

  • 将每个文件的组件容纳量限定为 2 到 3 个,且确保其中不包含公共代码组件。

  • 尝试对组件进行概括,以便在不同的用例中反复使用。

  • 将彼此相关的组件划分到同一个目录当中,且保证这些目录不会在目录之外的组件中使用。

辅助函数

辅助函数应该强大且中立


辅助函数应该与渲染逻辑区分开来。仅在组件需要时使用辅助函数,且一般应该进行声明。辅助函数的作用在于:


*处理从服务器处接收到的数据以适应 UI 逻辑。


  • 特定于组件逻辑。

  • 与浏览器规范相关。

  • 与开发人员实施的逻辑相关,其通过不同的标准以达成目标。

  • 将彼此相关的组件划分到同一个文件当中,将公共函数划分至 utils*文件当中。

API 服务

服务是数据间的链接


API 服务是指负责在参数特定的情况下,调用服务器以获取数据的代码。我们不应直接从 UI 逻辑当中调用服务。因为如果我们需要在多个位置实现相同的 API 调用,且端点、标题等会发生变更,那么对不同位置进行服务修改将变得非常困难。下面来看如何进行服务声明:


  • 服务声明应作为 API 调用的基本实现。

  • 应接受配置(变量等)以作为 API 调用的必要参数进行传递。

  • 应将从服务器处接收到的数据原样传递给调用组件。

  • 如果使用 React 以及 Apollo,请利用 Render Props 方法构建服务组件。

Config

Config 是接入服务器的关键


Config 当中包含关于应用程序运行所在环境的具体配置。请确保将配置与实际代码库拆分开来。配置应当:


  • 使用不同的文件对应不同的环境类型。

  • 根据需要获取的不同资源类型(包括资产域、服务器 API URL 等)而有所不同。

路由

路由是保障 UI 使用体验的主要方式


路由决定着我们在 Web 应用程序当中需要实现的不同页面的 URL 格式或模式。在定义路由时,需要注意以下几点:


  • 尽可能保持路由的正确顺序,以保证 UI 路径不致丢失。

  • 路由的命名应该尽可能简短。

Static

Static 文件是指未包含在逻辑当中的文件


Static 文件不同于 CSS、图像、js(很少变更)以及字体等文件。Static 文件(静态文件)应该:


*根据其类型进行分组。


  • 尽可能降低其体积。

页面

页面代表着 Web 应用程序当中的不同目标


作为来自 NextJS 中的概念,页面目录中的目录或文件,代表着路由路径的目的地。如此一来,当我们在破译路由并拆分出组件时,就能够轻松将路由与目的地关联起来。页面应该:


  • 仅包含路由及其它组件之间的接触点。

  • 包含引用初始条件以引导页面的各个文件。

  • 不包含完整逻辑,我们应该将逻辑根据功能移动至不同的组件当中。

  • 认真进行命名,因为该文件的名称代表着 build 文件与路由组件(在使用 NextJS 的情况下)。

Graphql 查询

Graphql 是从服务器当中获取数据的数据查询语言


Graphql要求查询格式利用特定键获取数据。这种查询语言的文件就好根据不同的查询与不同的文件保存在不同的目录当中。具体要求包括:


  • 各查询应根据特定类型进行分组,且不同类型在组内对应不同的目录。

  • 以同样的方式对变异与订阅进行分组。

  • 应将部分查询片段从查询当中剔除,例如不同目录中的公共代码片段。

  • 尽可能为各个查询、变异等名称保留前缀,用以区分请求不同服务器的不同 Web 应用,例如 abcPost 查询与 xyzPost 查询等。这样能够更轻松地区分指向不同 Web 应用程序的相同查询。

  • 当组件当中包含或者需要文件时,请尽量将名称保留为大写形式,以确保开发人员能够轻松判断组件与查询之间的区别。

其它注意事项

其它能够为 Web 应用程序提供助力的工具与技巧


这部分内容包括可用于启动应用程序、管理 build、管理电子表格以及管理所使用文件语法的不同工具。这些工具应包括:


  • 用于启动前端服务器的 Server 文件。

  • 用于指定项目中所使用包或模块的包清单文件。

  • 用于描述项目规范、项目发布与使用方式、理由以及内容等不同要素的 Readme.md 文件。

  • 如果使用 babel 进行脚本编译,则应包含.babelrc 文件。

  • 在使用 webpack 作为捆绑工具时的 Webpack 配置。

  • 如果使用任何其它工具或软件包(例如 apollo-client),则应为该软件包的配置创建新的目录,因为该文件当中可能包含多个彼此相关的文件。


英文原文:


https://medium.com/gradeup/project-architecture-for-front-end-applications-5db31abb63c2


2019-09-06 15:496081

评论

发布
暂无评论
发现更多内容

Vue 项目如何迁移小程序

FinClip

流量控制--MQTT 5.0新特性

EMQ映云科技

物联网 IoT mqtt 流量控制 企业号 3 月 PK 榜

MSE 诊断利器上线

阿里巴巴云原生

阿里云 云原生 微服务引擎

稳中求进的转折之年,企业如何重启“增长飞轮”?

脑极体

京东

读者1群辛辣反馈,关于《中国式SaaS有没有希望(能赚钱吗)?|内行深度PK ​》

B Impact

架构实战营模块三作业

null

阿里云函数计算 FC 助力高德 RTA 广告投放系统架构升级

阿里巴巴云原生

阿里云 云原生 函数计算

TCL 拥抱云原生,实现 IT 成本治理优化

阿里巴巴云原生

阿里云 云原生 IT IT治理

3DCAT+一汽奥迪:共建线上个性化订车实时云渲染方案

3DCAT实时渲染

实时云渲染 实时渲染云 3D实时云渲染

尚硅谷Redis7实战教程发布

小谷哥

尚硅谷Java课程进化升级

小谷哥

阿里云与 Kubecost 合作,容器服务 ACK 支持使用 Kubecost 进行成本管理

阿里巴巴云原生

阿里云 云原生 容器服务

ListView的数据更新问题

芯动大师

ListView 数据更新 demo源码

Chrome 无魔法使用新必应(New Bing)聊天机器人

kcodez

chrome ChatGPT newbing 新必应

配运基础数据缓存瘦身实践

京东科技开发者

数据库 redis 缓存 key 企业号 3 月 PK 榜

支付宝小程序迁移至 FinClip

FinClip

基于声网 Flutter SDK 实现多人视频通话

声网

flutter RTC RTE 视频通话

IoTLink 版本更新 v1.8.0

山东云则信息科技

物联网平台 物联网 springboot

写作一年之后开始反思博客应该写什么

宇宙之一粟

个人成长 写作 博客

尚硅谷SSM项目视频发布

小谷哥

Android通用缓存存储设计实践

杨充

当TO B客户说“没有预算”时,怎么卖SaaS|SaaStr观点

B Impact

二本毕业,靠学姐帮助混进大厂,女朋友却离我而去

程序员晚枫

程序员 女朋友 大厂 校招

OpenYurt 在龙源 CNStack 云边协同项目的应用

阿里巴巴云原生

阿里云 开源 云原生 openyurt

使用NineData构建任意时间点(PITR)数据恢复能力

NineData

开发者 数据恢复 dba 数据备份 全量同步

字节跳动新一代云固件Cloud Firmware 2.0来啦

字节跳动技术范儿

云计算 Linux OCP

适合在公司内网部署的项目管理软件有哪些?

爱吃小舅的鱼

项目管理 项目管理软件

【MapStruct】引入MapStruct之后,项目启动java:找不到符号

No8g攻城狮

springboot 异常处理

轻量级、简化、QDSAA—特斯拉 IT风格曝光160p Investor Day完整PPT

B Impact

模块一作业

只因

架构训练营

尚硅谷禹神版前端入门教程发布

小谷哥

前端架构趣谈_语言 & 开发_Aman Agarwal_InfoQ精选文章