Javascript-форум - Я нашел способ создать интерфейс

Javascript-форум (https://javascript.ru/forum/)

- Ваши сайты и скрипты (https://javascript.ru/forum/project/)

- - Я нашел способ создать интерфейс (https://javascript.ru/forum/project/21101-ya-nashel-sposob-sozdat-interfejjs.html)

Я нашел способ создать интерфейс

Получается миниатюрный аналог JQuery.
loadImage - для HTML5 Canvas,
DOM - для манипуляции с элементами (не путать с JQuery).

DOM(document).event({"DOMContentLoaded":function(){
DOM(document.getElementById("canvas")).attr({
"width":"100",
"height":"100"
}).css({
"background-color":"rgb(255,0,0)"
});
}});

Сам скрипт:

(function(){
var global = (function(){return this;})();

global.DOM = function(element){
var elem = element;
var obj = {};

//Set Attributes
obj.attr = function(src){
  if(obj==null){obj={}}
  if(src==null){src={}}
  for(var i in src){
    elem.setAttribute(i,src[i]);
  }
  return obj;
}

//Set CSS
obj.css = function(src){
  if(obj==null){obj={}}
  if(src==null){src={}}
  for(var i in src){
    if(typeof elem.style.setProperty != "undefined"){
      elem.style.setProperty(i,src[i],null);
    } else {
      elem.style.setAttribute(i,src[i]);
    }
  }
  return obj;
}

//Event Attach
obj.event = function(obj){
  if(obj==null){obj={}}
  for(var i in obj){
    if(elem.addEventListener) {
      elem.addEventListener(i, obj[i], false);	
    } else
    if(elem.attachEvent) {
      elem.attachEvent('on' + i, function(e){func.call(obj[i], e);});
    }
  }
  return obj;
}

return obj;
};

global.loadImage = function(src,onload){
  var img = new Image();
  img.src = src;
  img.onload = onload;
  return img;
};

})();

Как видите - работает цепочка!

Видите как все просто! :p

Большой (очень) расход памяти будет.

Я вам скажу точно - расхода памяти не будет!
Сам проверял!

Еще один секрет проще:
var x = JQuery;
x(function(){
...
});

Цитата:

Сообщение от Solovei95 (Сообщение 123241)

Из-за Window?

нет. из-за того, что ты декорируешь каждый раз пустой объект

global.DOM = function(element){
        var obj = {};
        obj.attr = ..
};

если засунешь все эти плюшки (event, css,attr и т.д) в прототип, то будет уже лучше

Цитата:

Сообщение от Solovei95 (Сообщение 123243)

Еще один секрет проще:
var x = JQuery;
x(function(){
...
});

чем не устраивает

$(function(){
..
})

Цитата:

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

var x = JQuery;
x(function(){
...
});

Открытие Америки?

(function(){
var global = (function(){return this;})();


//Image Loader
global.loadImage = function(src,onload){
  var img = new Image();
  img.src = src;
  img.onload = onload;
  return img;
};


//DOM Object
global.DOM = function(element){
var elem = element;
var obj = {};

obj.attr = function(src){
DOM.prototype.attr(elem,src);
return obj;
};

obj.css = function(src){
DOM.prototype.css(elem,src);
return obj;
};

obj.event = function(src){
DOM.prototype.event(elem,src);
return obj;
};

return obj;
};

//Set Attributes
DOM.prototype.attr = function(elem,src){
  if(src==null){src={}}
  for(var i in src){
    elem.setAttribute(i,src[i]);
  }
}

//Set CSS
DOM.prototype.css = function(elem,src){
  if(src==null){src={}}
  for(var i in src){
    if(typeof elem.style.setProperty != "undefined"){
      elem.style.setProperty(i,src[i],null);
    } else {
      elem.style.setAttribute(i,src[i]);
    }
  }
}

//Event Attach
DOM.prototype.event = function(elem,src){
  if(src==null){src={}}
  for(var i in src){
    if(elem.addEventListener) {
      elem.addEventListener(i, src[i], false);	
    } else
    if(elem.attachEvent) {
      elem.attachEvent('on' + i, function(e){func.call(src[i], e);});
    }
  }
}

})();

Цитата:

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

obj.attr = function(src){
DOM.prototype.attr(elem,src);
return obj;
};

Ололо. Потребление памяти всё равно линейно зависит от количества вызовов функции DOM.

У тебя сильный ляп!
Мой будет лучше!

(function(){
var global = (function(){return this;})();


//Image Loader
global.loadImage = function(src,onload){
  var img = new Image();
  img.src = src;
  img.onload = onload;
  return img;
};


//DOM Object
global.DOM = function(element){
  var init = new xDOM(element);
  return init;
};

//Function xDOM
var xDOM = function(element){
  var elem = element;

  //Set Attributes
  this.attr = function(src){
    if(src==null){src={}}
    for(var i in src){
      elem.setAttribute(i,src[i]);
    }
    return this;
  }

  //Set CSS
  this.css = function(src){
    if(src==null){src={}}
    for(var i in src){
      if(typeof elem.style.setProperty != "undefined"){
        elem.style.setProperty(i,src[i],null);
      } else {
        elem.style.setAttribute(i,src[i]);
      }
    }
    return this;
  }

  //Event Attach
  this.event = function(src){
    if(src==null){src={}}
    for(var i in src){
      if(elem.addEventListener) {
        elem.addEventListener(i, src[i], false);	
      } else
      if(elem.attachEvent) {
        elem.attachEvent('on' + i, function(e){func.call(src[i], e);});
      }
    }
    return this;
  }
};

})();

Суть такова:
- Один обьект xDOM (локальный, коренной)
- Несколько обьектов DOM (глобальный, вызывает xDOM)

Такая схема снизит потребление памяти!

Вот именно вызывает xDOM а не создает.

Можете меня банить - у меня карма -810

DOM(document).event({"DOMContentLoaded":function(){
DOM(document.getElementById("canvas"))

//Element Attributes
.attr({
"width":"100",
"height":"100"
})

//Element Styles
.css({
"background-color":"rgb(255,0,0)"
});
}});

Работает, проверил лично!

Цитата:

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

У тебя сильный ляп!
Мой будет лучше!

Да, Ваш ляп лучше — потребление памяти по-прежнему линейно зависит от числа экземпляров DOM.

Цитата:

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

Можете меня банить - у меня карма -810

Судя по нику, Вам должно быть 15-16 лет. А ведёте себя как неадекватный первоклассник.

Я веду себя нормально!

DOM(document).event({"DOMContentLoaded":function(){
DOM(document.getElementById("canvas"))

//Element Attributes
.attr({
"width":"100",
"height":"100"
})

//Element Styles
.css({
"background-color":"rgb(255,0,0)"
});

//Element Events
var element = DOM(document.getElementById("canvas")).event({
"mousedown":function(){
element.css({"background-color":"rgb(255,128,0)"});
},
"mouseup":function(){
element.css({"background-color":"rgb(255,0,0)"});
}
});

}});

Личный пример! Работает просто!

И кстати, с чего вы взяли, что потребление памяти растет?
Разве из-за постоянного return this ???

Цитата:

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

Я веду себя нормально!

Цитата:

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

Личный пример! Работает просто!

Цитата:

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

Такая схема снизит потребление памяти!

Цитата:

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

Работает, проверил лично!

Цитата:

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

У тебя сильный ляп!

Цитата:

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

Мой будет лучше!

Цитата:

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

Я вам скажу точно - расхода памяти не будет!

Цитата:

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

Как видите - работает цепочка!

Цитата:

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

Сам проверял!

Цитата:

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

Видите как все просто!

Куда столько экспрессии? Зачем столько восклицательных предложений? Зачем создавать по тысяче постов вместо редактирования одного единственного?
melky предложил свой вариант, а Вы сказали, что у него какой-то недостаток, не указав какой. Сами тем временем продолжаете наступать на те же грабли.
И в довершение совершенно непонятная просьба забанить.

Цитата:

И кстати, с чего вы взяли, что потребление памяти растет?
Разве из-за постоянного return this ???

При чём здесь это? Вы на каждый вызов DOM создаете новый объект и записываете ему кучу собственных свойств-функций (читай — методов) вместо того, чтобы использовать общие для всех объектов данного конструктора.

Цитата:

Сообщение от Solovei95 (Сообщение 123289)

Вот именно вызывает xDOM а не создает.

а он каждый раз опять таки добавляет свойства объекту.

Цитата:

Сообщение от Solovei95;

И кстати, с чего вы взяли, что потребление памяти растет?
Разве из-за постоянного return this ???

1000 проходов