java调用js模板引擎_JavaScript模板引擎应用场景及实现原理详解

本文实例讲述了JavaScript模板引擎应用场景及实现原理。分享给大家供大家参考，具体如下：

一、应用场景

以下应用场景可以使用模板引擎：

1、如果你有动态ajax请求数据并需要封装成视图展现给用户，想要提高自己的工作效率。

2、如果你是拼串族或者数组push族，迫切的希望改变现有的书写方式。

3、如果你在页面布局中，存在共性模块和布局，你可以提取出公共模板，减少维护的数量。

二、实现原理

不同模板间实现原理大同小异，各有优缺，请按需选择，以下示例以artTemplate模板引擎来分析。

2.1 模板存放

模板一般都是放置到textarea/input等表单控件，或者script[type="text/html"]等标签中，如下：

{ {if isAdmin}}

{ {title}}

{ {each user as name i}}

{ {i + 1}} ：{ {name}}

{ {/each}}

{ {/if}}

//textarea或input则取value，其它情况取innerHTML

2.2 模板函数

一般都是templateFun("id", data);其中id为存放模板字符串的元素id，data为需要装载的数据。

2.3 模板获取

一般都是通过ID来获取，document.getElementById("ID"):

//textarea或input则取value，其它情况取innerHTML

var html = /^(textarea|input)$/i.test(element.nodeName) ? element.value : element.innerHTML;

2.4 模板解析——处理html语句和逻辑语句及其他格式化处理

这步的主要操作其实多余的空格，解析出html元素和逻辑语句及关键字。例如：artTemplate.js中的代码实现：

defaults.parser = function (code, options) {

// var match = code.match(/([\w\$]*)(\b.*)/);

// var key = match[1];

// var args = match[2];

// var split = args.split(' ');

// split.shift();

//if isAdmin

code = code.replace(/^\s/, '');

//["if", "isAdmin"]

var split = code.split(' ');

<