LINUX.ORG.RU

Как не писать на JS «спагетти»-код?


0

0

За неделю родил больше 3000 тысяч строк на jQuery. Вчера рефакторил поведение одной кнопочки... на что ушло часов 8-10. По сути тут очень много дублирующего кода.

Изучал по тонкой книге «JQuery - новый стиль программирования.» Что читать в будущем? Какие есть подходы для сокращений сотен дублей в средненьком проекте (уже страшно: что было бы в крупном?).


Вчера рефакторил поведение одной кнопочки

Что то мне это напоминает.. Что-то такое уже было.

Bad_ptr ★★★★ ()

По возможности не описывать анонимные функции прямо в вызовах, а создать, собственно, нормальные функции.

Deleted ()
Ответ на: комментарий от Deleted

Спасибо, мысль годная. Но всё равно остаётся очень много дублей.

К примеру, по клику на кнопке группы 1 изменится состояние кнопок групп 2-10. Условия сильно разнятся, нужно больше абстракций, но простое объединение в группы по свойствам если и сэкономит немного кода, всё ещё будет сложно поддаваться модификации.

Гм... где бы подсмотреть примеры хорошей архитектуры?

daris ()
Ответ на: комментарий от daris

>Гм... где бы подсмотреть примеры хорошей архитектуры?
«Рефакторинг» Фаулера

TERRANZ ★★★★ ()
Ответ на: комментарий от daris

> где бы подсмотреть примеры хорошей архитектуры?

extjs

Rastafarra ★★★★ ()

Вот почему я отключаю носкрипт только на google.com.

bk_ ★★ ()

TERRANZ, Rastafarra, спасибо. Попробую разобраться на досуге.

daris ()

>3000 тысяч строк

Хренасе. Я три миллиона строк за неделею даже если буду абракадабру писать не напишу...

theos ★★★ ()
Ответ на: комментарий от daris

По теме - если ты не читал «рефакторинг» значит наверняка и «паттерны» не читал, а это книжка обязательна к прочтению всеми программистами. Хотя бы чтобы выработать язык общения.

theos ★★★ ()

просто пиши на js так же как и на других языках, используй ООП, паттерны и т.д.

grouzen ★★ ()

А что, есть какие-то особенности у JS? Хотя вот у JQuery да, есть особенности. Я вот для себя открыл неочевидные применения each. Но к дублирующему коду это не относится, всё то же самое, что и в других языках - сразу думай о расширяемости, как писал Страус «если у двух классов есть что-то общее, выдели это в базовый класс».

Xellos ★★★★★ ()

Всё правильно написали. Раскуривай ООП, читай Фаулера и отцов, осваивай и используй паттерны проектирования. Качественная объектная модель — залог хорошей управляемости, гибкости и структурированности кода. Точно так же как использование эффективных алгоритмов — залог производительности. К ФП-фишкам в JavaScript относись с осторожностью. Как было сказано выше, бездумное использование тех же lambda-функций может привести к ещё более лютой лапше — как в лиспе или хаскелле.

Тем более не стоит слушать бредни лямбданутых и прочих упоротых ugoday-ев. Ну разве только если хочется насладиться их сочным баттхёртом. Вызван он тем, что язык веб-разметки — HTML, а не S-EXPR; язык сценариев — JavaScript, а не LISP; браузеры пишут на C++, а не на лиспохаскеле; то же относится к веб-серверам, серверам приложений, middleware, операционным системам и всему остальному.

Собственно, все их здешние высеры — суть следствие вышеозначенного баттхёрта.

anonymous ()
Ответ на: комментарий от anonymous

> бездумное использование тех же lambda-функций может привести к ещё более лютой лапше

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

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

anonymous ()
Ответ на: комментарий от anonymous

> Лямбды все же часто удобны и полезны.

Возьмём задачу ТСа. Что удобнее и полезнее:

1. наклепать 10 (почти) одинаковых лямбд в каждом месте использования?
2. написать одну функцию-обработчик, и вызывать её?

Если потребуется внести изменения в поведение, то во втором варианте ТСу достаточно будет изменить одну-единственную функцию. В первом — перелопачивать все десять. Это называется — управляемость. Лямбданутые здесь, мягко говоря, SOSNOOLEY.

Чего уж там, их даже в кресты решили запихать.


