Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.08.2011, 14:11
Профессор
Посмотреть профиль Найти все сообщения от Solovei95
 
Регистрация: 15.03.2011
Сообщений: 353

Я нашел способ создать интерфейс
Получается миниатюрный аналог 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;
};

})();

Последний раз редактировалось Solovei95, 29.08.2011 в 14:55.
Ответить с цитированием
  #2 (permalink)  
Старый 29.08.2011, 14:14
Профессор
Посмотреть профиль Найти все сообщения от Solovei95
 
Регистрация: 15.03.2011
Сообщений: 353

Как видите - работает цепочка!
Ответить с цитированием
  #3 (permalink)  
Старый 29.08.2011, 14:15
Профессор
Посмотреть профиль Найти все сообщения от Solovei95
 
Регистрация: 15.03.2011
Сообщений: 353

Видите как все просто!
Ответить с цитированием
  #4 (permalink)  
Старый 29.08.2011, 14:15
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

Большой (очень) расход памяти будет.
Ответить с цитированием
  #5 (permalink)  
Старый 29.08.2011, 14:53
Профессор
Посмотреть профиль Найти все сообщения от Solovei95
 
Регистрация: 15.03.2011
Сообщений: 353

Из-за Window?

Последний раз редактировалось Solovei95, 29.08.2011 в 14:56.
Ответить с цитированием
  #6 (permalink)  
Старый 29.08.2011, 14:56
Профессор
Посмотреть профиль Найти все сообщения от Solovei95
 
Регистрация: 15.03.2011
Сообщений: 353

Я вам скажу точно - расхода памяти не будет!
Сам проверял!
Ответить с цитированием
  #7 (permalink)  
Старый 29.08.2011, 14:59
Профессор
Посмотреть профиль Найти все сообщения от Solovei95
 
Регистрация: 15.03.2011
Сообщений: 353

Еще один секрет проще:
var x = JQuery;
x(function(){
...
});
Ответить с цитированием
  #8 (permalink)  
Старый 29.08.2011, 15:03
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Solovei95 Посмотреть сообщение
Из-за Window?
нет. из-за того, что ты декорируешь каждый раз пустой объект

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

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

Сообщение от Solovei95 Посмотреть сообщение
Еще один секрет проще:
var x = JQuery;
x(function(){
...
});
чем не устраивает
$(function(){
..
})
Ответить с цитированием
  #9 (permalink)  
Старый 29.08.2011, 15:28
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

Сообщение от Solovei95
var x = JQuery;
x(function(){
...
});
Открытие Америки?
Ответить с цитированием
  #10 (permalink)  
Старый 29.08.2011, 15:29
Профессор
Посмотреть профиль Найти все сообщения от Solovei95
 
Регистрация: 15.03.2011
Сообщений: 353

(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);});
    }
  }
}

})();
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
создать <style> melky Элементы интерфейса 6 09.05.2011 17:35
как создать в цикле несколько дочерних элементов одного уровня? DimonCry Общие вопросы Javascript 11 13.01.2011 10:46
Создать объект из строчек Hagrael Events/DOM/Window 16 09.07.2010 10:25
Создать узел <img> внутри <div> glutton Events/DOM/Window 1 09.11.2009 14:41
немогу создать фаил с помощью JavaScrip Greasemonkey в Mozilla firefox выдает ошибку crem Firefox/Mozilla 2 11.08.2009 03:44