前端开发模式的迭代

前端开发模式的迭代
前端开发给人的印象一直是变化太快，不断出现新的框架、库、开发模式，这些开发模式有什么不同，为什么要不断迭代，本文将分享几种常见的前端开发模式，讲解前端开发模式的演变过程。

传统开发模式
前端是 Web 应用的组成部分，前端开发模式的设计与 Web 应用的系统架构紧密相关，一个典型的 Web 应用系统包括下面几个部分：
Application Server 负责提供动态内容，浏览器发起请求后，由 Application Server 返回 HTML 文档或 JSON 数据，浏览器解析到 HTML 内的 script、link、img 等资源标签时，会发起资源文件的请求，静态资源 URL 通常会加上专门的域名解析到静态资源 Server，对于小型 Web 系统，Application Server 和静态资源 Server 会由同一个 Web Server 来承载。

动态 HTML 衍生出了两种传统的前端开发模式：
• HTML 混合在 Server 端程序代码中
• 通过 Server 端模板引擎生成 HTML

HTML 混合在 Server 端程序代码中
这种模式下的协作方式通常是由前端工程师开发好静态页面，再交给后端工程师『套页面』，最后产出一个包含 Server 端程序代码和 HTML 的代码文件，浏览器请求时由 Server 端程序执行代码文件，获取数据、拼接 HTML 片段生成完整的 HTML 文档。

这种协作方式弊端是：
• 效率低，前后端代码混合在一块，UI 上的改动经常需要前后端工程师共同完成。
• 容易出错，后端工程师不写 HTML，却需要把完整的 HTML 折成很多 HTML 片段，再插入到程序逻辑中，拼完后执行出来经常发现与静态页面不一样，然后找前端工程师定位问题，看看哪里拼错了。

通过 Server 端模板引擎生成 HTML
模板引擎的出现为前后端提供了更好的协作方式，它是一个运行在 Server 端应用程序中的组件，能清晰的将前端代码与 Server 端程序代码分离。

模板引擎的使用方式
以基于 PHP 的 Smarty 模板引擎为例，安装 Smarty 后，编辑 PHP 文件：
创建模板：
调用 assign 方法向模板中传递变量/对象，调用 display 方法来显示模板，生成 HTML。assign 和 display 确定了前后端的衔接方式：约定一份模板变量、一个模板文件路径。
基于 Server 端模板引擎的组件化方案
模板引擎在 Web 应用架构里分离了 UI 界面和业务逻辑，接下来需要考虑的就是前端开发内的分治手段，怎么把一个系统拆分成更小的单元，便于开发和维护。

前端开发最为有效的分治手段就是组件化开发，把一个大的系统自顶向下拆分下若干组件，最后按某种方式组装起来，成为一个整体，完成系统所要求的功能。

这里就涉及两个东西：拆分和组装，拆分衍变为开发阶段的组件化规范，组装衍变为运行阶段的组件化框架。

前端程序包含三种语言：HTML、CSS、JavaScript，前端组件可以由这三种开发资源组成，但前端语言和浏览器并未提供一个组合三种开发资源的组件化方案，所以前端领域内的组件化方案层出不穷，基于 Server 端模板引擎的组件化方案，比较有代表性的就属百度的 FIS-PLUS。

FIS-PLUS 提供给开发者的内容包括三部分：
• 目录规范：开发阶段怎么拆分组件。
• 前后端框架：运行阶段怎么组装组件。
• 构建工具：连接开发规范与部署规范。

目录规范
FIS-PLUS 推荐的目录结构如下：
目录规范实则是对资源的分类概念，上面的目录规范将整个站点的资源划分为：模块（module）、页面&