Стиль программирования в 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. Хотя вы таки правильно воспользовались знаком "==", ибо "==" это еще не "==="

	От:	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