《前端技术架构与工程》初次笔记

前几天买的书昨天到了，今天闲来看看。发现内容很对我口味。

购书原因

它山之石可以攻玉，书本是每一个大佬的心血（灌水的那些除外），值得反复阅读。

补充：买书的时候也像是捡漏，说不定捡到金子，也说不定买到不合意的。不过如果能买到一本称心的书，其他都是值得的。

所以我学习的时候不仅自己写笔记还看牛逼的人写的笔记。因为自己写笔记是探索，虽然学得很深刻，但是就像是走迷雾模式的地图，要把所有的路都走遍了，才能找到正确的路。而看牛逼的人写的笔记就像是跟着人走地图，也许不太懂，但是走着走着就走到终点了。

我买书前一般都是冲着学以致用的目的买书，买这本书之前我想着把前端的相关部分都汇总一下，然后哪些地方需要深入了解再深入了解。可是汇总的过程有许多细节，如响应式、安全、优化、闭包等等都没汇总满意（前后因果关系没捋顺），而且这个过程还是未知、不系统的。

遂趁着我买书的时候，看看前端相关的书，如前端架构、前端面试、前端入门。然后借鉴别人写好的内容补充自己的内容，免得自己在网上慢慢找。

购书过程

买书的关键点：书的目录（可以看出书的大致内容）、书的作者或名气（厉害的作者大概率写的 是好书）、书的出版时间（防止书的内容过时）

理论书、基础书的购买偏向于买老书，老书的好处是思想经得起考验，缺点是有些内容可能过时。不过用来入门以及温故很好。

实战书和前沿的书偏向于买新书，新书的好处是最新的，缺点是质量没有保障。用来参考很好。

我买的是新书。内容是前端架构、前端面试之类的书，这些书会全面把前端的东西汇总。

首先在淘宝上搜“前端”，然后就有书推荐。

接着看看书的目录、作者、出版时间、购买数就可以确定买哪些书。书的目录可以大致了解书的内容，书的作者可以大致从侧面体现书的质量，熟读出版时间和购买数则是看书过时严不严重。

最后搜索这些书，选择价格合适的就下单。

目录结构：不算特别能理解，但是里面有我想要了解的点；

作者：前端工程师，现就职与腾讯；

出版日期：2020年1月第一版

阅读体验

购书之前不知道内容，都是看目录结构、作者和购买数来下的单，不过三本中还好有两本我满意，最满意的就是这本。里面把前端开发整个流程的每个细节都点到了，而且还讲明白了前因后果。

阅读笔记

不一定按照书的目录来，会把自己觉得重要的点和理解的知识结构来写。有些地方还会加以补充。

前置知识：软件工程（需求分析、系统设计、系统开发、系统测试、系统运维）

没有什么知识是没有无中生有的，前端架构我觉得脱胎于软件工程，或者说工程思想贯穿着每一种开发（无论是软件开发、网站开发、土木建设），前端架构中有工程思想。

这本书可以补充自己对架构师的认识。虽然自己水平不够，但是可以了解了解，对于开发也是十分有帮助的。而且自己单独做小项目的时候，用架构师的知识去设计架构，更有利于自己开发。

这本书的核心：以业务为出发点，架构聚焦于代码，工程聚焦于流程。

第一章 绪论

说起前端，我就觉得很有必要说一下前端的发展史，下面这段发展史是我之前写过的一篇文章的一部分：

前端发展史

网页的开始
（静态网页时代）：最初的网页是欧洲粒子物理研究所的科学家为了方便查看共享文档和论文，而基于XML语言开发的（我之前还以为先有HTML后又XML，XML是对HTML的补充）。所以前端开发的全局对象是document。当时网页只具备文本图片的显示以及页面的相互跳转hyper link（注意没有表单，因为表单涉及交互）。最初的web，功能单一，开发不复杂。

科普：1990推出HTML；

局限性：有时候只是一部分内容需要改变也需要重新准备一个文档，而且还不能交互。

（动态网页时代）：这个时候PHP、jsp等闪亮登场，使前端网页从静态走向动态。这个时候网页就可以后端脚本语言修改HTML文档的内容，避免哪怕是一点内容改变就需要新建一个网页。同时也实现了交互。

科普：1995年推出PHP；1996年推出CSS；1997年推出JS；

局限性：哪怕改变网页的一小块内容，浏览器也需要重新请求和渲染整个页面。这就导致页面重载巨卡；体验十分扎心。

网页的少年时期
（ajax网页时期）：从1999年开始，ActiveX和XMLHttpRequest的陆续问世，ajax闪亮登场。ajax（异步JavaScript和XML）通过XMLHTTPRequest对象，可以在不重载页面的情况下与web服务器交互数据，再JavaScript的document对象，开发者就可以通过ajax实现网页页面局部内容刷新。这使得网页修改一小块内容，（由于是异步）浏览器响应更快，比之前的体验happy些；

科普：2005年ajax开始流行；

局限性：虽然没有巨卡，但是前后端没分开，每个程序员都是全栈工程师，即搞业务逻辑又搞页面表现；新的问题就是开发效率。页面的 HTML还是通过套模板的方式生成：美工生成HTML模板，程序员用jsp等技术把动态内容添加上去；

（模块化开发）：2011~2014年，模块化思想占主导。2011年，阿里有一款TMS的产品，可以用模块化搭建的思路解决了页面批量生产的问题，当时淘宝商城的双11的活动页面用这款大杀器搭建完成。当时比较流行的模块化协议有KMD（以Kissy为主）、CMD（sea.js为代表），KMD主导了淘宝天猫、Kissy应用，CMD主导了支付宝及外部社区。玉伯在当时前端圈名气高；

