console.log('web');|

断桥残雪丶

园龄:5年5个月粉丝:0关注:2

JS模板引擎art-template

version:4.12.2

GitHub地址下载:https://github.com/aui/art-template

http://aui.github.io/art-template/zh-cn/

下载文件后学习路径为:art-template-master\example\web-art-syntax

本文章只是从作者写的代码摘抄一份,并独立于js文件一份,html文件一份,代码格式缩进,其他不变

学习这个demo只需引入template-web.js即可,不需要引入jquery,除非自身写的js有引用jquery

基本例子:

    <!--html-->
    <div id="c1"></div>
    <script id="t1" type="text/html">
        {{if isAdmin}}
            <h1>{{title}}</h1>
            <ul>
                {{each list value i}}
                    <li>索引 {{i + 1}} : {{value}}</li>
                {{/each}}
            </ul>
        {{/if}}
    </script>
/*js*/
var d1 = {
    title: '基本例子',
    isAdmin: true,
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};

document.getElementById('c1').innerHTML = template('t1', d1);

在javascript中存放模板:

    <!--html-->
    <h1>在javascript中存放模板</h1>
    <div id="c2"></div>
/*js*/
var s2 = '<ul>' +
    '{{each list value i}}' +
    '<li>索引 {{i + 1}} : {{value}}</li>' +
    '{{/each}}' +
    '</ul>';

document.getElementById('c2').innerHTML = template.compile(s2)({
    list: ['摄影', '电影', '民谣', '旅行', '吉他']
});

错误捕获(compile-error,请打开控制台):

    <!--html-->
    <h1>错误捕获(请打开控制台)</h1>
    <script id="t3" type="text/html">
        {{2 a ba d}}
    </script>
/*js*/
var h3 = '';
h3 = template('t3', {});
document.write(h3);

自定义过滤器:

    <!--html-->
    <h1>自定义过滤器</h1>
    <div id="c4"></div>
    <script id="t4" type="text/html">
        {{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}
    </script>
/*js*/
/**
 * 对日期进行格式化,
 * @param date 要格式化的日期
 * @param format 进行格式化的模式字符串
 *     支持的模式字母有:
 *     y:年,
 *     M:年中的月份(1-12),
 *     d:月份中的天(1-31),
 *     h:小时(0-23),
 *     m:分(0-59),
 *     s:秒(0-59),
 *     S:毫秒(0-999),
 *     q:季度(1-4)
 * @return String
 * @author yanis.wang
 * @see    http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
 */
template.defaults.imports.dateFormat = function (date, format) {
    if (typeof date === "string") {
        var mts = date.match(/(\/Date\((\d+)\)\/)/);
        if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
        }
    }
    date = new Date(date);
    if (!date || date.toUTCString() == "Invalid Date") {
        return "";
    }
    var map = {
        "M": date.getMonth() + 1, //月份
        "d": date.getDate(), //日
        "h": date.getHours(), //小时
        "m": date.getMinutes(), //分
        "s": date.getSeconds(), //秒
        "q": Math.floor((date.getMonth() + 3) / 3), //季度
        "S": date.getMilliseconds() //毫秒
    };
    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
        var v = map[t];
        if (v !== undefined) {
            if (all.length > 1) {
                v = '0' + v;
                v = v.substr(v.length - 2);
            }
            return v;
        } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
        }
        return all;
    });
    return format;
};
var d4 = {
    time: new Date().getTime()
};
document.getElementById('c4').innerHTML = template('t4', d4);

嵌入子模板:

    <!--html-->
    <div id="c5"></div>
    <script id="t5" type="text/html">
        <h1>{{title}}</h1>
        {{include 't5-list'}}
    </script>
    <script id="t5-list" type="text/html">
        <ul>
            {{each list value i}}
                <li>索引 {{i + 1}} :{{value}}</li>
            {{/each}}
        </ul>
    </script>
