文章分类 Classification
javascript模板引擎ICanHaz.js
稿件来源: 阳光企业网站管理系统 撰稿作者: 太阳光 发表日期: 2013-10-31 阅读次数: 608 查看权限: 游客查看
ICanHaz.js 是一个简单而且功能强大的客户端的 JavaScript 模板引擎。
模板引擎是为了使用户界面与数据分离而产生的，它可以生成特定格式的文档。使用模板引擎可以提升开发者的工作效率，该模板所拥有的良好设计也使得代码重用变得更加容易。
ICanHaz.js 是一个简单而且功能强大的客户端的 JavaScript 模板引擎。使用示例：
<!DOCTYPE html>
<html>
<head>
<title>ICanHaz.js Demo</title>
<script src="test/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="ICanHaz.js" type="text/javascript"></script>
<script id="user" type="text/html">
<li>
<p>Howdy I'm <a href="http://twitter.com/{{ twitter }}">@{{ twitter }}</a></p>
<p>I work for {{ employer }} as a {{ job_title }}.</p>
</li>
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#add_user').click(function () {
var user_data, user;
user_data = {
name: "Henrik Joreteg",
twitter: "HenrikJoreteg",
employer: "&yet",
job_title: "JS nerd"
};
user = ich.user(user_data);
$('#user_list').append(user);
ich.refresh();
});
});
</script>
</head>
<body>
<button id="add_user">Add User</button>
<ul id="user_list"></ul>
</body>
</html>
当html模板与js交互分别是两个负责编写时，模板是非常必要。当然如果全是你一个人完成就可不需要模板这回事了。ICanHaz源码非常简单，方法也就以下几个：
ich.addTemplate(name, mustacheTemplateString)：新增加一个模板。但我们建议直接使用<script type="text/html">来定义模板比较好。
addTemplate: function(name, templateString) {
if (typeof name === 'object') {
for (var template in name) {
this.addTemplate(template, name[template]);
}
return;
}
if (ich[name]) {
console.error("Invalid name: " + name + ".");
} else if (ich.templates[name]) {
console.error("Template \"" + name + " \" exists");
} else {
ich.templates[name] = templateString;
ich[name] = function (data, raw) {
data = data || {};
var result = Mustache.to_html(ich.templates[name], data, ich.templates);
return (ich.$ && !raw) ? ich.$(trim(result)) : result;
};
}
}
ich.clearAll()：清除所有模板与缓存。
clearAll: function () {
for (var key in ich.templates) {
delete ich[key];
}
ich.templates = {};
}
ich.grabTemplates()：解析模板，也就是查找所有<script type="text/html">标签并解析成对应的模板，然后删除原始的html。
grabTemplates: function () {
var i,
l,
scripts = document.getElementsByTagName('script'),
script,
trash = [];
for (i = 0, l = scripts.length; i < l; i++) {
script = scripts[i];
if (script && script.innerHTML && script.id && (script.type === "text/html" || script.type === "text/x-icanhaz")) {
console.log("Templates:"+i);
ich.addTemplate(script.id, trim(script.innerHTML));
trash.unshift(script);
//script.parentNode.removeChild(script);不明白为什么不在此删除，省略下面的for
}
}
for (i = 0, l = trash.length; i < l; i++) {
trash[i].parentNode.removeChild(trash[i]);
}
}
ich.refresh()：刷新，将会清除所有模板，一般用于ajax返回数据中含有新模板时使用。
refresh: function () {
ich.clearAll();
ich.grabTemplates();
}
关键词: icanhaz,模板引擎,js 编辑时间: 2013-10-31 18:02:06
0
高兴
0
支持
0
搞笑
0
不解
0
谎言
0
枪稿
0
震惊
0
无奈
0
无聊
0
反对
0
愤怒
0%(0)
0%(0)
中搜索：
中搜索：
- 暂无评论
文章图片 article Pictrue
网友评论