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

Надеюсь, не велосипед.

Tagged with →  

36 Responses to Джентльмены, на ваш строгий суд моя разработка для JS+jQuery.

  1. UpaFcuk:

    Пример 1.
    Допустим, мы хотим сделать объект, который плавно появится при добавлении его в DOM.
    Раньше это выглядело бы так:

    С помощью чудо-скрипта можно сделать так:

    Пример 2.
    Мы хотим сделать подобный способ появления для группы объектов, имеющих, например, CSS-класс ‘fadeMeIn’.
    Раньше я хз, как бы это сделал. Но теперь могу так:

    Скачать jquery.domchanged.oncreate.js.zip.
    Скрипт прост и проверен в боевых условиях. Срабатывает при добавлении объектов через jQuery методами unwrap, wrap, wrapAll, wrapInner, appendTo, html, prepend, prependTo, after, before, insertAfter, insertBefore, replaceAll, replaceWith.

  2. Noooff:

    Ничего в этом не понимаю, но вижу, что ты чего-то хорошее сделал. Да ещё и с людьми делишься. Спасибо. Не от меня, — от тех, кто воспользуется, — а сказать «спасибо» — забудет. 🙂

  3. IjdGood:

    Но в любом случае молодец же.

  4. IjdGood:

    $(‘div.fadeIn’).live(‘create’,function() {$(this).fadeIn();});
    и триггером вызвать событие при создании элемента в доме. Не?

  5. IjdGood:

    Забыл сказать, что я против инлайновых скриптов и стилей. По-моему, если нужно делать что-то инлайном — значит что-то идет не так.

  6. UpaFcuk:

    Ну у меня прикол в том, что можно просто создать объект, а скриптов с ним никаких не надо. Но для твоего способа можно просто создать авто-триггер через мою функцию, но, боюсь, это будет подлагивать при внедрении объекто-ёмких компонентов.

  7. UpaFcuk:

    Да, не очень красиво, но стадии разработки удобно.

  8. Veaer:

    live — зло и deprecated.

    : хотите использовать собственные атрибуты — используйте HTML5 data-*. Впрочем, вы ведь наверняка eval’ите их, а это плохо, потому что:
    1) код становится гораздо более уязвим к injection’ам
    2) дебажить eval — неудобно
    3) падение перформанса

    + как уже заметили — инлайн JS это old school.

  9. Kkebad:

    ну так лайв же вроде депрекейтед потому что ввели on()/off()?

  10. UpaFcuk:

    На счёт data-* ты несомненно прав. А ещё мой способ помогает отказаться от ID, который, если я не сошёл с ума, тоже может стать издержкой старой школы.

  11. UpaFcuk:

    Да, если вставляешь

  12. UpaFcuk:

    Да, если вставляешь через jquery html-код со скриптом, то он тоже проходит eval. Например, когда получил через ajax какую ни будь красоту, допустим, с $(‘myButton’).button();

  13. YowaTa:

    for (var k in new_objects){

    }

    следует привести к виду

    for (var k in new_objects){
    if(new_objects.hasOwnProperty(k)) {

    }
    }

    Ну и как-то код писан не по-русски.
    Оберни всё в анонимную функцию, штоле, а то объявление еще одной ni_domchanged всё поломает к чертям.

    А вот за это ты будешь гореть в аду:
    var result = ni_domchanged.jq_orig_funcs[func_name].c all(this, arguments[0], arguments[1], arguments[2], arguments[3], arguments[4], arguments[5], arguments[6]);

    result = ni_domchanged.jq_orig_funcs[func_name].a pply(this, Array.prototype.slice.call(arguments, 0, 7));

  14. UpaFcuk:

    Спасибо. Заменил эту адовую работу с аргументами при подмене jQ-функций на твой способ. Апдейтнул архив, который выше. Как сделать анонимную функцию не врубился (

  15. UpaFcuk:

    Только что апдейтнул архив и картинки в посте, заменил oncreated на data-oncreated.

  16. YowaTa:

    (function($) {
    //это для того, чтобы не срать в глобальный контекст.
    var ni_domchanged =…
    }(jQuery));

    Ну и раз уж тут джейквери, то наверное стоит оформить всё это в виде плагина.

  17. Aynsuper:

    Честно — адовый код. Начиная с самого подхода, пробегаться по всем-всем элементам в документе при каждом чихе. И заканчивая стилем кода и проходом по массивам через for.. in. Хотя, если ты серверсайдщик на похапе — это простительно.

  18. IjdGood:

    согласен что лив зло, я просто предложил первую попавшуюся альтернативу покороче.

  19. SbVelo:

    Это уже получается какой-то UnUnobtrusive код.
    Можно ведь просто присвоить нужные классы таким элементам, а потом назначить delegated events через on() для этих классов.
    И будет срабатывать как для существующих элементов, так и для вновь добавленных. Понятно, что будет определенный набор действий, но так это же даже хорошо.
    Теоретически 🙂

  20. Kr0Blank:

    Здравствуй, dojo.

  21. UpaFcuk:

    С for in это я лоханул, да, давно писалось. Уже апдейтнул.
    Пробег по всем объектам происходит и при каждом запросе jQuery, например. При 50 объектов мой пробег занимает 0.00005 — 0.0001 с. (Mozilla, проц. 2х2.4 ГГц).

    А чем плох PHP и PHP-шники? Или это просто этнический высер из темы «windows must die», «fruity Loops гавно», «rap-калл»?

  22. UpaFcuk:

    Ещё хотелось бы узнать, что не так со стилем кода, пожалуйста?

  23. YowaTa:

    Здравствуй, dojo, новый год

  24. UpaFcuk:

    Впрочем, последовательное добавление 1000 объектов происходит в 5 раз медленнее… (

  25. Aynsuper:

    50 элементов — мелочи. Попробуй на 1000 или более. PHP сам по себе не плох, это замечание относилось к стилю кода. А в частности к:

    1. Использованию глобальных переменных (ni_domchanged).
    2. new Array() вместо []
    3. for.. in для массивов, вместо обычного цикла (уже поправил). Кстати, советую еще кэшировать длину массивов в переменной.
    4. arguments[0], arguments[1], … (уже поправил)
    5. Дублированию:

    ni_domchanged.extend_jq_func(‘unwrap’, 0);
    ni_domchanged.extend_jq_func(‘wrap’, 0);
    ni_domchanged.extend_jq_func(‘wrapAll’, 0);

    6. eval вместо конструкора функции (new Function())

  26. Veaer:

    не совсем, live убрали в пользу delegate, а вот уже delegate уберут в пользу on.

    дело в том, что у live был дурацкий синтаксис $(selector).live(event…), но обработчик вешался вовсе не на элементы подходящие под селектор, а на document, ловил все event’ы и проверял их на соответствие selector’у. т.е. по сути это $(document).delegate(selector, event…). многие его использовали не задумываясь, в результате огребали проблемы с производительностью.

  27. UpaFcuk:

    Подскажи барану, по шестой позиции так правильно: new Function(‘return ‘ + code)();?

  28. Veaer:

    да через ajax вообще «красоту» не следует получать, JSON, ну максимум сгенерированный HTML при проблемах с производительностью, но без инлайновых JS.

  29. Aynsuper:

    Хотя, тебе не нужно сразу вызвать. Тебе нужно просто var func = new Function(‘return ‘ + oncreate); а потом уже вызывать через call (как у тебя было с eval).

  30. SpoSm:

    https://github.com//jquery-domChang… была у меня такая штука 🙂 правда она тупо триггером вверх пуляла и всё 🙂
    А для всех кроме IE (мб в 9-ке) есть DOMSubtreeModified эвент ) Но всё = эту штуку я только для дэбага некоторых вещей использую и так скажем посмотреть как часто с домом работаю, в живую такие вещи использовать страшновато.

  31. SpoSm:

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

  32. UpaFcuk:

    Ну класс DOMSubtreeModified … Значит, идея разумна.. Выходит надо просто переделать штуковину в костыль для IE.

  33. Ylfer:

    инлайновый css не нужен

  34. UpaFcuk:

    это для наглядности

Добавить комментарий