简单模板模式
简单模板模式
简单模板模式是通过格式化字符串拼接出视图避免创建视图时大量的节点操作，简单模板模式不属于一般定义的23种设计模式的范畴，而通常将其看作广义上的技巧型设计模式。
描述
对比于模板方法模式，其定义了如何执行某些算法的框架，通过父类公开的接口或方法子类去实现或者是调用，而简单模板模式是用来解决为了创建视图的大量节点操作，并在此基础上解决数据与结构的强耦合性。
节点操作
如果我们要生成一个列表，直接通过各类节点操作是相对比较麻烦的。
<!DOCTYPE html>
<html>
<head>
<title>节点操作</title>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/javascript">
(function(){
const container = document.getElementById("root");
const ul = document.createElement("ul");
const list = [{
"name": "google",
"url": "https://www.google.com"
}, {
"name": "baidu",
"url": "https://www.baidu.com"
}, {
"name": "bing",
"url": "https://cn.bing.com"
}];
list.forEach(v => {
let li = document.createElement("li");
let a = document.createElement("a");
a.href = v.url;
a.target = "_blank";
a.innerText = v.name;
li.appendChild(a);
ul.appendChild(li);
});
container.appendChild(ul);
})();
</script>
</html>
基于字符串拼接
如果我们使用字符串拼接，虽然能够减少看上去的复杂程度，但是实际由于数据和结构强耦合导致可维护性通常比较差，这导致的问题是如果数据或者结构发生变化时，都需要改变代码。此外此处使用了ES6的模板字符串语法动态生成了一个ul列表，看上去貌似不会复杂，如果直接使用字符串拼接，会繁琐很多。
<!DOCTYPE html>
<html>
<head>
<title>字符串拼接</title>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/javascript">
(function(){
const container = document.getElementById("root");
const list = [{
"name": "google",
"url": "https://www.google.com"
}, {
"name": "baidu",
"url": "https://www.baidu.com"
}, {
"name": "bing",
"url": "https://cn.bing.com"
}];
let template = `<ul>`;
list.forEach(v => {
template += `<li>
<a href="${v.url}" target="_blank" >${v.name}</a>
</li>`;
});
template += "</ul>";
container.innerHTML = template.replace(/[\s]+/g, " ");
})();
</script>
</html>
模板渲染
通过创建模板，我们可以使用数据去格式化字符串来渲染视图并插入到容器中，这样实现的方案可读性会高很多。
<!DOCTYPE html>
<html>
<head>
<title>模板渲染</title>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/javascript">
(function(){
const container = document.getElementById("root");
const formatString = function(str, data){
return str.replace(/\{\{(\w+)\}\}/g, (match, key) => data[key] === void 0 ? "" : data[key]);
}
const list = [{
"name": "google",
"url": "https://www.google.com"
}, {
"name": "baidu",
"url": "https://www.baidu.com"
}, {
"name": "bing",
"url": "https://cn.bing.com"
}];
let template = ["<ul>"];
list.forEach(v => {
template.push("<li>");
template.push(formatString('<a href="{{url}}" target="_blank" >{{name}}</a>', v));
template.push("</li>");
});
template.push("</ul>");
console.log(template)
container.innerHTML = template.join("");
})();
</script>
</html>
模板引擎的简单实现
对mustcache风格的{{}}进行简单的实现，仅对于其数据的展示方面有实现，对于其指令例如循环等并未实现，通过处理字符串，将其转换为一个函数并传参执行，即可实现数据的展示。通过对于字符串的处理并使用Function实现模板语法，如果使用正则表达式进行较为完整的过滤，是完全可以生成较为完善的模板语法的处理的，包括Js的表达式以及自带指令等，如mustcache.js、layui.js的laytpl模块。
<!DOCTYPE html>
<html>
<head>
<title>模板引擎</title>
</head>
<body>
<div id="root">
<div>{{show}}</div>
<div>{{description}}</div>
</div>
</body>
<script type="text/javascript">
var data = {
show: 1,
description: "一个简单的模板引擎"
};
function render(element, data) {
var originString = element.innerHTML;
var html = String(originString||'').replace(/"/g,'\\"').replace(/\s+|\r|\t|\n/g, ' ')
.replace(/\{\{(.)*?\}\}/g, function(value){
return value.replace("{{",'"+(').replace("}}",')+"');
})
html = `var targetHTML = "${html}";return targetHTML;`;
var parsedHTML = new Function(...Object.keys(data), html)(...Object.values(data));
element.innerHTML = parsedHTML;
}
render(document.getElementById("root"), data);
</script>
</html>
AST
基于AST的模板语法需要解析HTML成为AST，然后将AST转化为字符串，将字符串作为函数执行，这个过程依旧需要用到Function，下边的例子只是借助了Js取得DOM结构生成的AST，没有自行解析HTML。虽然看起来最后都需要使用Function去处理字符串，而AST还需要解析HTML然后再拼接字符串，增加了计算的时间，但是如果仅仅是完全基于处理字符串的方式实现的模板语法，在数据进行变更时都需要进行render，每次render的时候都需要重新渲染整个DOM，虽然在上边的简单实现中AST也是重新渲染了整个模版，但是现在主流的Js框架例如Vue就是基于AST的方式，首先解析template为AST，然后对于AST进行静态节点标记，用以标记静态的节点进行重用跳过比对，从而进行渲染优化，然后生成虚拟DOM，当数据进行变更时虚拟DOM会进行diff算法的比对，找到数据有变更的节点，然后进行最小化渲染，这样就不需要在数据变更时将整个模板进行渲染，从而增加了渲染的效率。
<!DOCTYPE html>
<html>
<head>
<title>AST</title>
</head>
<body>
<div id="root" class="root-node">
<div>{{show}}</div>
<div>{{description}}</div>
</div>
</body>
<script type="text/javascript">
var data = {
show: 1,
description: "一个简单的模板语法"
};
function parseAST(root){
var node = {};
node.parent = null;
if(root.nodeName === "#text"){
node.type = "text";
node.tagName = "text";
node.content = root.textContent.replace(/\s+|\r|\t|\n/g, ' ').replace(/"/g,'\\"');
}else{
node.type = "tag";
node.tagName = root.localName;
node.children = [];
node.attr = {};
Array.prototype.forEach.call(root.attributes, item => node.attr[item.nodeName] = item.nodeValue );
}
Array.prototype.forEach.call(root.childNodes, element => {
var parsedNode = parseAST(element);
parsedNode.parent = root;
node.children.push(parsedNode);
});
return node;
}
function render(element, template, data) {
html = `var targetHTML = "${template}";return targetHTML;`;
var parsedHTML = new Function(...Object.keys(data), html)(...Object.values(data));
element.innerHTML = parsedHTML;
}
function generateHTMLTemplate(AST){
var template = "";
AST.forEach( node => {
if(node.type === "tag"){
template += `<${node.tagName}>`;
template += generateHTMLTemplate(node.children);
template += `</${node.tagName}>`;
}else{
if(node.content.match(/\{\{(.)*?\}\}/)){
var expression = node.content.replace(/\{\{(.)*?\}\}/g, function(value){
return value.replace("{{",'"+(').replace("}}",')+"');
})
template += expression;
}else{
template += node.content;
}
}
})
return template;
}
var root = document.getElementById("root");
var AST = parseAST(root);
var template = generateHTMLTemplate([AST]);
render(root, template, data);
</script>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://juejin.cn/post/6844903633000087560
https://www.cnblogs.com/libin-1/p/6544519.html
https://github.com/sentsin/layui/blob/master/src/lay/modules/laytpl.js
