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&apos;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();
}

更多介绍:http://icanhazjs.com/

 

关键词: icanhaz,模板引擎,js   编辑时间: 2013-10-31 18:02:06

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