2008-10-21

JavaScript наследование

JavaScript, программирование

Разбирая исходники библиотеки mootolls обнаружил ссылку на блог некоего Дина Эдвардса (Dean Edwards). Дин предлагает свою версию эмуляции объектно-ориентированного программирования на JavaScript.

Основные особенности следующие: не нужно кажный раз для расширения класса писать MyClass.prototype; можно обращаться к методам базового класса из переопределенных методов (аналог super в Java); поддержка статических методов свойств; не используются глобальные функции для создания цепочек прототипов; не изменяется Object.prototype.

Вобщем довольно интересная штука, хотя на мой взгляд super в общем то не очень и нужен, хотя идея сама по себе, на мой взгляд, классная и реализация отличная.

 

Оставить комментарий

 
  2008-10-21

jQuery, Prototype - Исправляем родовые травмы браузеров

JavaScript, программирование

При создании проектов где требуется достаточно сложное программирование на JavaScript нередко начинаешь задумываться над использованием какой нибудь библиотеки для облегчения кодирования. В частности, к числу таких библиотек принадлежат jQuery и Prototype.

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

Однако, если задуматься над тем что предоставляют эти библиотеки такого без чего совершенно нельзя обойтись и раде чего мы готовы пожертвовать размером приложений - это поддержка XPath, лучшая кроссбраузерная совместимость, разный sugar типа анимации, ajax утилит и т.п.

Однако странная вещь обе эти библиотеки реализованы прямо скажем довольно своеобразно - jQuery - для обеспечения кроссбраузерности оборачивает все объекты с которыми работает в собственный объект jQuery через алиаc $. в результате код выглядит примерно вот так:

$(document).ready(function(){ $('.deletelink').click(function(){ if (confirm('Are you sure to delete this blog?')){ return true; } return false; }); });

Prototype напротив использует вызовы типа $('id_of_element') для вызова элемента по его ID при этом "расширяя" объект дополнительными методами.

Нужно ли говорить что оба подхода не способствуют эффективности. Зачем так сделано? Почему все так странно? Оказывается ответ прост! Internet Explorer и Safary не поддерживает переопределение методов HTMLElement.prototype! Все элементарно - из-за нестандартного повседения одного браузера разработчики вынуждены прыгать через голову, выворачиваться наизнанку, изобретать велосипед.

 

Оставить комментарий

 
  2008-06-30

Таскание мышью используя JavaScript

программирование, JavaScript
Здесь работающий пример как сделать сабж. Потаскайте мышью красный квадрат. Работает в IE и FF, в других браузерах тоже должно, хотя и не тестировал.
 

Оставить комментарий

 
  2008-06-20

Как проставить неразрывный пробел ( ) с использованием document.createTextNode

программирование, JavaScript

Долгое время не получалось при работе со структурой документа использовать спец символы типа   - если пишешь что-то типа document.createTextNode('&nbps') то получается не неразрывный пробел а его html представление поэтому приходилось присваивать свойство innerHTML вместо того чтобы оставаться в рамках модели XML DOM что не очень то красиво.

Просто createTextNode не понимает html разметки, ему нужно скармливать символы как они есть без использования html замен, но вот беда, на клавиатуре у нас нет неразрывного пробела - есть только обычный. Оказывается набрать неразрывный пробел можно на клавиатуре - подсказка в виндовой таблице символов - нажимаем alt и не отпуская набираем на дополнительной клавиатуре 0160 (в режиме Num Lock), отпускаем alt - появляется пробел - но это не обычный пробел а самый что не на есть неразрывный, html код которого и есть   его можно вставлять в createTextNode без проблем.

 

Оставить комментарий

 
  2008-06-19

Private методы и свойства в JavaScript

программирование, JavaScript
Наткнулся на замечательную статью про то как в JavaScript можно создавать приватные методы и свойства для объектов. Никогда не задумывался над этим под таким углом, но вещь несомненно очень интересная.
 

Оставить комментарий

 
  2008-06-05

onReady

программирование, JavaScript

Сегодня клиенты пожаловались что если что нибудь на странице не загрузилось то не работатет часть JavaScript'овского функционала - конкретно у них не сработала загрузка видео с ютуба - чето последнее время у них не быстро там все работает. Просто основная логика на странице подключается с использованием события onLoad - в принципе штука не обязательная в человечьих браузерах, но вот в Эксплорере при попытки поменять что либо до этого события возникает очень плохая ошибка.

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

Оказывается вносить изменения в объектную модель браузера можно и до возникновения события onLoad, т.е. когда не все изображения еще подгружены

ниже привожу функцию для отслеживания момента когда в браузере становится возможным вносить изменения в объектную модель документа. Идея позаимствована из JQuery

/** * faster way to load content in browser idea taken frin JQuery * this allows do not wait until data will be completely loaded * seems only opera can allow load faster using this function - * though in JQuery they say it's supported... */ //alert(document.addEventListener); function bindReady(){ if ( bindReady.readyBound ) return; bindReady.readyBound = true; if (document.addEventListener){ document.addEventListener( "DOMContentLoaded", bindReady.ready, false ); } // Mozilla, Opera (see further below for it) and webkit nightlies currently support this event // If IE is used and is not in a frame // Continually check to see if the document is ready if ( Object.isIE && window == top ) (function(){ if (bindReady.isReady) return; try { // If IE is used, use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ document.documentElement.doScroll("left"); } catch( error ) { setTimeout( arguments.callee, 0 ); return; } // and execute any waiting functions bindReady.ready(); })(); if ( Object.isSafari || Object.isOpera ) { var numStyles; (function(){ if (bindReady.isReady) return; if ( document.readyState != "loaded" && document.readyState != "complete" ) { setTimeout( arguments.callee, 0 ); return; } bindReady.ready(); })(); } } bindReady.readyBound = false; bindReady.isReady = false; bindReady.ready = function(){ bindReady.isReady = true; var i; for (i=0;i

