Форум

z700i · #1 (**permalink**) 18.06.2012, 12:54

Хотел сделать функцию которая добавляет элемент на страницу
Выглядит это как-то так:

function create(tag,params,parent){
    if(!tag)
        return 'tagName is null';
    var nevv =  document.createElement(tag);
    nevv.id = params.id;
    return (parent? parent : document.body).appendChild(nevv); 
}

create('div',
       {
           id:'newDiv',
           class:'className',
           style:{
               display:'none',
               width:'100px'
           }
       },
       ge('parent')
      )

Встретился с проблемой применения параметров(params), писать для каждого из них отдельную команду:

nevv.id = params.id? params.id : '';
nevv.class = params.class? params.class : '';
nevv.style.display = params.style.display? params.style.display : '';
nevv.style.width = params.style.width? params.style.width : '';
nevv.style.height = params.style.height? params.style.height : '';

Слишком объёмно и в плане работы, и в плане размера кода, да и работать, я подозреваю, будет не шибко быстро..
Можно ли сделать из ассоциативного массива многомерный и заполнить параметры существующими значениями с помощью цикла?

devote · #2 (**permalink**) 18.06.2012, 13:03

function applyParams( obj, params ) {
    for( var key in params ) {

        if ( typeof params[ key ] === "object" ) {
            applyParams( obj[ key ], params[ key ] );
        } else {
            obj[ key ] = params[ key ];
        }
    }
}

function create( tag, params, parent ) {

    if ( !tag ) {
        return 'tagName is null';
    }

    var nevv =  document.createElement( tag );

    if ( params && typeof params === "object" ) {
        applyParams( nevv, params );
    }

    return ( parent || document.body ).appendChild( nevv );
}

devote · #3 (**permalink**) 18.06.2012, 14:53

Сообщение от melky

ещё проще.

засунул parent в params.parent, и tag в params. вместо копирования используется наследование. настройки "по-умолчанию" находятся в defParams.

чето ты ему совсем не то советуешь.. ему же свойства стилей и прочих свойств у элемента нужно менять.. а ты ему какой-то прототип советуешь, который будет жить сам по себе и не применяться к элементу его свойства.

melky · #4 (**permalink**) 18.06.2012, 15:07

Сообщение от devote

чето ты ему совсем не то советуешь.. ему же свойства стилей и прочих свойств у элемента нужно менять.. а ты ему какой-то прототип советуешь, который будет жить сам по себе и не применяться к элементу его свойства.

почему же не то? в вашем способе свойства объекта params переписываются в элемент, а у меня через прототип params получает "настройки по-умолчанию", чтобы везде не писать

params.parent||document.body
params.id||"defId"
params.style || {}

короче говоря, мой способ - то же самое, что и extend у jquery (с нек-и ограничениями)

devote · #5 (**permalink**) 18.06.2012, 15:15

melky,
ок тогда объясни почему я не вижу дивака при твоем варианте?

<html>
<head>
</head>
<body>
<script>
var defParams = {
    parent: document.body,
    id: "",
    className: "default_class_for_created_elements"
};
 
function create(params){
    if (!params.tag) return;
    params.prototype = defParams;
    var nevv =  document.createElement(tag);
    nevv.id = params.id;
    nevv.className = params.className;
    return params.parent.appendChild(nevv); 
}
 
create('div',
       {
           id:'newDiv',
           className:'className',
           innerHTML: 'test',
           style:{
               //display:'none',
               width:'100px'
           }
       }
      )
</script>
</body>
</html>

А вот мой вариант:

<html>
<head>
</head>
<body>
<script>
function applyParams( obj, params ) {
    for( var key in params ) {
 
        if ( typeof params[ key ] === "object" ) {
            applyParams( obj[ key ], params[ key ] );
        } else {
            obj[ key ] = params[ key ];
        }
    }
}
 
function create( tag, params, parent ) {
 
    if ( !tag ) {
        return 'tagName is null';
    }
 
    var nevv =  document.createElement( tag );
 
    if ( params && typeof params === "object" ) {
        applyParams( nevv, params );
    }
 
    return ( parent || document.body ).appendChild( nevv );
}
 
create('div',
       {
           id:'newDiv',
           className:'className',
           innerHTML: 'test',
           style:{
               //display:'none',
               width:'100px'
           }
       }
      )
</script>
</body>
</html>

melky · #6 (**permalink**) 18.06.2012, 15:26

Сообщение от devote

melky,
ок тогда объясни почему я не вижу дивака при твоем варианте?

потому что я в вызове забыл внести тег в хеш, и что-то намудрил с наследованием ...

devote · #7 (**permalink**) 18.06.2012, 15:29

Сообщение от melky

потому что я в вызове забыл внести тег в хеш, и что-то намудрил с наследованием ...

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

PS. Сделай пожалуйста рабочий пример того чего ты предлагаешь.

melky · #8 (**permalink**) 18.06.2012, 15:43

Сообщение от devote

да я вообще не понимаю как ты пытаешься прототипами добавить элементы свойству. Элемент не функция, она не может расшириться за счет прототипов, лишь только через window.Element ...

я не расширяю элемент, я расширяю хеш опций. я забыл, что смешать 2 объекта таким образом не получится. простите, тупанул.

Deff · #9 (**permalink**) 18.06.2012, 16:02

Сообщение от z700i

да и работать, я подозреваю, будет не шибко быстро..

Cамое быстрое imxo - эт примитивный способ добавления параметров сразу в тег
var a ='<'+TAG+' '+ param1+'=' +valPar1+' '+ param1+'=' +valPar2+'></'+TAG+'>';
Легко организуется в цикл (Только для скорости не сходу добавляем на страницу, а формируем некую переменную всех текущих добавляемых и только потом всовываем

devote · #10 (**permalink**) 18.06.2012, 16:14

Сообщение от Deff

Только для скорости не сходу добавляем на страницу, а формируем некую переменную всех текущих добавляемых и только потом всовываем

ну дык он же добавляет свойства еще не вставленному элементу в DOM дерево, поэтому скорость от этого не сильно падает.

Форум

Справочник

Discord чат

Курсы javascript