还有许多细节，我就不一一赘述了。

网页的现在
（前端工程化）：2009基于Google v8引擎创建的web服务器node.js诞生；npm、webpack；

（前后端分离）：2013年5月，react推出。随着大家对浏览器页面的视觉和交互要求越来越高，套模板的方式已经无法满足需求，表现层开始慢慢迁移到浏览器中，一大批react.js、vue.js的框架崛起，前后端分离了。后端工程师只负责提供接口和数据，专注业务逻辑的实现。前端取到数据后就在浏览器中展示。

科普：ajax实现了无刷新的数据交互、前端路由实现了无刷新的页面跳转。ajax将web page发展成web app，而前端路由给web app增加了更多可能，如单页面应用。

（终端碎片化）：移动端浏览器的发展；小程序；

（领域细分）：小前台（面向消费者端的web与轻APP业务场景）、中后台（面向企业OA等业务场景）、数据可视化、web新的衍生（AR、VR、3D、网友、直播、富导购等）；

网页的未来五年
我也不知道啊，但是肯定是效率上、功能上或者安全上的提升。往性能更好、开发运维更简便的方向上走。同时前端的发展不能只关注网站，其他硬件领域的（量子计算机、5G等）、软件方面的（VR、AI、大数据）都需要关注，毕竟都是相互联系的。

了解前端发展史，然后了解一下软件工程的必要性。

软件工程

软件工程出现的初衷是为了解决软件危机，即1已完成”的软件，不满足用户的需求；2进度不能保障；3开发成本难测；4质量没有保证。

在大学里学习软件工程这门课的时候，我更关注软件工程的生命周期即分析、设计、开发、测试、运维。结果我在做毕业设计的时候就把上述的四个软件危机全犯了，于是才更深地理解软件工程重要的不是设计，而是落实。所以在这里也重申一下。

解决软件危机的方法就是将系统化的、规范的、可度量的方法应用于软件的开发、运行和维护过程。同时做到①用分阶段的生命周期计划严格管理②坚持进行阶段评审③实行严格的产品控制④采用现代程序设计技术⑤结果应能清楚地审查⑥开发小组的人员应该少而精⑦承认不断改进软件工程实践的必要性。

软件架构

软件架构和软件工程的概念是有区别的。架构强调的是强调软件系统的设计方法论和实施模式，具体到做一个网站的时候，架构师做的是一个组长的角色，做的工作是把框架搭好，组织其他人员做架构以内的细节部分 ，如前端、后端、测试、运维。

工程学的核心是结合实际情况建立科学的、规范的设计和生产流程，降低生产成本，把这理念带入软件开发领域便形成了软件工程。

这本书的核心：以业务为出发点，架构聚焦于代码，工程聚焦于流程。

代码和流程是软件工程的核心关注点。从代码的角度考虑，工程的模板是保证软件的高可用性、可扩展性、可伸缩性、性能以及安全，这些要素共用组成了软件的技术架构；在架构之外，工程从更宏观的角度完善开发和运维流程的管控，强调项目迭代的规范性、有序性、可控性和高效性，并更加架构特征提供额外的辅助功能，也就是说，架构是工程的子集，其关系是（工程（架构（业务）））。

为了便于区分和理解，本书将前端工程化中架构之外的部分称为前端工程服务体系。如此得出前端工程化的定义：前端工程化=前端技术架构+前端工程服务体系。

开发Dev与运维Ops

在前几年，许多公司在技术团队的组织架构划分秉承研发与运维分离的原则，即负责业务设计（产品经理、设计师）、开发（工程师）、测试（测试员）的岗位组成应用研发团队，而负责部署和发布（运维师）的岗位独立为线上保障团队。

项目经过需求设计、交互设计、开发以及测试后，开发人员将项目代码递交给运维人员，递交方式是将压缩包通过QQ或邮件直接交付。运维人员收到代码的时候将项目文件进行部署和发布，同时还负责服务器预警处理以及版本回滚。

将开放与运维分离的目的是保证线上的稳定性，开发人员不直接接触生产环境，可以减少很多人为失误导致的低级错误。同时可以建立固定的上线周期。但是缺点是影响迭代的自由度。

故DevOps模式开始崛起，目标是实现软件开发、测试和发布的敏捷性和持续化。

前端架构师的职责

根据前面对前端工程化的定义，前端架构师的职责可以概括为两方面：

• 根据业务特征设计合理的前端技术架构。
• 根据架构特征搭建高效的前端工程服务体系

这本书的核心：以业务为出发点，架构聚焦于代码，工程聚焦于流程。

技术架构方面从五个部分讲：编程语言、技术规范、组件化、前后端分离、性能；

工程服务体系方面从五方面将：开发、构建、测试、部署、持续化、监控与统计

成本控制（时间成本、生产成本）是工程的核心关注点。具体到实际工作中，成本细分为人力成本和沟通成本。前端工程服务体系的目标是：降低开发本身所消耗的人力成本；降低跨团队协作消耗的沟通成本。

初次阅读的总结

此篇博客未完结，其后面还有两篇，一篇讲技术架构的（编程语言、技术规范、组件化、前后端分离、性能）；一篇讲工程服务体系（工程思维与服务支撑、DevOps与Serverless）

本人才疏学浅，许多内容请辩证理解。后期会不断迭代更新。

更新地址：GitHub

更多内容请关注：CSDN、GitHub