Тестировал в IE6/IE7, Safari, Opera, FF. Не нравится только как работает в Опере - там скрипт срабатывает позже onLoad, в остальных браузерах гораздо раньше

 

Оставить комментарий

 
  2008-04-29

Касперский зажигает

Сегодня попросили меня показать как на JS сделать опрос удаленного сервера по HTTP, ну код для этого совершенно тривиальный:

var fso = new ActiveXObject('Scripting.FileSystemObject'); var f = fso.CreateTextFile('C:\\test.txt'); var http = new ActiveXObject('XMLDOM3.XMLHTTP'); http.open('http://www.microsoft.com'); http.send(); var f.Write(http.ResponseText);

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

 

Коментариев: 1

 
  2007-11-08

Дзен-программизм

Недавно на баше наткнулся на симпатичный пост

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

Вот если написать простейший код на JavaScript
<html> <head> <title>Дзен-программизм</title> </head> <script type="text/javascript"> intQuanty = 1; intQuanty = intQuanty + 0; alert(intQuanty); </script> </html>

Результат выполнения программы будет "1" как и следовало ожидать.

Однако стоит сделать переменную intQuanty строковой, то результат будет совсем другой

<html> <head> <title>Дзен-программизм</title> </head> <script type="text/javascript"> intQuanty = "1"; intQuanty = intQuanty + 0; alert(intQuanty); </script> </html>

Что и требовалось доказать! Конечно ноль лучше бы поставить в кавычки, однако для того чтобы запутать всех в конец можно и так оставить.

Думаю, если сделать аналогичные эксперименты на других языках результаты получатся даже интереснее.

Однажды показал такой фокус одинеснице - так она на меня смотрела как на прокаженного.

 

Оставить комментарий

 
  2007-10-12

Семь бед — один embed

Сегодня встала задача сделать страничку с ютубовскими мувиками валидной в XHTML Transitional. Сама по себе задачка решена давно,  можно использовать для этих целей SWFObject, но он зараза никак wmode не позволяет менять, или я просто не умею это делать. Кроме того синтаксис его использования какой-то громоздкий и некрасивый. Решил своими силами сделать аналог посимпатичнее.
Конечно за безбаговость не ручаюсь но потестировал на IE6, IE7, в Опере, FF и Sаfari.
Самое интересное что код с тегом Object нигде не понадобился. Я то думал что он нужен для эксплорера, оказывается что шестой эксплорер тег Object кушать наотрез отказался, а вот EMBED скушал за милую душу.

Вот что получтилось:
flasher.js

function flasher(){
 this.attr = {'wmode':'transparent','type':'application/x-shockwave-flash'};
 var i;
 for(i=0;i<arguments.length;i=i+2){
     this.attr[arguments[i]] = arguments[i+1];
 }
}

flasher.prototype.write = function(element){
    var el = document.getElementById(element);
    var args = '';
    for(key in this.attr){
      args = args + ' ' + key+'='+this.attr[key];
    }   
    el.innerHTML = '<embed '+args+'></embed>';
}


как это использовать:
<div style="width:425px;margin:10px auto;" id="darren_dicke"><!--Darren Dicke--></div>
<script type="text/javascript">
// <![CDATA[         
    var fo = new flasher("src", "http://www.youtube.com/v/g3Y_mQA0E0A", "width","425", "height","350" );
    fo.write("darren_dicke");
// ]]>
</script>
к недостаткам можно отнести отсутствие автообновления плагина, займусь этим как нибудь на досуге потом.
 

Оставить комментарий

разное (183)
howto (124)
программирование (108)
гад-же-ты (75)
мысли (42)
PHP (41)
JavaScript (39)
вебмастеринг (37)
linux (28)
гондураша (28)
юмор (25)
полезное (21)
движок (17)
Android (17)
софт (15)
деньги (14)
видео (13)
кино (13)
музыка (10)
беспредел (10)
путешествия (10)
интернет (9)
diy (9)
ztools (8)
книги (8)
умный дом (8)
занимательная физика (8)
языки (7)
хостинг (7)
Nokia 5800 (7)
lifehack (6)
css (6)
вебдизайн (6)
apple (5)
arduino (5)
связной (5)
прелоадер (5)
козлы (5)
oDesk (5)
занимательная юриспруденция (4)
кухня (4)
Python (4)
аниме (4)
svn (4)
рестораны (3)
энергия (3)
synphony (3)
software (3)
фото на документы (2)
webmastering (2)
Java (2)
Ruby on Rails (2)
спорт (2)
bash (2)
движек (2)
гитара (2)
дурдом (1)
C++ (1)
годнурас (1)
микросервисы (1)
SEO (1)
programming (1)
технологии (1)
наука (1)
сайты (1)
авторское право (1)
восстановить (1)
Поиск по блогу:

Valid XHTML 1.0 Strict