Закрытие JavaScript и построитель DOM

Question

Я делаю DOM-конструктор, который успешно работает, но сейчас я пытаюсь назначить некоторые сокращенные функции, чтобы div() -> e("div")

Вот мой код:

//assign these objects to a namespace, defaults to window
(function(parent) {

/**
* Creates string of element
* @param tag The element to add
* @param options An object of attributes to add
* @param child ... n Child elements to nest
* @return HTML string to use with innerHTML
*/
var e = function(tag, options) {
    var html = '<'+tag;
    var children = Array.prototype.slice.apply(arguments, [(typeof options === "string") ? 1 : 2]);

    if(options && typeof options !== "string") {
        for(var option in options) {
            html += ' '+option+'="'+options[option]+'"';
        }
    }

    html += '>';
    for(var child in children) {
        html += children[child];
    }
    html += '</'+tag+'>';
    return html;
}

//array of tags as shorthand for e(<tag>) THIS PART NOT WORKING
var tags = "div span strong cite em li ul ol table th tr td input form textarea".split(" "), i=0;
for(; i < tags.length; i++) {
    (function(el) { //create closure to keep EL in scope
        parent[el] = function() {
            var args = Array.prototype.slice.call(arguments);
            console.log(args);
            args[0] = el; //make the first argument the shorthand tag
            return e.apply(e,args);
        };
    })(tags[i]);
}

//assign e to parent
parent.e = e;
})(window);

В настоящее время происходит то, что массив args изменяется каждый раз, когда я вызываю одну из сокращенных функций, и я предполагаю, что должно произойти замыкание где-нибудь, поэтому созданный мною массив args не затрагивается при каждом его вызове. Вот результаты модульных тестов:

div (div (span ("Content")), ожидаемый span ()): <div><div><span>Content</span></div><span></span></div> результат: <div><span></span></div>

div (ожидаемый div (span (e ("b", e ("b", e ("b")))), span ())): <div><div><span><b><b><b></b></b></b></span><span></span></div></div> результат: <div></div>

Answer 1

Хотя это не дает прямого ответа на ваш вопрос,

for(var el in tags) {

не совсем правильно.tags - это массив, а не объект, поэтому его свойства нельзя перечислить с помощью for (... in ...).Попробуйте

for(var el = 0; el < tags.length; el++) {

Это может иметь огромное значение для понимания интерпретатором вашего кода ... и правильного выполнения вашего алгоритма.

Answer 2

@ MvanGeest - технически разрешено делать for..in для массива. Массивы по-прежнему являются объектами в JavaScript. Индекс массива будет ключевым при повторении с использованием цикла for..in. Очевидно, что нет смысла использовать массив в этом случае, но я хотел бы уточнить.

@ Anurag - метод forEach не поддерживается в IE8 (не уверен насчет 9), поэтому он не может быть надежным методом для использования в будущем.

Answer 3

Светлый момент, я переписывал первый элемент, когда намеревался использовать args.unshift(el);