Re[6]: Стиль программирования в JavaScript - Философия программирования

Привет.

Не приходилось ковыряться в готовых javascript фрейморках. обычно просто подключал и юзал.
но вот захотел в lightbox поменят 2 дива местами. открыл js файл и ахнул

скажите это нормальные стиль писания на жаваскрипте?
по мне после с++ разит глаза кол-во скобок и все одним куском

Lightbox.prototype.build = function() {
      var $lightbox,
        _this = this;
      $("<div>", {
        id: 'lightboxOverlay'
      }).after($('<div/>', {
        id: 'lightbox'
      }).append($('<div/>', {
        "class": 'lb-outerContainer'
      }).append($('<div/>', {
        "class": 'lb-container'
      }).append($('<img/>', {
        "class": 'lb-image'
      }), $('<div/>', {
        "class": 'lb-nav'
      }).append($('<a/>', {
        "class": 'lb-prev'
      }), $('<a/>', {
        "class": 'lb-next'
      })), $('<div/>', {
        "class": 'lb-loader'
      }).append($('<a/>', {
        "class": 'lb-cancel'
      }).append($('<img/>', {
        src: this.options.fileLoadingImage
      }))))), $('<div/>', {
        "class": 'lb-dataContainer'
      }).append($('<div/>', {
        "class": 'lb-data'
      }).append($('<div/>', {
        "class": 'lb-details'
      }).append($('<span/>', {
        "class": 'lb-caption'
      }), $('<span/>', {
        "class": 'lb-number'
      })), $('<div/>', {
        "class": 'lb-closeContainer'
      }).append($('<a/>', {
        "class": 'lb-close'
      }).append($('<img/>', {
        src: this.options.fileCloseImage
      }))))))).appendTo($('body'));
      $('#lightboxOverlay').hide().on('click', function(e) {
        _this.end();
        return false;
      });

Здравствуйте, pose, Вы писали:

P>Привет.

P>Не приходилось ковыряться в готовых javascript фрейморках. обычно просто подключал и юзал.
P>но вот захотел в lightbox поменят 2 дива местами. открыл js файл и ахнул

P>скажите это нормальные стиль писания на жаваскрипте?
P>по мне после с++ разит глаза кол-во скобок и все одним куском

Млин... Это же стиль jQuery... Нашли куда смотреть.

Порядочные люди это чудо стороной обходят.

P>Привет.

P>Не приходилось ковыряться в готовых javascript фрейморках. обычно просто подключал и юзал.
P>но вот захотел в lightbox поменят 2 дива местами. открыл js файл и ахнул

P>скажите это нормальные стиль писания на жаваскрипте?
P>по мне после с++ разит глаза кол-во скобок и все одним куском

P>

P>Lightbox.prototype.build = function() {
P>      var $lightbox,
P>        _this = this;
P>      $("<div>", {
P>        id: 'lightboxOverlay'
P>      }).after($('<div/>', {
P>        id: 'lightbox'
P>      }).append($('<div/>', {
[...]
P>      }))))))).appendTo($('body'));
P>      $('#lightboxOverlay').hide().on('click', function(e) {
P>        _this.end();
P>        return false;
P>      });
P>

Нет, это jquery головного мозга. Это адская нечитабельная неподдерживаемая каша. Ни в каком языке такой код нельзя назвать нормальным.

Более менее объективные недостатки: каждый $('<div/>') делает DOM createElement, элементы создаются одним синтаксисом, а аттрибуты к ним довешиваются другим, много уровней вложенности никак не отражено отступами.

А ведь можно document.createElement('DIV').innerHTML = '<div class=foo><div id=bar>'; Легко читать, легко что-нибудь дописать, верстальщики скажут спасибо, DOM лишний раз не дёргается, jquery для создания элементов окна вообще не нужен.

Здравствуйте, boot, Вы писали:

B>Здравствуйте, pose, Вы писали:

P>>Привет.

P>>Не приходилось ковыряться в готовых javascript фрейморках. обычно просто подключал и юзал.
P>>но вот захотел в lightbox поменят 2 дива местами. открыл js файл и ахнул

P>>скажите это нормальные стиль писания на жаваскрипте?
P>>по мне после с++ разит глаза кол-во скобок и все одним куском

B>Млин... Это же стиль jQuery... Нашли куда смотреть.

Порядочные люди это чудо стороной обходят.

ну т.е. в jQuery — это образец как обычно пишется код?

зы. а что вместо джеквери предложить можете? вот мне нужна фотогаллерея на сайте

Здравствуйте, Temoto, Вы писали:

P>>Привет.

P>>Не приходилось ковыряться в готовых javascript фрейморках. обычно просто подключал и юзал.
P>>но вот захотел в lightbox поменят 2 дива местами. открыл js файл и ахнул

P>>скажите это нормальные стиль писания на жаваскрипте?
P>>по мне после с++ разит глаза кол-во скобок и все одним куском

T>Нет, это jquery головного мозга. Это адская нечитабельная неподдерживаемая каша. Ни в каком языке такой код нельзя назвать нормальным.

T>Более менее объективные недостатки: каждый $('<div/>') делает DOM createElement, элементы создаются одним синтаксисом, а аттрибуты к ним довешиваются другим, много уровней вложенности никак не отражено отступами.

T>А ведь можно document.createElement('DIV').innerHTML = '<div class=foo><div id=bar>'; Легко читать, легко что-нибудь дописать, верстальщики скажут спасибо, DOM лишний раз не дёргается, jquery для создания элементов окна вообще не нужен.

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

Здравствуйте, pose, Вы писали:

Javascript + jquery — это очень читабельно, понятно и просто! (с) Mamut

Здравствуйте, pose, Вы писали:

P>

P>Lightbox.prototype.build = function() {
P>      var $lightbox,
P>        _this = this;
P>      $("<div>", {
P>        id: 'lightboxOverlay'
P>      }).after($('<div/>', {
P> …
P>      }))))))).appendTo($('body'));
P>      $('#lightboxOverlay').hide().on('click', function(e) {
P>        _this.end();
P>        return false;
P>      });
P>

P>скажите это нормальные стиль писания на жаваскрипте?
Нет, ни капли не нормальный! Скорее всего это писал один из тех кто считает что jQuery — это и есть javascript.
В общем подходы такие как классы через прототипы, чейнинг довольно часто используются. Но как правило это выглядит куда проще.
Вот пример чейнинга, немного по лучше http://underscorejs.org/#chain

Здравствуйте, Пацак, Вы писали:

П>Здравствуйте, pose, Вы писали:

П>Javascript + jquery — это очень читабельно, понятно и просто! (с) Mamut

Проблемы не в языках, а в головах (c) Не_помню_кто

P>скажите это нормальные стиль писания на жаваскрипте?

Вот правильный стиль: http://github.com/leprosus/js-small/

Здравствуйте, os24ever, Вы писали:

O>Вот правильный стиль: http://github.com/leprosus/js-small/

Нда?

Скрытый текст

        unbind: function(type, callback){
            this.each(function(object){
                if(object.events){
                    if(type){
                        if(typeIn(type, 'string')) type = type.replace(/\s+/g, '').split(',');
                        if(typeIn(type, 'array')){
                            type = small.lower(small.trim(type));
                            if(small.contain(type, eventList))
                                small.each(type, function(current){
                                    if(object.events[current])
                                        if(callback){
                                            var events = object.events[current], runFlag = true;
                                            small.each(events, function(key, value){
                                                if(value.callback == callback && runFlag){
                                                    if(value.detachEvent) value.detachEvent('on'.concat(value), value.handler);
                                                    else if(value.removeEventListener) value.removeEventListener(value, value.handler, false);
                                                    delete events[key];
                                                    runFlag = false;
                                                }
                                            });
                                        }else{
                                            var owner = small(object);
                                            small.each(object.events[current], function(event){
                                                owner.unbind(current, event);
                                            });
                                            object.events[current] = [];
                                        }
                                });
                        }
                    }else{
                        var typeList = [];
                        small.each(object.events, function(key, value){
                            typeList[typeList.length] = key;
                        });
                        small(object).unbind(typeList);
                        object.events = {};
                    }
                }
            });
            return this;
        },

Здравствуйте, silverwolf, Вы писали:

S>Проблемы не в языках, а в головах (c) Не_помню_кто

Кто б спорил. Но глядя на некоторые языки порой начинает казаться, что их создатели объявили охоту за головами.

Здравствуйте, boot, Вы писали:

B>Млин... Это же стиль jQuery... Нашли куда смотреть.

Порядочные люди это чудо стороной обходят.

Порядочные люди обходят стороной jquey? Вот так новость. Кастую Мамута.

Здравствуйте, Пацак, Вы писали:

П>Здравствуйте, silverwolf, Вы писали:

S>>Проблемы не в языках, а в головах (c) Не_помню_кто

П>Кто б спорил. Но глядя на некоторые языки порой начинает казаться, что их создатели объявили охоту за головами.

Все языки полны по Тьюрингу, поэтому на любом можно написать нечитальный код (c) VladD2

Здравствуйте, os24ever, Вы писали:

P>>скажите это нормальные стиль писания на жаваскрипте?

O>Вот правильный стиль: http://github.com/leprosus/js-small/

if(typeIn(node, 'string'))

Вызов собственной сложной функции вместо typeof node === 'string' это правильный стиль? Я понимаю, что там есть другие вызовы, когда проверяется несколько типов, но их очень немного.

P>>>Привет.

P>>>Не приходилось ковыряться в готовых javascript фрейморках. обычно просто подключал и юзал.
P>>>но вот захотел в lightbox поменят 2 дива местами. открыл js файл и ахнул

P>>>скажите это нормальные стиль писания на жаваскрипте?
P>>>по мне после с++ разит глаза кол-во скобок и все одним куском

B>>Млин... Это же стиль jQuery... Нашли куда смотреть.

Порядочные люди это чудо стороной обходят.

P>ну т.е. в jQuery — это образец как обычно пишется код?

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

Собственно, в том же jQuery можно сделать $("<div class=foo><div id=bar>...") в один шаг.

Здравствуйте, Temoto, Вы писали:

T>Собственно, в том же jQuery можно сделать $("<div class=foo><div id=bar>...") в один шаг.

Это парсинг строки на джаваскрипте == тормоза, за такой код в библиотеке надо расстреливать. В своём джаваскрипте на здоровье, а библиотека не должна вносить тормоза на ровном месте.

Здравствуйте, pose, Вы писали:

P>скажите это нормальные стиль писания на жаваскрипте?
да. у скриптеров культуры кодинга нет, потому всё есть сплошное говно

Здравствуйте, vsb, Вы писали:

T>>Собственно, в том же jQuery можно сделать $("<div class=foo><div id=bar>...") в один шаг.

vsb>Это парсинг строки на джаваскрипте == тормоза, за такой код в библиотеке надо расстреливать. В своём джаваскрипте на здоровье, а библиотека не должна вносить тормоза на ровном месте.

Если скорость критична, то и $('<div/>') тоже недопустим, да и jquery вообще, а document.createElement() — наше всё.

T>>Собственно, в том же jQuery можно сделать $("<div class=foo><div id=bar>...") в один шаг.

vsb>Это парсинг строки на джаваскрипте == тормоза, за такой код в библиотеке надо расстреливать. В своём джаваскрипте на здоровье, а библиотека не должна вносить тормоза на ровном месте.

Я думал, что такую строку jQuery отдаст браузеру через innerHTML. Если нет, то "не делайте так"

Здравствуйте, vsb, Вы писали:

vsb>Здравствуйте, Temoto, Вы писали:

T>>Собственно, в том же jQuery можно сделать $("<div class=foo><div id=bar>...") в один шаг.

vsb>Это парсинг строки на джаваскрипте == тормоза,
Если бы все было так просто

Суть в том, что код из оригинала топика активно работает с ДОМом, то есть может вызывать repaint/reflow/relayout/restyle. Пример Temoto, скорее всего, будет работать через DocumentFragments. И это вполне может перекрыть все "тормоза" парсинга строки, которые в современных браузерах не такие уж и тормоза. На небольших фрагментах эти "тормоза" будут не заметны, а вот вставки по элементно в ДОМ могут быть заметны даже на 5-10 элементах.

P.S. Хотя вы таки правильно воспользовались знаком "==", ибо "==" это еще не "==="

Здравствуйте, Temoto, Вы писали:

T>>>Собственно, в том же jQuery можно сделать $("<div class=foo><div id=bar>...") в один шаг.

vsb>>Это парсинг строки на джаваскрипте == тормоза, за такой код в библиотеке надо расстреливать. В своём джаваскрипте на здоровье, а библиотека не должна вносить тормоза на ровном месте.

T>Я думал, что такую строку jQuery отдаст браузеру через innerHTML. Если нет, то "не делайте так"

Вроде даже лучше, через createDocumentFragment. Это может быть даже быстрее если в html-е тяжелые стили. Я помню, когда тестировал то однозначного ответа не получил:

innerHTML — работает стабильнее по скорости в разных браузерах, но иногда вызывает фризы
createDocumentFragment — иногда быстрее иногда медленнее (сильно зависело от браузера, я так и не понял почему)

* Данные где-то 1-1,5 годичной давности.

Здравствуйте, silverwolf, Вы писали:

S>Здравствуйте, vsb, Вы писали:

vsb>>Здравствуйте, Temoto, Вы писали:

T>>>Собственно, в том же jQuery можно сделать $("<div class=foo><div id=bar>...") в один шаг.

vsb>>Это парсинг строки на джаваскрипте == тормоза,
S>Если бы все было так просто

S>Суть в том, что код из оригинала топика активно работает с ДОМом, то есть может вызывать repaint/reflow/relayout/restyle. Пример Temoto, скорее всего, будет работать через DocumentFragments. И это вполне может перекрыть все "тормоза" парсинга строки, которые в современных браузерах не такие уж и тормоза. На небольших фрагментах эти "тормоза" будут не заметны, а вот вставки по элементно в ДОМ могут быть заметны даже на 5-10 элементах.

