前端工程——基础篇.pdfVIP

前端⼯程——基础篇 原⽂出处：https://github .com/fouber/blog/issues/ 10 作者：fouber ⽬录 前端，是⼀种GUI软件 前端⼯程的三个阶段 第⼀阶段：库/框架选型 第⼆阶段： 单构建优化 第三阶段：JS/CSS模块化开发 第四阶段 没有银弹 第⼀件事：组件化开发 第⼆件事：“智能”静态资源管理 总结 喂喂喂，那个切图的，把页⾯写好就发给研发⼯程师套模板吧。 你好，切图仔。 不知道你的团队如何定义前端开发，据我所知，时⾄今⽇仍然有很多团队会把前端开 发归类为产品或者设计岗位，虽然⾝份之争多少有些⽆谓，但我对这种偏见还是⼼存 芥蒂，酝酿了许久，决定写⼀个系列的⽂章，试着从⼯程的⾓度系统的介绍⼀下我对 前端，尤其是Web前端的理解。 只要我们还把⾃⼰的⼯作看作为⼀项软件开发活动，那么我相信读过下⾯的内容你也 ⼀定会有所共鸣。 前端，是⼀种GUI软件 现如今前端可谓包罗万象，产品形态五花⼋门，涉猎极⼴，什么⾼⼤上的基础库/框 架，拽炫酷的宣传页⾯，还有屌炸天的⼩游戏……不过这些⼀两个⽂件的⼩项⽬并⾮ 是前端技术的主要应⽤场景，更具商业价值的则是复杂的Web应⽤，它们功能完善， 界⾯繁多，为⽤户提供了完整的产品体验，可能是新闻聚合⽹站，可能是在线购物平 台，可能是社交⽹络，可能是⾦融信贷应⽤，可能是⾳乐互动社区，也可能是视频上 传与分享平台…… 从本质上讲，所有Web应⽤都是⼀种运⾏在⽹页浏览器中的软件，这些 软件的图形⽤户界⾯ （Graphical User Interface ， 称GUI ）即为前端。 如此复杂的Web应⽤，动辄⼏⼗上百⼈共同开发维护，其前端界⾯通常也颇具规模， ⼯程量不亚于⼀般的传统GUI软件： 尽管Web应⽤的复杂程度与⽇俱增，⽤户对其前端界⾯也提出了更⾼的要求，但时⾄ 今⽇仍然没有多少前端开发者会从软件⼯程的⾓度去思考前端开发，来助⼒团队的开 发效率，更有甚者还对前端保留着”如玩具般 单“的刻板印象，⽇复⼀⽇，⼑耕⽕ 种。 历史悠久的前端开发，始终像是放养的野孩⼦，原始如斯，不免让⼈慨叹 ！ 前端⼯程的三个阶段 现在的前端开发倒也并⾮⼀⽆所有，回顾⼀下曾经经历过或听闻过的项⽬，为了提升 其前端开发效率和运⾏性能，前端团队的⼯程建设⼤致会经历三个阶段： 第⼀阶段：库/框架选型 前端⼯程建设的第⼀项任务就是根据项⽬特征进⾏技术选型。 基本上现在没有⼈完全从0开始做⽹站，哪怕是政府项⽬⽤个jquery都很正常吧， React/Angularj s等框架横空出世，解放了不少⽣产⼒，合理的技术选型可以为项⽬节 省许多⼯程量这点⽏庸置疑。 第⼆阶段：简单构建优 选型之后基本上就可以开始敲码了，不过光解决开发效率还不够，必须要兼顾运⾏性 能。前端⼯程进⾏到第⼆阶段会选型⼀种构建⼯具，对代码进⾏压缩，校验，之后再 以页⾯为单位进⾏ 单的资源合并。 前端开发⼯程化程度之低，常常出乎我的意料，我之前在百度⼯作时是没有多少概念 的，直到离开⼤公司的温室，去到业界与更多的团队交流才发现，能做到这个阶段在 业界来说已然超出平均⽔平，属于“具备较⾼⼯程化程度”的团队了，查看⽹上形形⾊ ⾊的⽹页源代码，能做到最基本的JS/CSS压缩的Web应⽤都已跨⼊标准互联⽹公司⾏ 列，不难理解为什么很多前端团队对于前端⼯程构建的认知还仅停留在“压缩、校 验、合并”这种程度。 第三阶段：JS/CSS模块 开发 分⽽治之是软件⼯程中的重要思想，是复杂系统开发和维护的基⽯，这点放在前端开 发中同样适⽤。在解决了基本开发效率运⾏效率问题之后，前端团队开始思考维护效 率，模块化是⽬前前端最流⾏的分治⼿段。 很多⼈觉得模块化开发的⼯程意义是复⽤，我不太认可这种看法，在我 看来，模块化开发的最⼤价值应该是分治，是分治，分治 ！（重说 三）。 不管你将来是否要复⽤某段代码，你都有充分的理由将其分治为⼀个模 块。 JS模块化⽅案很多，AMD/CommonJS/UMD/ES6 Module等，对应的框架和⼯具也⼀⼤ 堆，说起来很烦，⼤家⾃⾏百度吧；CSS模块化开发基本都是在less、sa