И что? В Java тоже появятся, начиная с 8-ки.

Вообще, всё самое полезное и удачное, что когда-либо случайно зарождалось в этом маргинальном течении — ФП — уже давно оценено и принято цивилизацией. Ситуация очень напоминает современное положение народной медицины. Всё, что действительно имеет клинический эффект — давным-давно изучено, описано, подвергнуто тщательнейшим испытаниям и в результате занимает своё место в официальной медицине. Но шаманы, бабки, травники, знахари, гомеопаты и уринотерапевты от этого никуда не исчезнут. Как не исчезнут и фанатики аппликативных функторов, зигохистоморфных препроморфизмов, анафорических лямб и прочих «культов карго» современного программирования.

Такова уж иррациональная природа человека.

anonymous ()
Ответ на: комментарий от anonymous

Забьем на ТСа и его задачу. Что удобнее и полезнее:

1. для каждой уникальной функции наклепать по дополнительному уникальному callback'у?
2. писать в каждой функции уникальный callback-код в лямбде прямо на там же?

Во втором варианте не-ТСу не нужно будет скакать от функции к коллбеку и обратно, чтобы понять, что происходит в последнем, код сразу на месте, бери и читай.
Если код повторяется или слишком большой, разумеется его надо выносить в отдельные функции.

Я повторюсь:

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

Главная мысль моего предыдущего поста, которую ты успешно поскипал.

И что? В Java тоже появятся, начиная с 8-ки.

бла-бла-бла и дальше параноидальный бред



Заметь, что я не являюсь ФП фанбоем. Я не знаю, зачем ты мне впариваешь про ненужность ФП, фанатиков и про то, как они SOSNOOLEY (бордобыдланский сленг, фуу). Тащем-то мне плевать, кто и что там у тебя «соснул».

anonymous ()
Ответ на: комментарий от anonymous

Во втором варианте не-ТСу не нужно будет скакать от функции к коллбеку и обратно

function on_after_change_team(p)
{
    // code here
}

function on_after_channel_join(p)
{
    // code here
}

function on_after_log_in(p)
{
    // code here
}

({
    afterChangeTeam: on_after_change_team,
    afterChannelJoin: on_after_channel_join,
    afterLogIn: on_after_log_in,
})

vs

({
    afterChangeTeam: function(p) {
        // code here
    },
    afterChannelJoin: function(p) {
        // code here
    },
    afterLogIn: function(p) {
        // code here
    }
})

Как скоро вариант 2 превратится в полное гумно?

Deleted ()
Ответ на: комментарий от Deleted

> Как скоро вариант 2 превратится в полное гумно?

Не скоро, это нормальный стиль. В некоторых языках так и принято делать, в смысле объявление и реализация класса не разделены.
Если тебе нужен удобночитаемый список функций в текущем whatever, то ищи его в своем IDE, либо юзай folding.

anonymous ()
Ответ на: комментарий от anonymous

Правильный ответ — очень быстро :( Правда, похоже, всем пофиг и они как-то в этой лапше ориентируются, хотя уже и содержимое даже расползлось :}

Deleted ()

Поищи книжку «JavaScript Patterns». И заведи привычку хоть минимально проектировать интерфейс, перед тем как браться за клавиатуру.

anonymous ()

Рецепт универсален и раскрыт в любой книге по рефакторингу: если видишь три дубля - рефакторишь для их устранения.

Deleted ()
Ответ на: комментарий от Deleted

И да, пиши на JS так, как писал бы на другом ЯП, на котором умеешь писать качественный код.

Deleted ()
Ответ на: комментарий от Xellos

> А что, есть какие-то особенности у JS?

Да, есть. 90% его юзеров - косорукие верстальщики, ничего не знающие о проектировании и слабо разбирающиеся в программировании. Беда усугубляется слишком большой свободой JS. Если бы на его месте была анально-огороженная тупизна вроде жабы, всем было бы лучше.

anonymous ()

у /me, после освоения plugin.jar, чешутся руки весь js код переделать в жабу; и загружаться такая петрушка наверняка быстрее будет.

AGUtilities ★★★ ()
Ответ на: комментарий от nickionn

> перестать писать на JS

Так и запишем: ниасилятор. JavaScript — годный, современный и мощный язык. Однако, эта мощь открывается по-настоящему только тем, кто обладает некой культурой программирования, интеллектом и соответствующим образованием. Сюрприз?

