前端开发模式的迭代
前端开发给人的印象一直是变化太快,不断出现新的框架、库、开发模式,这些开发模式有什么不同,为什么要不断迭代,本文将分享几种常见的前端开发模式,讲解前端开发模式的演变过程。
传统开发模式
前端是 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)、页面&