前端模板
需求
以博客站点为例，其页面仍然存在重复，譬如多篇博文的详细页面，其结构、样式和行为几乎是完全一样，只是博文内容不同。但如果开发者想改变博文详情页的页面结构，哪怕一点点的改动，都必须去编辑多个博客页面文件，完全无必要
设计思路
- 页面 = 页面模板(结构) + json数据(内容)
- 内容：json形式，譬如博文："{title:'我的博文',content:'博文内容'}"
- 动态，多个实例
- 结构：页面模板形式，即刨去内容后的html页面
- 静态，单个
如何将内容填入页面模板呢？
基本实现思路
- 将页面模板视作一个字符串，在字符串里放一些占位符
- 使用ajax方式将页面模板和json内容文件都读入内存
- 使用正则表达式等方式，将页面模板字符串里的占位符替换为json对象中的相应值
代码示例
<!-- tpl/post.tpl -->
<h1> :title </h1> <p>:content </p>
<!-- show.html -->
<html><body>
<div id="main"></div>
<script>
var post = {title:'我的博文',content:'博文内容'};
$.get("./tpl/post.tpl", function(result){
result.replace(':title', post.title);
result.replace(':content', post.content);
$("#main").html(result);
});
</script></body></html>
模板引擎
- 由于前述需求在前端项目中如此常见，社区开发了模板引擎，即通用的模板化代码，使得开发者无需关注内容与模板的绑定细节
- 模板引擎同时提供了强大的模板语言机制，如条件判断、循环等程序设计机制，可以实现复杂的模板功能和内容绑定
ejs 模板引擎
注意：在前端项目中，一般会给出两种代码引用方式
- 使用服务端引入模式，一般形式为
let ejs = require('ejs');，详见后续 - 使用客户端引入模式，即在浏览器中直接使用，以ejs为例，需要将ejs库(ejs.js文件)下载至本地后，然后在网页中使用外联方式引用，详见：https://github.com/mde/ejs#client-side-support 或 https://github.com/mde/ejs/releases/download/v3.0.2/ejs.js
- 或者可以采用cdn方式，详见 https://www.cdnpkg.com/ejs
声明模板：基于 ejs 模板引擎
<!-- tpl/post.tpl -->
<h1> <%= title %> </h1>
<p> <%= content %> </p>
<ul>
<% links.forEach(function(link){ %>
<li><%= link %></li>
<% }) %>
</ul>
绑定数据：基于 ejs 模板引擎
<!-- show.html -->
<html><body><script src="https://unpkg.com/ejs@3.1.6/ejs.min.js"></script>
<div id="main"> </div>
<script>
var post = { title:'我的博文',content:'博文内容',
links:['<a href="./posts/32"> 相关文章一<a>','...'] };
$.get("./tpl/post.tpl", function(result){
var html = ejs.compile(result)(post);
$("#main").html(html);
});
</script></body></html>
深入应用
- 将上述代码中的内容数据独立为json文件
- 设计你的url，根据查询参数的不同，载入不同的json，生成不同的内容页面，譬如：
posts/show.html#id=3将生成id编号为3的博客 - 将你的站点代码中的html文件的个数精简到最少
客户端渲染
- 服务端渲染： html页面由服务端脚本生成，然后经由网络传输到客户机的浏览器中进行显示
- 客户端渲染，两种方式：
- 浏览器从服务端获取是数据(如json)而不是页面，通过客户端的脚本，将这些数据转化成html页面后在浏览器中进行渲染显示
- 浏览器无需要从服务端获取任何数据，仅基于客户端的状态，例如用户输入，动态生成或动态更新html页面