anonymous ()
Ответ на: комментарий от anonymous

> Забьем на ТСа и его задачу. Что удобнее и полезнее:

Забьём на ТС.
Забьём на его задачу.
Забьём на JavaScript.
Забьём на функциональные языки программирования.

...И рассмотрим задачу написания квайнов!!! Что будет удобнее и полезнее:
1. писать несколько десятков строчек на Си, или же
2. написать один символ на HQ9+?

Что сказать-то хотел, болезный? При помощи подмены задачи синтетическим use-case можно «доказать» полезность чего угодно. Только вот какова будет ценность такого «доказательства» для ТСа, которого интересует конкретная задача, а не абстрактные кластеры метапарадигм и прочий розовый туман?

Главная мысль моего предыдущего поста, которую ты успешно поскипал.


Твоя «главная мысль» — констатация прописной истины. Как я должен был на неё реагировать? «О великий гуру, прими благодарность от нас, недостойных, за небесную твою мудрость, сошедшую на нас»?

Тащем-то мне плевать, кто и что...


...но пост в десяток-другой строк накатать не поленился. Парадокс?

бордобыдланский сленг, фуу


Илита в треде, всем в машину!!!!11111адинадин

anonymous ()
Ответ на: комментарий от anonymous

> Беда усугубляется слишком большой свободой JS. Если бы на его месте была анально-огороженная тупизна вроде жабы, всем было бы лучше.

JavaScript как язык мощнее Java? Трололо.

anonymous ()
Ответ на: комментарий от anonymous

> JavaScript как язык мощнее Java? Трололо.

Про мощнее это ты сам выдумал, я такого не говорил. Хотя... И действительно ведь, куда мощнее.

anonymous ()
Ответ на: комментарий от anonymous

> И действительно ведь, куда мощнее.

Ну так не соблаговолит ли благородный дон продемонстрировать, как на JavaScript реализуется какая-нибудь безделица? Например, typesafe сортированные множества. Или прозрачное отображение объектов на XML. Или thread pool'ы. Или асинхронный ввод-вывод. Или криптография. Или парадигма fork/join. Или... хотя, на первых порах хватит. Время пошло.

anonymous ()
Ответ на: комментарий от Deleted

> Сейчас тебе скажут, что JSON наше всйо.

Как формат для педерачи слабоструктурированных данных — почему бы и нет. Конечно, до XML далековато — отсутствуют внятные аналогичные стандарты для валидации (XSD), трансформации (XSLT), навигации (XPath) и так далее. Есть и свои плюшки: поменьше оверхеда, чем в XML, а также развивающийся бинарный вариант BSON.

Но пихать его куда попало — это, таки да, удел быдлокодерни.

anonymous ()
Ответ на: комментарий от anonymous

Ну так свобода языка - это же плюс. Хочешь говно - пишешь говно, хочешь конфетку - пишешь конфетку.

Deleted ()
Ответ на: комментарий от nickionn

Зачем? Вполне годный язык же, да и избежать его вряд ли можно в вебе.

Deleted ()
Ответ на: комментарий от anonymous

> Но пихать его куда попало — это, таки да, удел быдлокодерни.

скажи это авторам MongoDB и CouchDB, лол

anonymous ()
Ответ на: комментарий от anonymous

Можно проще: JS просто не должен быть первым языком, вот и всё.

Deleted ()
Ответ на: комментарий от anonymous

thread pool-ы в безтредовом языке - это жестоко :)

Deleted ()
Ответ на: комментарий от Deleted

> Ну так свобода языка - это же плюс. Хочешь говно - пишешь говно, хочешь конфетку - пишешь конфетку.

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

Справедливости ради отмечу, что подобная аргументация частенько применяется к PHP. Опять же, справедливости ради: в PHP есть и prepared statement'ы, и unified database API (MDB, PDO), и даже целые ORM и MVC-фреймворки. Но почему-то всё равно все пишут mysql_query(«SELECT ... WHERE id=» . $id) и огребают SQL injection на ровном месте. А уж мешанина из HTML, JavaScript, CSS, PHP и SQL в одном файле — в норме вещей.

anonymous ()
Ответ на: комментарий от anonymous

