Question

我目前正在构建一个解析器和编译器来处理我自己的自定义双向数据绑定，一切正常但是它涉及我通过.innerHTML附加我的模板字符串，效率不高。

解析时我需要访问某些DOM方法，例如.getElementsByTagName('*')并执行其他遍历任务，因此我无法使用DOC片段，因为字符串为text/html无法使用{{3使用text/xml

的

有没有人知道一个简单的解决方案，让我解析我的字符串并将元素存储在存储中，然后我可以在追加到DOM之前操作和绑定事件？

这是我想要避免的当前html字符串插入的精简版本：

(function(){

    'use strict';

    var globalModel = function(data){
        this.templateString = data.template || '';
        this.template = data.node || document.body;
        this.initialise();
    };

    globalModel.prototype = {
        initialise: function(){
            this.template .innerHTML = this.templateString;
            this.compile();
        },
        compile: function(){
            var nodes = this.template.getElementsByTagName('*');
            //calling other methods with nodes, parsing and doing more traversal
        }
    }

    var myModule = new globalModel({
        template: '<div>Your email is {{email}} <input type="text" data-relation="email" /> {{test}} </div>'
    });

})();

Answer 1

尝试这样做：

var temp = document.createElement('div')
temp.innerHTML = this.templateString;

然后您可以在执行绑定后将所有子项移动到this.containerNode。

以编程方式解析html字符串的最佳方法，无需附加到DOM

1 个答案: