Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
59 lines (47 sloc) 4.68 KB

情景描述

  • 开发静态页面 Demo 时,如何解决包含页面片段的问题(比如抽取然后引用相同的 header 和 footer)?
  • 是不是想要在开发静态 HTML 时,也可以像在 JSP 中那样 include 一些可重用的页面片段?
  • 如果有了片段引入,就可以用模块化的思想去组织页面片段,开发多个稍复杂静态页时,结构也变得更清晰了;
  • 开发完静态页后,如果切换成其他后端模板的工作需要交给后端的小伙伴,后端开发者也更容易看懂页面组织的逻辑;

解决方案

方案 特点
使用后端模板引擎(ASP、JSP、PHP…) 服务器端渲染
使用前端模板引擎(EJS、Pug、Nunjucks、Hogan.js ...) 在 Node 环境中使用,相当于服务器端渲染;
在 Browser 环境中使用,就是客户端渲染;
使用SSI,即服务器端包含,文件扩展名为.shtml; 服务器端渲染,支持服务器有:Apache httpdNginX
通过AJAX加载,可借助 jQuery 的 .load() 方法 需要HTML元素占位,还是客户端渲染
使用组件化/MVC框架(React的组件、Angular的指令、Vue...) 客户端渲染
FIS 这类集成方案里面也有 html 嵌入功能
自行编写小工具,参见这篇张鑫旭的文章 直接粗暴,稍显简陋
利用一些标签:<iframe>,<embed>,<object> 😐👎

分类归纳

  • 服务器端渲染:其实就是利用模板引擎做字符串拼接的工作;
  • 客户端渲染:不管以何种形式加载,最终会涉及DOM操作,甚至要在页面中引入与实际业务逻辑无关的脚本;
  • 各种有组件化功能的框架/库:除非项目基于这些框架/集成方案构建,否则方案不通用;
  • 自行编写小工具;

结论

  • 可见有很多方案可以实现,但是割鸡焉用牛刀?借用大型的框架/组件来实现这一简单的功能会引入多余的东西,显得太“重”;
  • 本项目就是只做页面片段引入这件事的一款Grunt插件:构建后的页面就是一个个普通的 HTML 文件,甚至在要查看时可以直接本地在浏览器中打开,无需依赖其他配置和环境,这也是比起服务器端/前端渲染方案的优势所在。
  • 前提是会简单地使用Grunt。英文烂?不怕,还有Grunt中文站

艰难的标准化进程

参考阅读

You can’t perform that action at this time.