网站模板套用教程 js网站模板素材( 二 )

其实模板编译逻辑并没有特别复杂，至于vue这种动态绑定数据的模板有时间可以参考文末链接。
快速实现简单的模板现在以mustache模板为例，手动实现一个实现基本功能的模板。
模板字符串模板：index.txt
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>Page Title</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” type=”text/css” media=”screen” href=https://www.520longzhigu.com/diannao/”main.css” />
<script src=https://www.520longzhigu.com/diannao/”main.js”>
</head>
<body>
<h1>Panda模板编译</h1>
<h2>普通变量输出</h2>
<p>username： {{common.username}}</p>
<p>escape：{{common.escape}}</p>
<h2>不转义输出</h2>
<p>unescape：{{&common.escape}}</p>
<h2>列表输出：</h2>
<ul>
{{#each list}}
<li class=”{{value}}”>{{key}}</li>
{{/each}}
</ul>
<h2>条件输出：</h2>
{{#if shouldEscape}}
<p>escape{{common.escape}}</p>
{{else}}
<p>unescape：{{&common.escape}}</p>
{{/if}}
</body>
</html>
模板对应数据：
module.exports = {
common: {
username: ‘Aus’,
escape: ‘<p>Aus</p>’
},
shouldEscape: false,
list: [
{key: ‘a’, value: 1},
{key: ‘b’, value: 2},
{key: ‘c’, value: 3},
{key: ‘d’, value: 4}
]
};
模板的使用方法：
var fs = require(“fs”);
var tpl = fs.readFileSync(‘./index.txt’, ‘utf8’);
var state = require(‘./test’);
var Panda = require(‘./panda’);
Panda.render(tpl, state)
然后来实现模板：
1. 正则切割字符串模板引擎获取到模板字符串之后，通常要使用正则切割字符串，区分出那些是静态的字符串，那些是需要编译的代码块，生成抽象语法树（AST）。
// 将未处理过的字符串进行分词，形成字符组tokens
Panda.prototype.parse = function (tpl) {
var tokens = [];
var tplStart = 0;
var tagStart = 0;
var tagEnd = 0;
while (tagStart >= 0) {
tagStart = tpl.indexOf(openTag, tplStart);
if (tagStart < 0) break;
// 纯文本
tokens.push(new Token(‘text’, tpl.slice(tplStart, tagStart)));
tagEnd = tpl.indexOf(closeTag, tagStart) + 2;
if (tagEnd < 0) throw new Error(‘{{}}标签未闭合’);
// 细分js
var tplValue = https://www.520longzhigu.com/diannao/tpl.slice(tagStart + 2, tagEnd – 2);
var token = this.classifyJs(tplValue);
tokens.push(token);
tplStart = tagEnd;
}
// 最后一段
tokens.push(new Token(‘text’, tpl.slice(tagEnd, tpl.length)));
return this.parseJs(tokens);
};
这一步分割字符串通常使用正则来完成的，后面检索字符串会大量用到正则方法。
在这一步通常可以检查出模板标签闭合异常，并报错。
2. 模板语法的分类生成AST之后，普通字符串不需要再管了，最后会直接输出，专注于模板语法的分类。
// 专门处理模板中的js
Panda.prototype.parseJs = function (tokens) {
var sections = [];
var nestedTokens = [];
var conditionsArray = [];
var collector = nestedTokens;

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：