Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   изменение типа массива (https://javascript.ru/forum/misc/29169-izmenenie-tipa-massiva.html)

z700i 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 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 18.06.2012 14:53
Цитата:
Сообщение от melky
ещё проще.

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

melky 18.06.2012 15:07
Цитата:
Сообщение от devote (Сообщение 182283)
чето ты ему совсем не то советуешь.. ему же свойства стилей и прочих свойств у элемента нужно менять.. а ты ему какой-то прототип советуешь, который будет жить сам по себе и не применяться к элементу его свойства.
почему же не то? в вашем способе свойства объекта params переписываются в элемент, а у меня через прототип params получает "настройки по-умолчанию", чтобы везде не писать 
params.parent||document.body
params.id||"defId"
params.style || {}

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

devote 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 18.06.2012 15:26
Цитата:
Сообщение от devote
melky,
ок тогда объясни почему я не вижу дивака при твоем варианте?
потому что я в вызове забыл внести тег в хеш, и что-то намудрил с наследованием ...

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

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

melky 18.06.2012 15:43
Цитата:
Сообщение от devote
да я вообще не понимаю как ты пытаешься прототипами добавить элементы свойству. Элемент не функция, она не может расшириться за счет прототипов, лишь только через window.Element ...
я не расширяю элемент, я расширяю хеш опций. я забыл, что смешать 2 объекта таким образом не получится. простите, тупанул.

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

devote 18.06.2012 16:14
Цитата:
Сообщение от Deff
Только для скорости не сходу добавляем на страницу, а формируем некую переменную всех текущих добавляемых и только потом всовываем
ну дык он же добавляет свойства еще не вставленному элементу в DOM дерево, поэтому скорость от этого не сильно падает.


Часовой пояс GMT +3, время: 06:10.