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

}
} else {
value = https://www.520longzhigu.com/diannao/context.data[name];
lookupHit = hasProperty(context.data, name);
}
if (lookupHit) {
break;
}
context = context.parent;
}
cache[name] = value;
}
return value;
}
为了提高查找效率，采用缓存代理，每次查找到的变量存储路径方便下次快速查找。
不同于JavaScript编译器，模板引擎在查找变量的时候找不到对应变量即终止查找，返回空并不会报错。
4. 节点的条件渲染与嵌套这里开始讲模板语法token和普通字符串token开始统一编译生成字符串，并拼接成完整的字符串。
// 根据tokens和context混合拼接字符串输出结果
Panda.prototype.renderTokens = function (tokens, context) {
var result = ”;
var token, symbol, value;
for (var i = 0, numTokens = tokens.length; i < numTokens; ++i) {
value = https://www.520longzhigu.com/diannao/undefined;
token = tokens[i];
symbol = token.type;
if (symbol === ‘#’) value = https://www.520longzhigu.com/diannao/this.renderSection(token, context);
else if (symbol === ‘&’) value = https://www.520longzhigu.com/diannao/this.unescapedValue(token, context);
else if (symbol === ‘=’) value = https://www.520longzhigu.com/diannao/this.escapedValue(token, context);
else if (symbol === ‘text’) value = https://www.520longzhigu.com/diannao/this.rawValue(token);
if (value !== undefined) result += value;
}
return result;
}
5. 绘制页面页面字符串已经解析完成，可以直接输出：
Panda.prototype.render = function (tpl, state) {
if (typeof tpl !== ‘string’) {
return new Error(‘请输入字符串！’);
}
// 解析字符串
var tokens = this.cache[tpl] ? tokens : this.parse(tpl);
// 解析数据结构
var context = state instanceof Context ? state : new Context(state);
// 渲染模板
return this.renderTokens(tokens, context);
};
输出页面字符串被浏览器解析，就出现了页面。
以上只是简单的模板实现，并没有经过系统测试，仅供学习使用，源码传送门。成熟的模板引擎是有完整的异常处理，变量查找解析，作用域替换，优化渲染，断点调试等功能的。
总结前端模板这块能做的东西还很多，很多框架都是集成模板的功能，配合css，js等混合编译生成解析好样式和绑定成功事件的dom 。
另外实现模板的方式也有很多，本文的实现方式参考了mustache源码，模板标签内的代码被解析，但是是通过代码片段分类，变量查找的方式来执行的，将纯字符串的代码变成了被解释器执行的代码。
另外向vue这种可以实现双向绑定的模板可以抽空多看一看。

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

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