原生JS不到30行，实现类似javascript MVC的功能-minTemplate

严格来讲不能说是MVC，应为模版里不能写逻辑语句。

灵感来源于我的上篇文字：《封装JSON数据转自定义HTML方法parseHTML》；

这里再封装一个简单方法，在保持原来的方便改变不大的前提下，简单地根据数据长度，循环地翻译模版，再插入指定节点里；

只是觉得我的开发过程中很多时候要拼接字符串，拼接起来的字符串又难维护；

这个方法主要是为了提高以后编码的效率，开发过程中减少手工拼接字符串的重复劳动。

不是为了MVC而MVC;

2013-10-16更新：

            1.替换原来的递归方法（递归效率低）；

            2.runjs.cn上，添加了自模版的例子；查看

            3.模版中添加了{index} 属性；

            4.配置中添加插入模式insertType;

            5.filter函数，增加obj参数 。

来看看QQ网购首页的部分源码：

<script type="text/html" id="floorMidCommTpl">

<%for(var i=0,j=arr.length;i<j;i++){%>

<li>

    <a href="<%=arr[i].clickUrl%>" title="<%=arr[i].itemFullName%>" class="img_wrap" target="_blank"><img init_src="<%=arr[i].uploadPicUrl1%>" width="120" height="120" alt="<%=arr[i].itemFullName%>"/></a>

    <div class="img_detail">

        <p class="price_now">&yen;<%=(arr[i].activePrice/100).toFixed(2)%></p>

        <p class="name"><a href="<%=arr[i].clickUrl%>" target="_blank"><%=arr[i].itemFullName%></a></p>

    </div>

</li>

<%}%>

</script>

提供了丰富的语法支持，惊叹不已！！！

官方说其模版引擎压缩版才2kb，《高性能JavaScript模板引擎原理解析》

看了全篇文章，只能感叹作者的厉害，超出我的能力范围。

以后会继续反复看，不知道什么时候才能深入得理解！

看看我的方法吧：

1.模版例子，没有语法支持，也不打算以后支持。继续往下看，会对这个问题提供解决方法。

<ul id="DemoTarget"></ul>

<script type="text/html" id="DemoTpl">

    <li>姓名：{name}</li>

    <li>性别：{sex}</li>

</script>

<ul id="DemoTarget"></ul>

这里需要加个结果插入节点，之前考虑直接用script.appendBefore()方式插入，

但是考虑在同一个位置可以反复插入数据，同时清除之前的结构，就多加一个条件。

2.数据例子：

var DemoJSON = [{

    name: '蜡笔小新',

    sex: 0

}, {

    name: '小丸子',

    sex: 1

}, {

    name: '凹凸曼',

    sex: -1

}];

 3.调用方式

minTemplate.pro({

    temp: 'DemoTpl',

    target: 'DemoTarget',

    json: DemoJSON,

    filter: function (key, val) {

        //如果是{sex}对应的数值返回相应的文字

        if (key == 'sex') {

            return ['保密', '男', '女'][val + 1];

        }

        return val;

    }

});

filter回调函数，使得数据显示更加灵活， 一定意义上弥补了模版不支持逻辑的语句的缺点。甚至可以做到子模版的功能！详细看文后的runjs.cn

4.就这么简单，返回的结果是：

<ul id="DemoTarget">

    <li>姓名：蜡笔小新</li>

    <li>性别：男</li>



    <li>姓名：小丸子</li>

    <li>性别：女</li>



    <li>姓名：凹凸曼</li>

    <li>性别：保密</li>

</ul>

5.minTempate源码：

var minTemplate = {
    temp: {},
    target: {},
    index: 0,
    base: function (template, json, fn) {
        var result = '';
        if (Object.prototype.toString.call(json) === '[object Array]') {
            for(var i = 0, len = json.length; i < len; i++){
                json[i].index = i;
                result += template.replace(/{([^{}]+)}/g, function (match, key) {
                    return fn === undefined ? json[i][key] : fn(key, json[i][key], json[i]);
                });
            }
            return result;
        } else {
            alert('只接收数组形式的JSON数据！');
        }
    },
    getId: function (elem) {
        return document.getElementById(elem);
    },
    pro: function (config) {
        this.temp[config.temp] = this.temp[config.temp] || this.getId(config.temp)
        this.target[config.target] = this.target[config.target] || this.getId(config.target);
        this.target[config.target].innerHTML = (config.insertType ? this.target[config.target].innerHTML : '') +
            this.base(this.temp[config.temp].innerHTML, config.json, config.filter);
    }
};

----------------------------------------------------------------------------------------------------

runjs.cn在线演示：

runjs.cn结果：

转载请注明出处：http://www.cnblogs.com/dreamback

如有任何建议或疑问，欢迎留言讨论。