Question

我正在尝试制作一个简单的模板引擎。我想出了这个

//测试数据

data = {
    "car": "BMW",
    "year": "2015"
}

//通过克隆第一次加载来准备默认模板

elem = window.document.getElementById("mytemplate");
function prepare(templ) {
    var template = elem.cloneNode(true);
    return template;
}

//获取默认模板并将数据附加到所选节点

之后附加结果

function append(templ) {
    text = templ.innerHTML;
    match = text.match(/\{{.*?}\}/g);
    console.log(match);
    for (var i = 0; i < match.length; i++) {
        text = text.replace(match[i], data[match[i].replace(/\W+/g, "")]);
        templ.innerHTML = text;
        elem.parentNode.appendChild(templ.cloneNode(true));
    }
}

//常规渲染器将数据呈现到默认节点

function render(templ) {
    var text = templ.innerHTML;
    var match = text.match(/\{{.*?}\}/g);
    for (var i = 0; i < match.length; i++) {
        var text = text.replace(match[i], data[match[i].replace(/\W+/g, "")]);
        elem.innerHTML = text;
    }
}


render(prepare(elem ));
append(prepare(elem ));
append(prepare(elem ));

// HTML

<p id="mytemplate">{{car}} - {{year}}</p>

我的问题是当我使用渲染功能时。我将无法再使用append函数，因为当我将其保存到“elem”var中时，默认模板已消失。现在我的问题是如何保存这样一个变量并能够多次使用它？

如何设置和保存默认变量javascript

0 个答案: