Loading

对字符串的拼凑，神奇似vue的写法

对字符串的拼凑，神奇似vue的写法

与vue相似之处：给html邦值都是用大括号{}，括号里面写变量

原理：用正则表达匹配{}中的是否存在表达式中预先声明的变量，如果有则返回变量结果，没有则不处理

/**
     * 对字符串的拼凑
     * @param  {[type]} args [description]
     * @return {[type]}      [description]
     */
    String.prototype.format = function(args) {
        var result = this;
        if (arguments.length > 0) {
            if (arguments.length == 1 && typeof(args) == "object") {
                for (var key in args) {
                    if (args[key] != undefined) {
                        var reg = new RegExp("({" + key + "})", "g");
                        result = result.replace(reg, args[key]);
                    }
                }
            } else {
                for (var i = 0; i < arguments.length; i++) {
                    if (arguments[i] != undefined) {
                        var reg = "/\\{" + i + "\\}/g";
                        result = result.replace(eval(reg), arguments[i]);
                    }
                }
            }
        }
        return result;
    };

　　

demo -> html

<body>
    <ul id="menu">

    </ul>
</body>

demo -> js

var menu = [{
        value: '首页'
    }, {
        value: '关于我'
    }, {
        value: '碎岩碎雨'
    }, {
        value: '学无止境'
    }];
    var temp_li = '<li><a onclick="downloadFile(this)" href="#">{value}</a></li>';
    var li = '';
    var num = 0;
    for (var i in menu) {
        li += temp_li.format({
            value: menu[i].value,
            id:function(){
                return num++;
            }
        })
    }
    document.getElementById('menu').innerHTML = li;

效果

上面只是一个很纯粹的dom拼接，也不足以显露这个format的强大之处

现在再结合一下这个小工具

/**
     * 清除节点注释
     * @param domStr string类型 如：<!--<div id="label">...</div>-->
     * @return string <div id="label">...</div>
     */
    function clearNotes(domStr) {
        return domStr.replace(/<\!--/g, '').replace(/-->/g, '');
    }

dom - >html 下面注释内容就相当于一个模板

<ul id="person">
    <!--
    <li>姓名：{name}</li>
    <li>年龄：{age}</li>
    <li>性别：{sex}</li>
    -->
</ul>

dom-> js 

原理：jQuery获取被注释的dom -> 填充大括号变量的返回值 -> 再重新把dom插入进去

var person = {
    name: '张三',
    age: '23',
    sex: '男'
}

function fill() {
    var _html= clearNotes($('#person').html()).format({
        name: person.name,
        age: person.age,
        sex: function(){
            return person.sex
        }
    });
    $('#person').html(_html);
}
fill();

　　

dom - > html渲染结果

 

posted @ 2017-11-22 11:08  冯叶青  阅读(1189)  评论(0)    收藏  举报