前端进阶之路：前端架构设计（1）-代码核⼼
可能很多⼈和我⼀样, ⾸次听到"前端架构"这个词, 第⼀反应是: "前端还有架构这⼀说呢?" 在后端开发领域, 系统规划和可扩展性⾮常关键, 因此架构师备受重视, 早在开发⼯作启动之前, 他们就被邀请加⼊到项⽬中, ⽽且他们会跟客户讨论即将建成的平台的架构要求, 使⽤还什么技术栈? 内容类型是什么? 这些内容如何被创建?软件架构师的职责就是要保证项⽬中每⼀步都在总体架构的指导下进⾏, ⽽不会随机决定.
前端架构前端架构
现在的前端领域, 随着JS框架, UI框架和各种库的丰富, 前端架构也变得⼗分的重要. 如果⼀个⼤型项⽬没有合理的前端架构设计, 那么前端代码可能因为不同的开发⼈员随意的引⼊各种库和UI框架, 导致代码量变得异常臃肿, 最终结果可能是代码变得⽆法维护, 页⾯性能低下，不得已只能推翻重构. 所以我们需要在项⽬开始前, 同样的需要对前端代码进⾏架构, ⼀旦前端架构师设计出所有前端开发⼈员都要遵循的检验机制, 建⽴起系统设计的规范, 那么项⽬就拥有了可以衡量代码质量的标准, 前端开发⼈员也能享受到更⾼效的⼯作流. 所以, 前端架构的定义可以⽤以下⼀句话来总结:
前端架构是⼀系列⼯具和流程的集合, 旨在提升前端代码的质量, 并实现⾼效, 可持续的⼯作流.
本系列的前端架构⽂章, 将分别围绕前端架构的四个核⼼展开, 分别是代码, 流程, 测试, ⽂档.
前端架构的四个核⼼
(⼀) 代码
归根到底, 所有的⽹站都是由⼀堆⽂本⽂件和资源⽂件组成的. 当我们⾯对制作⽹站所产⽣的⼤量代码时, 就会发现为代码和资源设定⼀个期望是多么重要. 在代码部分, 我们会专注于如果实现系统架构中的HTML, CSS, JavaScript.
(⼆) 流程
现在早已过了FTP上传⽂件的时代, 那么现在重要的是思考怎么⽤⼯具和流程构建⼀个⾼效且避免出错的⼯作流. ⼯作流变得越来越复杂, 那些⽤于它们的⼯具也同样如此. 这些⼯具在提⾼⽣产⼒, 加快效率和保持代码⼀致性上带来了惊⼈的效果, 但也伴随着过度⼯程化和抽象化的风险. 所以, 现有的⼯作流是需要改变的.
(三) 测试
要构建⼀个可扩展和可持续优化的系统, 必须保证新代码和⽼代码能够很好的兼容. 我们的代码不会独⽴存在, 它们都是⼤型系统中的⼀部分. 创建覆盖⾯⼴泛的测试⽅案, 能确保⽼代码还能正常运作.
(四) ⽂档
⼀般⽽⾔, 如果不是团队中的重要成员要离开, 我们⼏乎都不会意识到⽂档的重要性. 等到那个时候, ⼤家将不得不停下⼿头的⼯作, 优先编写所有的⽂档. 作为前端机构师, 你要善于在项⽬开发的同时编写良好的⽂档.
代码核⼼
(⼀) H TML
前端页面模板
在前端的架构中, HTML作为页⾯的基础是⼗分重要的. 如果初始的HTML写得很烂, 将要写出很多不必要的CSS和JavaScript来弥补. 反之, 如果如果初始的HTML写得⾜够好, 就能写出根据可扩展性和可维护的CSS和JavsScript.
⾸先我们来看⼀些初级的前端⼯程师可能写出的HTML代码:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。