/*js*/
var d5 = {
    title: '嵌入子模板',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
document.getElementById('c5').innerHTML = template('t5', d5);

不转义HTML:

    <!--html-->
    <h1>不转义HTML</h1>
    <div id="c6"></div>
    <script id="t6" type="text/html">
        <p>不转义:{{#value}}</p>
        <p>默认转义: {{value}}</p>
    </script>
/*js*/
var d6 = {
    value: '<span style="color: #6382ff">hello world!</span>'
};
document.getElementById('c6').innerHTML = template('t6', d6);

print:

    <!--html-->
    <h1>print</h1>
    <script id="t7" type="text/html">
        {{print a b c}}
    </script>
/*js*/
var h7 = '';
var d7 = {
    a: 'hello',
    b: '--world',
    c: '--!!!'
};
h7 = template('t7', d7);
document.write(h7);

错误捕获(runtime-error,请打开控制台):

    <!--html-->
    <h1>错误捕获(请打开控制台)</h1>
    <script id="t8" type="text/html">
        <ul>
            {{each list}}
            {{/each}}
            {{window.alert=null}}
        </ul>
    </script>
/*js*/
var h8 = '';
h8 = template('t8', {});
document.write(h8);

多重if判断:

    <!--html-->
    <h1>多重if判断</h1>
    <div id="c9"></div>
    <script id="t9" type="text/html">
        {{if flag == '1'}}
            <span>123</span>
        {{else if flag == "2"}}
            <span>456</span>
        {{else}}
            <span>789</span>
        {{/if}}
    </script>
/*js*/
var d9 = {
    flag: '1'
};
document.getElementById('c9').innerHTML = template('t9', d9);

遍历:

    <!--html-->
    <h1>遍历</h1>
    <div id="c10"></div>
    <script id="t10" type="text/html">
        <ul>
            {{each list}}
                <li>索引 {{$index + 1}} : {{$value}}</li>
            {{/each}}
        </ul>
    </script>
/*js*/
var d10 = {
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};

document.getElementById('c10').innerHTML = template('t10', d10);

全部的html代码:

<!DOCTYPE HTML>
<html>
<head>
    <title>Index</title>
    <meta http-equiv="Expires" content="0"/>
    <meta http-equiv="Cache" content="no-cache"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" src="../../plugins/art-template/template-web.js"></script>
    <style type="text/css"></style>
</head>
<body>
    <div id="c1"></div>
    <script id="t1" type="text/html">
        {{if isAdmin}}
            <h1>{{title}}</h1>
            <ul>
                {{each list value i}}
                    <li>索引 {{i + 1}} : {{value}}</li>
                {{/each}}
            </ul>
        {{/if}}
    </script>

    <h1>在javascript中存放模板</h1>
    <div id="c2"></div>

    <!--<h1>错误捕获(请打开控制台)</h1>
    <script id="t3" type="text/html">
        {{2 a ba d}}
    </script>-->

    <h1>自定义过滤器</h1>
    <div id="c4"></div>
    <script id="t4" type="text/html">
        {{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}
    </script>

    <div id="c5"></div>
    <script id="t5" type="text/html">
        <h1>{{title}}</h1>
        {{include 't5-list'}}
    </script>
    <script id="t5-list" type="text/html">
        <ul>
            {{each list value i}}
                <li>索引 {{i + 1}} :{{value}}</li>
            {{/each}}
        </ul>
    </script>

    <h1>不转义HTML</h1>
    <div id="c6"></div>
    <script id="t6" type="text/html">
        <p>不转义:{{#value}}</p>
        <p>默认转义: {{value}}</p>
    </script>

    <h1>print</h1>
    <script id="t7" type="text/html">
        {{print a b c}}
    </script>

    <!--<h1>错误捕获(请打开控制台)</h1>
    <script id="t8" type="text/html">
        <ul>
            {{each list}}
            {{/each}}
            {{window.alert=null}}
        </ul>
    </script>-->

    <h1>多重if判断</h1>
    <div id="c9"></div>
    <script id="t9" type="text/html">
        {{if flag == '1'}}
            <span>123</span>
        {{else if flag == "2"}}
            <span>456</span>
        {{else}}
            <span>789</span>
        {{/if}}
    </script>

    <h1>遍历</h1>
    <div id="c10"></div>
    <script id="t10" type="text/html">
        <ul>
            {{each list}}
                <li>索引 {{$index + 1}} : {{$value}}</li>
            {{/each}}
        </ul>
    </script>

    <script type="text/javascript" src="../../js/art-template/index.js"></script>
</body>
</html>

全部的js代码:

var d1 = {
    title: '基本例子',
    isAdmin: true,
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};

document.getElementById('c1').innerHTML = template('t1', d1);

var s2 = '<ul>' +
    '{{each list value i}}' +
    '<li>索引 {{i + 1}} : {{value}}</li>' +
    '{{/each}}' +
    '</ul>';

document.getElementById('c2').innerHTML = template.compile(s2)({
    list: ['摄影', '电影', '民谣', '旅行', '吉他']
});

/*var h3 = '';
h3 = template('t3', {});
document.write(h3);*/

/**
 * 对日期进行格式化,
 * @param date 要格式化的日期
 * @param format 进行格式化的模式字符串
 *     支持的模式字母有:
 *     y:年,
 *     M:年中的月份(1-12),
 *     d:月份中的天(1-31),
 *     h:小时(0-23),
 *     m:分(0-59),
 *     s:秒(0-59),
 *     S:毫秒(0-999),
 *     q:季度(1-4)
 * @return String
 * @author yanis.wang
 * @see    http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
 */
template.defaults.imports.dateFormat = function (date, format) {
    if (typeof date === "string") {
        var mts = date.match(/(\/Date\((\d+)\)\/)/);
        if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
        }
    }
    date = new Date(date);
    if (!date || date.toUTCString() == "Invalid Date") {
        return "";
    }
    var map = {
        "M": date.getMonth() + 1, //月份
        "d": date.getDate(), //日
        "h": date.getHours(), //小时
        "m": date.getMinutes(), //分
        "s": date.getSeconds(), //秒
        "q": Math.floor((date.getMonth() + 3) / 3), //季度
        "S": date.getMilliseconds() //毫秒
    };
    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
        var v = map[t];
        if (v !== undefined) {
            if (all.length > 1) {
                v = '0' + v;
                v = v.substr(v.length - 2);
            }
            return v;
        } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
        }
        return all;
    });
    return format;
};
var d4 = {
    time: new Date().getTime()
};
document.getElementById('c4').innerHTML = template('t4', d4);

var d5 = {
    title: '嵌入子模板',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
document.getElementById('c5').innerHTML = template('t5', d5);

var d6 = {
    value: '<span style="color: #6382ff">hello world!</span>'
};
document.getElementById('c6').innerHTML = template('t6', d6);

var h7 = '';
var d7 = {
    a: 'hello',
    b: '--world',
    c: '--!!!'
};
h7 = template('t7', d7);
document.write(h7);

/*var h8 = '';
h8 = template('t8', {});
document.write(h8);*/

var d9 = {
    flag: '1'
};
document.getElementById('c9').innerHTML = template('t9', d9);

var d10 = {
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};

document.getElementById('c10').innerHTML = template('t10', d10);

本文作者:断桥残雪丶

本文链接:https://www.cnblogs.com/codexing/p/16003052.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   断桥残雪丶  阅读(64)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起