» Javascritp模板机制刘建’s Blog

07 - Jul - 2008

Javascritp模板机制

Date: 07 07月, 2008 | Posted By: 刘建 | Category: Javascript/DOM/JQuery/AJAX

应用背景

毫无疑问，模板机制是CMS里面的重要组成要素。本来模板机制只涉及CMS后台程序处理，但是随着AJAX的发展，我们经常会通过XMLHttpRequest从后台获取数据再套入到特定的HTML结构注入到页面上。这时我们的前台处理也要涉及到模板机制的概念。

解决方案

假设要我们需要从后台异步读取一篇文章的信息（假设该文章只有标题、作者、内容三项信息）并显示在当前页面上。文章的HTML结构是：

方案一：后台生成HTML代码

由后台生成HTML代码表面上是最方便的，前台程序员只需要通过XMLHttpRequest获取这段HTML并注入到页面（innerHTML）中就行了。但是，这种方法的可维护性是最差的，因为后台程序负责HTML的输出意味着一旦HTML结构有所更改就必须在后台程序中改。

方案二：动态创建HTML结点

代码示例：

var titleNode = document.createElement(”h1″);

title.innerHTML = title;

var authorNode = document.createElement(”div”);

authorNode.innerHTML = author;

var contentNode = document.createElement(”p”);

contentNode.innerHTML = content;

document.body.appendChild(titleNode);

document.body.appendChild(authorNode);

document.body.appendChild(contentNode);

HTML结构比较简单的时候，这种结构是可以接受的。但是一旦出现了复杂的HTML结构，它的代码就会相当冗长，编写和维护起来都极为不便，程序效率也不高。

方案三：HTML模板

代码示例：

var template = “<h1>{$title}</h1><div>{$author}</div><p>{$content}</p>”;

template = template.replace(”{$title}”, title).replace(”{$author}”,author).replace(”{$content}”, content);

document.body.innerHTML = template;

这种方法的缺陷在于需要多次替换，如果数据很多，就要进行多次替换，效率非常差。但是它的思想是非常好的，只要避免了多次替换的问题，这种方法可以成为很好的解决方案。

我们可以引入正则表达式对这种方法进行改良。模板中要替换的字符串格式是 {$文章属性}，这种格式写成正则表达式就是 \{\$\w+\} 。如果要把文章属性（就是{$和}间的内容）提取出来，还要加一个分组，所以正则表达式最终是这样的就是 \{\$(\w+)\}。

代码改良如下：

var article = {title: title, author: author, content: content}; // 先把文章封装成对象
var template = “<h1>{$title}</h1><div>{$author}</div><p>{$content}</p>”;

document.body.innerHTML = template.replace(/\{\$(\w+)\}/g, function($1, $2) { /* 返回文章对象的属性 */ return article[$2] || “”; });

扩展应用

最近做了一个奥运弹窗后台管理页面，其中有一个预览功能。管理员在表单中输入数据：

排行榜：(输入框)金牌(输入框)银牌(输入框)铜牌

然后显示结果：

排行榜：10 金牌 6 银牌 3 铜牌

结果的显示其实就是把输入框中的内容替换输入框代码。据此，我写的代码如下：

// 假设style是输入框所在节点，preview是预览层节点

preview.innerHTML = style.innerHTML.replace(

/<input[^>]*id=\”?(\w+)\”?[^>]*>/gi, function($1, $2) {

　　return document.getElementById($2).value;

});

原理就是用正则表达式匹配出id，然后通过document.getElementById方法提取input输入框的value属性，从而获得输入值，然后用输入值替换input输入框再注入到预览层中去。

Tags: JavaScript

You must be logged in to post a comment.

刘建’s Blog