Javascript模板库'；清晰度及其性能（与我的相比）

我刚刚开始用javascript编写自己的小模板库，因为当我浏览其他文档时，脑海中总是有这样的声音：“哦，这是很多代码和功能。这真的是必要的还是会降低性能？”

如果你能够遵循惯例，你可能会遇到更少的问题

所以我最终写了一个小剧本，上面的引语在我的脑海里。 这里的约定是，数据需要一个对象，其键必须与模板中的相同，在分隔符括号“{key}}”中提到

但现在我开始考虑这样一个事实，其他库包含的代码比我的多，这肯定是有原因的，不是吗

我脑子里还有一些想法，比如：

更少的代码=更好的性能

为什么这么多人将他们的项目与这个模板库联系起来？ （性能问题=>这将反驳我的第一点）

如果有人能给我解释一下这个话题，那就太好了

我的心态正确吗

当我是对的时候，有什么我可以改进的吗，甚至当我是错的时候

如果你向我推荐一个图书馆，你的理由是什么

---

一个人的复杂性就是另一个人的功能性。在这个示例中，您的简单临时处理系统是否可以执行条件语句（如果var为true，则执行模板的这一部分）？对数组进行迭代怎么样？模板时包含的部分模板如何？当循环通过一个数组访问上下文中的数据时，情况会怎样

---

作为我自己的Javascript/CF/Go模板系统的开发人员，我可以说它总是从简单开始，但是现实世界会阻碍我，你实际上必须做一些事情。这意味着要增加复杂性，并且要尽可能以最负责任的方式进行，不断权衡增加的复杂性是否会使开发人员的生活更轻松，而不会鼓励不良行为（例如在模板时处理数据）

您可能想在codereview.stackexchange.com上发布此消息，在那里它可能不会关闭，甚至可能会得到一个不错的答案。好的，我会这样做，谢谢您的建议：）看起来您正在将AJAX混合到模板中，最好单独处理。但是当我不使用AJAX加载模板时，获取模板文件的更好方法是什么？或者您建议我将模板直接保存到脚本本身的变量中？对我来说，没有其他方法可以解决这个问题，我知道你提到了一些好问题，我一定会考虑的，谢谢：）

function Template(url, data) {

    this.url = url;
    this.data = data;

    this.delimiter = ['{{','}}'];


    this.load = function() {

        var string = new String();

        var http = null;
        if ( window.XMLHttpRequest ) {
            http = new XMLHttpRequest();
        } else {
            http = new ActiveXObject("Microsoft.XMLHTTP");
        }

        http.open('GET', url, false);
        http.onreadystatechange = function() {
            if ( http.readyState === 4 ) {
                string = http.response;
            }
        };
        http.send(null);

        this.template = string;
        return this;

    };

    this.exchange = function() {

        for ( var key in this.data ) {

            var bracketedKey = this.delimiter[0] + key + this.delimiter[1];
            var indexOfKey = this.template.indexOf(bracketedKey);
            var lengthOfKey = bracketedKey.length;

            var exchange = this.template.substring(indexOfKey, indexOfKey+lengthOfKey);

            this.template = this.template.replace(exchange, this.data[key]);

        }

        return this;

    };

    this.build = function(selector) {

        this.load();
        this.exchange();

        var div = document.createElement('div');
        div.innerHTML = this.template;
        div = div.firstChild;

        if ( typeof selector === 'string' ) {
            document.querySelector(selector).appendChild(div);
        } else {
            return div;
        }

    };

}