很多人可能和我一样是第一次听到“前端架构”这个词,第一反应是:“前端架构呢?”在后端开发领域,系统规划和可扩展性非常重要,所以在开发工作开始前很久就邀请架构师加入项目,他们会和客户讨论要搭建的平台的架构需求,将使用什么技术栈?什么是内容类型?创造?软件架构师的职责是确保项目中的每一步都在总体架构的指导下进行,而不是随意决定。在目前的前端领域,随着JS框架、UI框架以及各种类库的丰富,前端架构也变得非常重要。如果一个大型项目没有合理的前端架构设计,那么前端代码可能会被不同的开发者随意引入。各种库和UI框架会导致代码量变得异常臃肿,最终的结果可能是代码变得无法维护,页面性能低下,不得不推翻重构。因此,我们需要在项目开始前就对前端代码进行结构化。一旦前端架构师设计了所有前端开发人员必须遵循的检查机制,建立了系统设计的规范,那么项目就有了衡量代码质量的标准,前端开发人员就可以还可以享受更高效的工作流程。因此,前端架构的定义可以用下面一句话来概括:前端架构是一系列旨在提高前端代码质量,实现高效可持续工作流的工具和流程的集合.本系列前端架构文章将围绕前端架构的四大核心展开,即代码、流程、测试、文档。前端架构的四大核心(一)代码归根结底,所有的网站都是由一堆文本文件和资源文件组成的。当我们面对制作网站产生的大量代码时,我们会发现对代码和Resources设定一个期望是多么的重要。在代码部分,我们将重点介绍如何在系统架构中实现HTML、CSS和JavaScript。(2)流程已经过了FTP上传文件的时代,所以现在重要的是思考如何使用工具和流程来构建一个高效无差错的工作流程。工作流程变得越来越复杂,适用于它们的工具也是如此。这些工具带来了更高的生产力、更快的效率和一致的代码的惊人效果,但同时也伴随着过度工程化和抽象化的风险。因此,需要改变现有的工作流程。(3)测试要构建一个可扩展的、持续优化的系统,需要保证新旧代码能够很好的兼容。我们的代码不是独立存在的,它们都是一个更大系统的一部分。创建广泛的测试解决方案以确保旧代码它仍然可以正常运行。(4)文档一般来说,如果不是团队重要成员的离开,我们很难意识到文档的重要性。到时候,大家就得停下手头的工作,优先把所有的文件写好。作为一名前端架构师,在开发项目的同时,一定要善于写出好的文档。代码核心(一)HTML在前端架构中,HTML作为页面的基础是非常重要的。如果最初的HTML写得很烂,你将不得不写很多不必要的CSS和JavaScript来弥补。相反,如果最初的HTML写得足够好,您可以编写可扩展和可维护的CSS和JavsScript。先来看一些初级前端工程师可能会写的HTML代码:"header-inner"class="container-12clearfix">