> Что сказать-то хотел, болезный?
В третий раз повторить?

При помощи подмены задачи синтетическим use-case можно «доказать» полезность чего угодно

Где ты тут увидел подмену? Изначально не было никакой задачи в моем утверждении: «Лямбды все же часто удобны и полезны».
Общее утверждение, с которым ты не согласился и привел очевидный пример, где лямбды использовать не стоит.
Я привел свой use-case, который вовсе не синтетический и в моей практике встречался нередко. Мой пример является аргументом в пользу моего утверждения.
А что же твой пример? Он разве что является аргументом в пользу той самой «прописной истины».

Только вот какова будет ценность такого «доказательства» для ТСа

Причем тут вообще ТС? Забудь про него. Если ты говорил про ненужность лямбд в контексте задачи ТСа, то ты это плохо отобразил в своих постах, к тому же зачем-то начал спорить с моим бесконтекстным утверждением.
А ценность для ТСа все же можно найти. К примеру, он не забьет на лямбды полностью, читая твой фанатичный бред, а будет их применять грамотно.

абстрактные кластеры метапарадигм и прочий розовый туман

Где ты это все увидел в моих постах?

Твоя «главная мысль» — констатация прописной истины. Как я должен был на неё реагировать?

Согласиться, признать, что лямбды могут быть полезными, и больше не отвечать мне. Очевидно же.

...но пост в десяток-другой строк накатать не поленился. Парадокс?

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

Илита в треде, всем в машину!!!!11111адинадин

Почему же сразу илита? Я вполне могу быть простобыдлом.

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

anonymous ()
Ответ на: комментарий от anonymous

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

Это ты так нижайше просишь не засчитывать тебе слив? Хорошо, не буду.

anonymous ()
Ответ на: комментарий от anonymous

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

Не провоцирует язык ничего. Он только свободу дает, а если поциент хочет писать г*вн*, то это его право, и язык ему это не запрещает. Как и не запрещает делать конфетку.

Вот никогда не понимал подобных наездов на JS, C++, Lua... только за то, что они дают «слишком много свободы»...

Справедливости ради отмечу, что подобная аргументация частенько применяется к PHP

В PHP (особенно до 5) иногда без г**** обойтись сложно.

А уж мешанина из HTML, JavaScript, CSS, PHP и SQL в одном файле — в норме вещей.

А за мешанину руки надо отрывать.

Deleted ()
Ответ на: комментарий от Deleted

> А за мешанину руки надо отрывать.

Ну вот ты попробуй донеси это типичному PHP-кодеру, который либо ведёт в одиночку собственный говносайт, либо является единственным кодером в конторе. «А что, мне удобно, всё сразу видно, никакой кучи файлов открывать не надо!111»

Что самое интересное, Notepad++ им это всё подсвечивает, а Серьёзные™ IDE типа Eclipse или NetBeans — хрен :) Поэтому PHP-кодеры не пользуются IDE. Ещё популярен сакраментальный довод — «редактор не должен весить 300 мегабайт».

anonymous ()
Ответ на: комментарий от anonymous

Ну вот ты попробуй донеси это типичному PHP-кодеру, который либо ведёт в одиночку собственный говносайт, либо является единственным кодером в конторе. «А что, мне удобно, всё сразу видно, никакой кучи файлов открывать не надо!111»

Не пробовали показывать подобным кодерам нормальные редакторы? (это тонкий намек на emacs, vim, традиционные IDE)

Что самое интересное, Notepad++ им это всё подсвечивает, а Серьёзные™ IDE типа Eclipse или NetBeans — хрен :) Поэтому PHP-кодеры не пользуются IDE. Ещё популярен сакраментальный довод — «редактор не должен весить 300 мегабайт».

emacs весит до сотни AFAIK, а vim - вообще легкий, если у них тяжелая форма IDEфобии.

Deleted ()

ТС'у рекомендуется ознакомиться с Blackbone.js если хочет продолжать на jQuery.

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

Ну а так посоветую изучать Google Closure Library, там хороший код получается как-то по-дефолту.

Ну и читать годный блог http://addyosmani.com/blog/

Mironor ()
Ответ на: комментарий от Xellos

А что, есть какие-то особенности у JS?

По сравнению с распространёнными си-подобными языками? Внезапно: есть.

Reaper ★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.