前端模板

元信息

目标：从"同类型多篇页面仅内容不同"推出模板+数据的分离结构——用占位符与正则替换实现最小模板，再过渡到模板引擎（ejs）的条件/循环能力；理解客户端渲染的含义
关键概念：模板、数据绑定、占位符、模板引擎、ejs、compile、客户端渲染、服务端渲染
关联阶段：cp3
常见误区：把每个内容实例都存成一个 html 页面（结构一动就要改 N 个文件）；混淆两种"动态"——数据动态（json 多实例）与结构静态（模板单实例）；分不清 ejs 的服务端引入（node require）与客户端引入（浏览器外联/CDN）；没看出模板引擎正是后来前端框架"视图层"的前身

需求

以博客站点为例，虽然消除了站点头尾等静态区块的重复，但归属同一类型的多篇博文仍然存在大量重复，比如各博文的详细页面，其结构、样式和行为一般完全一样，仅仅是博文内容不同。

如果采用静态博文的机制，则开发者如果想改变博文详情页的页面结构，哪怕一点点的改动，都必须去编辑多个博客页面文件，完全无必要。

换言之，要将多篇博文的公共结构抽取出来，形成：模板 + 数据，实现动态页面。

设计思路

页面 = 页面模板(结构) + json数据(内容)
内容：采用 json形式，譬如博文内容：{title:'我的博文',content:'博文内容'}
- 动态，多个实例
结构：采用独立的页面模板文件，即刨去内容后的html页面
- 静态，单个实例

如何将内容填入页面模板即绑定数据呢？

基本实现思路

将页面模板视作一个字符串，在字符串里放一些占位符
使用ajax方式将页面模板和json内容文件都读入内存
使用正则表达式等方式，将页面模板字符串里的占位符替换为json对象中的相应值

代码示例

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

模板引擎

由于前述需求在前端项目中如此常见，社区开发了模板引擎，即通用的模板化代码，使得开发者无需关注内容与模板的绑定细节
模板引擎同时提供了强大的模板语言机制，如条件判断、循环等程序设计机制，可以实现复杂的模板功能和内容绑定

ejs 模板引擎

官方站点 https://github.com/mde/ejs
文档 https://ejs.co/#docs

注意：在前端项目中，一般会给出两种代码引用方式

使用服务端引入模式，在node.js中使用，一般为：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
  - https://unpkg.com/ejs@3.1.6/ejs.min.js

声明模板

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

绑定数据

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

深入应用

将上述代码中的内容数据独立为json文件
设计你的url，根据查询参数的不同，载入不同的json，生成不同的内容页面，譬如：posts/show.html#id=3 将生成id编号为3的博客
将你的站点代码中的html文件的个数精简到最少

客户端渲染

服务端渲染： html页面由服务端脚本生成，然后经由网络传输到客户机的浏览器中进行显示
客户端渲染，两种方式：
- 浏览器从服务端获取是数据(如json)而不是页面，通过客户端的脚本，将这些数据转化成html页面后在浏览器中进行渲染显示
- 浏览器无需要从服务端获取任何数据，仅基于客户端的状态，例如用户输入，动态生成或动态更新html页面

其它模板引擎

https://github.com/mde/ejs
- 中文指南 https://ejs.bootcss.com/
http://www.embeddedjs.com/
http://www.kuwata-lab.com/erubis/users-guide.04.html#lang-javascript
template-web.js https://blog.csdn.net/qq_30258957/article/details/82557519
简单的前端模板引擎 http://blog.csdn.net/zhangxin09/article/details/18409119/

前端模板 ​

元信息 ​

需求 ​

设计思路 ​

基本实现思路 ​

代码示例 ​

模板引擎 ​

ejs 模板引擎 ​

声明模板 ​

绑定数据 ​

深入应用 ​

客户端渲染 ​

其它模板引擎 ​

前端模板

元信息

需求

设计思路

基本实现思路

代码示例

模板引擎

ejs 模板引擎

声明模板

绑定数据

深入应用

客户端渲染

其它模板引擎