前端工程师 到底学什么?知识进阶

前端
包含#基础库/框架，H5宣传页面，还有H5小游戏#
刚开始的时候,我入门的基础是做的这些小项目的应用场景，
然而,深入了前端领域才发现,原来前端领域内更加深入的是复杂的Web应用
真正厉害的前端,做的东西应该是例如新闻聚合网站eg:新浪，在线购物平台eg:淘宝\京东，社交网络eg:facebook，金融信贷应用eg:支付宝等等……
前端是一种运行在网页浏览器中的软件，这些软件的图形用户界面（Graphical User Interface，简称GUI）即为前端。
展现给用户观看的一些视觉和动画交互的效果以及对后端传输出来的数据进行处理,就是前端做的事情.
如此复杂的Web应用，动辄几十上百人共同开发维护，其前端界面通常也颇具规模，工程量不亚于一般的传统GUI软件：

 

前端工程的三个阶段
第一阶段：库/框架选型

一般小的网页应用场景我们就引入jquery或者zepto去进行处理就好了.
但是一个大型的站点,是需要我们根据项目特征进行技术选型。

一般有jquery/React/Angularjs等框架。

第二阶段：简单构建优化

一个大型网站的构建除了保证团队的开发效率,还需要兼顾运行性能。
第二阶段,我们就会选择一种构建工具，对代码进行压缩，校验，之后再以页面为单位进行简单的资源合并。

第三阶段：JS/CSS模块化开发

我最近就在研究模块化开发,因为我并不想要重复地去做某件事情,或者只是一直做搬砖的工作,所以我去找关于模块化开发的学习资料.

JS模块化方案很多，AMD/CommonJS/UMD/ES6 Module等
而CSS模块化开发基本都是在less、sass、stylus等预处理器的import/mixin特性支持下实现的。

第四阶段

进入第四阶段，我们只需做好两件事就能大幅提升前端开发效率，并且兼顾运行性能，那就是——组件化开发与资源管理。
第一件事：组件化开发

[何为组件?]
页面上的每个 独立的 可视/可交互区域视为一个组件；
每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护；
由于组件具有独立性，因此组件与组件之间可以 自由组合；
页面只不过是组件的容器，负责组合组件形成功能完整的界面；
当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换。

组件化开发具有较高的通用性，无论是前端渲染的单页面应用，还是后端模板渲染的多页面应用，组件化开发的概念都能适用。
组件HTML部分根据业务选型的不同，可以是静态的HTML文件，可以是前端模板，也可以是后端模板：
[组件的好处]
开发者之间不会产生开发时序的依赖，大幅提升并行的开发效率，理论上允许随时加入新成员认领组件开发或维护工作，也更容易支持多个团队共同维护一个大型站点的开发。

结合前面提到的模块化开发，整个前端项目可以划分为这么几种开发概念：

名称 说明 举例
JS模块 独立的算法和数据单元 浏览器环境检测(detect)，网络请求(ajax)，应用配置(config)，DOM操作(dom)，工具函数(utils)，以及组件里的JS单元
CSS模块 独立的功能性样式单元 栅格系统(grid)，字体图标(icon-fonts)，动画样式(animate)，以及组件里的CSS单元
UI组件 独立的可视/可交互功能单元 页头(header)，页尾(footer)，导航栏(nav)，搜索框(search)
页面 前端这种GUI软件的界面状态，是UI组件的容器 首页(index)，列表页(list)，用户管理(user)
应用 整个项目或整个站点被称之为应用，由多个页面组成
以上5种开发概念以相对较少的规则组成了前端开发的基本工程结构，基于这些理念，我眼中的前端开发就成了这个样子：

整个Web应用由页面组成->页面由组件组成->一个组件一个目录，资源就近维护->组件可组合，组件的JS可依赖其他JS模块，CSS可依赖其他CSS单元

第二件事：“智能”静态资源管理

模块化/组件化开发之后，我们最终要解决的，就是模块/组件加载的技术问题。

我们应该精心规划每个页面的资源加载策略，使得用户无论访问哪个页面都能按需加载页面所需资源，没访问过的无需加载，访问过的可以缓存复用，最终带来流畅的应用体验。

有加载相关的按需加载、延迟加载、预加载、请求合并等策略；
有缓存相关的浏览器缓存利用，缓存更新、缓存共享、非覆盖式发布等方案；
还有复杂的BigRender、BigPipe、Quickling、PageCache等技术。

所以我觉得：

第四阶段前端开发最迫切需要做好的就是在基础架构中贯彻增量原则。

静态资源管理系统 = 资源表 + 资源加载框架

资源表是一份数据文件（比如JSON），是项目中所有静态资源（主要是JS和CSS）的构建信息记录，通过构建工具扫描项目源码生成，是一种k-v结构的数据，以每个资源的id为key，记录了资源的类别、部署路径、依赖关系、打包合并等内容，比如：

{
"a.js": {
"url": "/static/js/a.5f100fa.js",
"dep": [ "b.js", "a.css" ]
},
"a.css": {
"url": "/static/css/a.63cf374.css",
"dep": [ "button.css" ]
},
"b.js": {
"url": "/static/js/b.97193bf.js"
},
"button.css": {
"url": "/static/css/button.de33108.js"
}
}

总结

回顾一下前面提到过的前端工程三个阶段：

第一阶段：库/框架选型
第二阶段：简单构建优化
第三阶段：JS/CSS模块化开发
第四阶段：组件化开发与资源管理