Там же новый элемент создаётся, нет там никакого reflow.

Здравствуйте, dimgel, Вы писали:

T>>>Собственно, в том же jQuery можно сделать $("<div class=foo><div id=bar>...") в один шаг.

vsb>>Это парсинг строки на джаваскрипте == тормоза, за такой код в библиотеке надо расстреливать. В своём джаваскрипте на здоровье, а библиотека не должна вносить тормоза на ровном месте.

D>Если скорость критична, то и $('<div/>') тоже недопустим, да и jquery вообще, а document.createElement() — наше всё.

Случай вида $("<div>") обрабатывается отдельно и накладных расходов там минимум.

Здравствуйте, vsb, Вы писали:

vsb>Там же новый элемент создаётся, нет там никакого reflow.
Таки не заметил что он сначала создается, а потом вставляется, сорри.

Здравствуйте, pose, Вы писали:

P>ну т.е. в jQuery — это образец как обычно пишется код?

В самом jQuery много очень познавательных примеров использования JS, но это как книжка по дзен -- нельзя воспринимать буквально.
Обычно, в системном программировании, главным являются алгоритмы и структуры данных.

P>зы. а что вместо джеквери предложить можете? вот мне нужна фотогаллерея на сайте

Вот это самая правильная постановка вопроса. Для Вашей задачи вряд ли является критичным выбор.
О том, что далее спорить не буду.
Вообще, не могу предложить, почти ничего, совсем нет желания тратить время на устаревшие, по моему мнению, приемы (в этом и смысл движения, не западать окончательно на одном), а то, что актуально сейчас, никак не могу разглашать. Если попросите у мыщъх ссылку на на то, о чем он писал здесь, Вам может повезти.
Веб -- это не только фотогаллереи. Как Вы работаете с фотками и пр. локально? Представьте, что точно так же можно и через веб.

Здравствуйте, pose, Вы писали:

P>ну т.е. в jQuery — это образец как обычно пишется код?
P>зы. а что вместо джеквери предложить можете? вот мне нужна фотогаллерея на сайте

Вспомнил случай, поэтому копну глыбже.

Десяток лет назад ко мне обратился один паренек с такой просьбой: "-- Мне бы хотелось научиться говорить как Вы."
Это сбило меня с толку, не знал что ответить, поэтому написал ему: "Приходите, что нибудь придумаем".
Оказался он типичным сангвиником, и интересовало его только одно -- "Как?". А я никогда не обращал внимания на то как говорю и пишу, гораздо важнее было _что_ говорю, пишу и думаю. Не случись такой просьбы, даже не задумался бы об этом.
В итоге дал ему книжку Дейла Карнеги, мне она не нужна, а ему идеально подходила, да и написана легко, что не маловажно. Но он ее не осилил, вернул через пару недель.

Так вот, копайте глыбже, нечего парить голову вопросом "Как?".

Здравствуйте, silverwolf, Вы писали:

S>Здравствуйте, Пацак, Вы писали:

П>>Здравствуйте, pose, Вы писали:

П>>Javascript + jquery — это очень читабельно, понятно и просто! (с) Mamut

S>Проблемы не в языках, а в головах (c) Не_помню_кто

Вообще-то, "проблемы не в сортирах, а в головах" — это фраза профессора Преображенского
из "Собачьего сердца" Михаила Булгакова.

говнокод потерт

Автор говнокода просто не умеет программировать и не знает jQuery.
Диалоги делаются в одну строку: $('#LightboxTemplate').tmpl(data).dialog(options);
Обработчики навешиваются один раз: $(document).on('click', '.handlerOpenMyXxx', openMyXxx);

Здравствуйте, pose.
Имхо, правильно делать как то так.

Div("lightbox"
  Div("lb-outerContainer",
    img().Class("lb-image"),
      Div("lb-nav",
         a().Class("lb-prev")    
...

Rojac v0.1 / rev. 899

	От:	pose
	Дата:	20.06.12 16:47
	Оценка:

	От:	boot
	Дата:	20.06.12 17:07
	Оценка:	+3 -4

	От:	Temoto
	Дата:	20.06.12 17:09
	Оценка:

	От:	pose
	Дата:	20.06.12 17:15
	Оценка:

	От:	pose
	Дата:	20.06.12 17:18
	Оценка:

От:	dimgel	https://github.com/dimgel
Дата:	20.06.12 18:55
Оценка:	+3

	От:	Nikita123
	Дата:	21.06.12 13:09
	Оценка:

	От:	femidav
	Дата:	21.06.12 14:15
	Оценка:

	От:	dotneter
	Дата:	21.06.12 18:59
	Оценка:	+1