一个简单的dom型模板示例

template.html

<div>
    <a href="{{protocol}}//{{host}}{{pathname}}">{{protocol}}//{{host}}{{pathname}}</a>
</div>

<script>

function Template(node) {

    var prototype = document.createDocumentFragment();
    prototype.appendChild(node);



    var queue = [{ node: prototype, path: []}];

    var setters = [];
    function path2node(root, path) {
        var curr = root;
        for (var i = 0; i < path.length && typeof path[i] == "number"; i++) {
            curr = curr.childNodes[path[i]];
        }
        if (typeof path[i] == "string") {
            return curr.getAttributeNode(path[i]);
        }
        else {
            return curr;
        }
    }
    while(queue.length)
    {
        var current = queue.shift();
        //console.log(current.path, current.node);

        if (current.node.nodeType == current.node.TEXT_NODE) {
            if (current.node.textContent.match(/\{\{[^}]+\}\}/)) {
                setters.push(function (path, prop, template) {
                    return function (root, data) {
                        var obj = path2node(root, path);
                        obj[prop] = template.replace(/\{\{([^}]+)\}\}/g, function (str, p) {
                            return data[p];
                        })
                    }
                } (current.path, "textContent", current.node.textContent));
            }
            continue;
        }
        if (current.node.nodeType == current.node.ATTRIBUTE_NODE) {
            if (current.node.value.match(/\{\{[^}]+\}\}/)) {
                setters.push(function (path, prop, template) {
                    return function (root, data) {
                        var obj = path2node(root, path);
                        obj[prop] = template.replace(/\{\{([^}]+)\}\}/g, function (str, p) {
                            return data[p];
                        })
                    }
                } (current.path, "value", current.node.value));
            }
            continue;
        }
        if(current.node.childNodes) 
        {
            for(var i = 0; i<current.node.childNodes.length; i++)
            {
                queue.push({node:current.node.childNodes[i],path:current.path.concat([i])});
            }
        }
        if (current.node.attributes) {
            for (var i = 0; i < current.node.attributes.length; i++) {
                queue.push({ node: current.node.attributes[i], path: current.path.concat([current.node.attributes[i].name]) });
            }
        }
    }
    this.apply = function (data) {
        var element = prototype.cloneNode(true);
        for (var i = 0; i < setters.length; i++) {
            setters[i](element, data);
        }
        return element;
    }
}

var t = new Template(document.querySelector("div"));

document.body.appendChild(t.apply(location));
document.body.appendChild(t.apply({protocol:"http:",host:"www.baidu.com",pathname:"/"}));
document.body.appendChild(t.apply({protocol:"http:",host:"127.0.0.1",pathname:"/"}));

</script>

@webzhangnan 这个模板的核心竞争力是绑定速度 用outerHTML毫无意义