GD Star Rating
loading...

Мне вот часто приходится делать какие-то штуки на JS в заказах (на jquery). Но пишу я всегда искренний говнокод и ничего не могу с этим поделать. Хотя отлично понимаю как что должно работать, но красиво и лаконично это написать — целая проблема. Сейчас имеется большой проект, и там просто туча JS. Ещё даже четверть не сделана, а в js-файлах такой кошмар, что уже сложно ориентироваться. А пройдёт месяц, так вообще нереально будет всё это поддерживать. Все эти on(‘click’) и прочая динамика, вместе с длинными css-селекторами, жутко меня расстраивают.

Верстаны, есть ли какой-то способ красиво и удобно организовать много-много JS и не сойти с ума? Буду рад примерам из жизни.

КПЗ javascript

размер 150x85, 7.56 kb

Tagged with →  

52 Responses to Удобный javascript

  1. EibWin:

    Под большой проект логичней было бы выбрать js-фреймворк.

  2. SukEbb:

    Ну хотя бы так. Группируешь по структурам методы-свойства которые касаются какой-то одной темы (сущности). Удобней потом с ними работать.

  3. SbSport:

    Вот статья Organizing your application using Modules (require.js), правда тут на примере фреймворка Backbone.js, но не суть.

  4. Spomo:

    Стоит взять dojo или ext, много годного ui + продуманная структура проекта. Но на большом проекте с ними можно много дров наломать, да так что станет еще хуже, если совсем не знаком.
    Второй вариант взять backbone, в последнее время очень люблю его использовать в связке с requirejs и нодой для оптимизации и сжатия.
    Или mvvm подобные типа Knockoutjs или angular. Кода зачастую с ними получается меньше чем с backbone, но если что-то большое с кучей свистелок и перделок, то на мой взгляд получается слишком запутанно.

    https://github.com/addyosmani/todomvc – тут на тудушке есть примеры. Можно посмотреть, сравнить для себя, изучить и подумать о том как это будет использоваться у тебя. И взять за базовый скелет что больше понравится.

  5. NeiWin:

    Для разработки удобно AMD, на продакшен выпускать такое нельзя.

  6. NeiWin:

    1. Организовывать код пакетно
    2. Длинные css селекторы – серьезная проблема в вашем коде.
    3. Писать говонокод нехорошо. Нужно читать книги по JS.
    4. on(‘click’) и подобные интерфейсные события должны обвешиваться отдельным механизмом, который нужно придумать и организовать для своего проекта как-то так: $(‘form’).initEvents({submit : function(){…}, error : function(){…}})

  7. RScSport:

    AMD?
    Вообще почитал про Backbone, похоже крутая штука. Надо будет изучить.

  8. NeiWin:

    Асинхронно грузить JS на продакшене – зло. Если сложный интерфейс, то в рандомных местах он будет “подвисать”, ожидая подгрузки нужных пакетов. А если само взаимодействие еще асинхронно (какой-нибудь longpolling), то там вообще печалька на уровне разработки и отладки приложения

  9. RScSport:

    С селекторами вообще там длинная история. Я так к этому привык, что даже не знаю — хорошо это или плохо. Программисту постоянного заказчика было очень удобно нечто типа БЭМ. Ну а т.к. БЭМ само по себе трэш, пришлось придумать структуру с минимальным наследованием. И вроде все рады до тех пор, пока не приходится прикручивать солидные объёмы скрипта.

    Проблема книг в том, что они учат писать в принципе, но не учат этике (если так можно назвать тему поста) кодинга. Хотя может я читал не те книги.

    По 4 пункту. Да, похоже это хороший вариант. По ссылке выше примеры с кодом такого рода понравились, попробую в этом стиле сделать.

  10. NeiWin:

    4 – один из базовых шаблонов js : Цепочка вызовов. Без нее вообще никак, но в конкретном примере это промежуточное решение.

    Т.е. в случае, если у тебя все элементы уникальны, это подойдет, но форм-то в приложении может быть множество и все они должны обладать общими действиями – сохранение, очистка, восстановление и т.д. Тогда нужно выбираться на более высокий уровень абстракции. Там можно сделать каррирование, кстати, интересно как?

    Про цепочки – это серьезная проблема в объектной организации программы. Редко встречаются случаи, когда ты должен добираться до нодов от родителя. Скорее всего ты уже где-то использовал промежуточные ноды и об этом забывать нельзя! Т.е. если ты имеешь такой селектор $(‘.content.dynamic_form.submit’), то есть подозрения, что где-то ты используешь уже поиск $(‘.content.dynamic_form’) и $(‘.content’) соответственно. В таком случае тебе необходимо сохранять родителей в переменные и работать с цепочками $(content_node).find(‘.dynamic_form’).

    В синтаксисе могу чуть ошибаться, т.к. на JS писать мало приходится.

  11. Spomo:

    require имеет в себе довольно приятный сборщик. И на продакшене избавится от каскадов в зависимостях можно через него.

  12. DioAdm:

    Low tier:
    – Фреймворк из списка выше – любой будет лучше чем ничего
    – JSHint
    – Выучить какой-нибудь стандарт стилистики кода и следовать ему, например http://google-styleguide.googlecode.com/
    Mid tier:
    – Рекваер в качестве загрузчика во время разработки и их скриптом на сжатие
    – Дополнительные полезные библиотеки. Из тех что сразу вспомнил – underscore, date.js, mustache
    Top tier:
    – ООП
    – Grunt.js
    – Юнит тесты для логики
    – Webstorm
    God tier:
    – Начитаться книжек по архитектуре и понять почему фреймворк из первого пункта был плохим
    – Юнит тесты для DOM’а

  13. RegPhone:

    всего лишь вопрос организации приложения

  14. SukEbb:

    какие книжке по архитектуре посоветуешь?

  15. Okkam:

    «JavaScript. Подробное руководство» – Дэвид Флэнаган
    «JavaScript. Шаблоны» – Стоян Стефанов

    Если опыт позволяет, можешь сразу начать читать Стефанова, а уже потом возратится к Флэнагану.

    Ещё посмотри на код паттернов описываемый и Стефанова: https://github.com/shichuan/javascript-p

  16. RegPhone:

    для того, чтобы перестать быть jQuery-программистом и стать js-программистом, нужен не фреймворк, а хотя бы минимальные систематические знания
    http://javascript.info
    все, что здесь насоветовали – мертвому припарки
    какая архитектура, чуваки, когда у парня в голове $(‘body’).find(‘.a’).fuck().end().find(‘.b’).suck().end().show();?
    или там один умелец форме initEvents какой-то чудовищный предложил тоже. не путайте человека, он может нормальным станет.

  17. RegPhone:

    1. на данном этапе пациент не поймет тебя точно. у меня даже как минимум два варианта того, что ты имел в виду.
    2. да
    3. нихуя не связанные вещи
    4. бред собачий

  18. NeiWin:

    схуяли ты называешь бредом цепочку вызовов или передачу списка параметров через объект?

  19. NeiWin:

    А не, всё равно.

  20. RegPhone:

    в контексте jquery-программирования я понимаю, что вокруг этого всего происходит
    лучше создавать нативный js-объект с нужными методами, содержащий ноду формы, и решать все проблемы через него. такой код будет читать и рефакторить гораздо проще, чем ваши ебаные цепочки

  21. EurMega:

    AMD действительно спорная штука, с одной стороны упрощается разработка, с другой – загружается миллион файлов.

  22. EurMega:

    почему это БЭМ треш? Я когда подсел на него – избавился от кучи проблем. Тем более очень удобно собирать его в LESS.

  23. RegPhone:

    amel: сборщик при деплое и все отлично

  24. RegPhone:

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

  25. NeiWin:

    Ты примером поясни. Разберем +/-, тогда станет понятно, почему цепочки неудобны для добавления событий на выбранную ноду.

  26. NeiWin:

    Я прекрасно знаю технологии и фреймверки.

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

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

    И до сих пор не было дано с твоей стороны прямого ответа: схуяли ты называешь бредом цепочку вызовов или передачу списка параметров через объект?

  27. RegPhone:

    ок, я попробую, хотя объясняльщик из меня тот еще.
    смотри. когда речь идет о jQuery-программисте, обычно подразумевается неебическая неупорядоченная каша из jQuery-кода.
    вместо
    var formPlugin = function ( $node, options ) {
    init : function () { /* тут навешивания */ },
    submit : function () {}, блаблабла
    };
    и прокидывания этого в обертке jQuery-плагина
    ты предлагаешь в вышеупомянутую кашу въебать еще прекрасную толстую конструкцию вида
    $(‘form’).bindEvents({
    success : function () {


    },

    });
    а если тебе что-то еще надо сделать с формой?
    взаимодействие этих элементов?
    или, условно говоря, хочешь закешировать какие-то данные из множества таких объектов в приватной переменной?

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

  28. NeiWin:

    Отлично.

    Преимущества – ты сразу получаешь объект formPlugin, который можно модифицировать в процессе исполнения. Несомненный плюс, который позволит

    Видимые недостатки – 1. options наверняка добавят вариативность кода. 2. $node придется искать отдельным механизмом, при этом передача кода поиска в качестве аргумента усложнит чтение.

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

  29. RegPhone:

    я кидал на javascript.info )

  30. RegPhone:

    options – это твой же объект с конфигом
    внутри объекта formPlugin можно задать дефолтные настройки, например

    $node ищется оберткой в виде jquery-плагина
    я может быть как-нибудь выложу свой универсальный шаблон для jquery-плагинов, только скажите, куда выложить так, чтобы на него красиво смотреть можно было

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

  31. NavYes:

    удивляет в теме отсутствие пинка на javascript.ru. фреймворкеры детектед?..

  32. NavYes:

    да ты не русский!.. 🙂

  33. RegPhone:

    я сначала просто на него напоролся каким-то образом, а потом уже узнал, что есть зеркало.ru )

  34. OHA01:

    Отличная ссылка, бро!

  35. DioAdm:

    Ссылка на краткий справочник по языку и смежным API никак не коррелирует с вопросом автора поста про организацию кода в проекте. Ну и кроме того есть ссылка со знаниями получше – https://developer.mozilla.org/ru/docs

  36. RegPhone:

    у мозиллы справочник, а тут прямо азы с начала и до конца как раз
    организация кода в проекте будет получаться тогда, когда понимаешь, что конкретно код делает, а для этого надо азы узнать )

  37. RegPhone:

    ну типа того
    http://pastebin.com/E8CdD0NM
    я там в порядок ничо не приводил, как написал на ходу, так оно и есть
    но идея понятна должна быть

  38. NeiWin:

    Если действительно так удобнее, то ок, но строки 66-92 будут в той или иной степени повторены в самом плагине JQuery, который будет тоже самое делать для определения js событий, которые были переданы через объект.

    В некоторых приложениях var Plugin будет крайне полезен, как уже ранее говорил, для изменения поведения во время исполнения.

  39. RScSport:

    amel: Но в БЭМ тоже длиннющие селекторы. И тоже будет каша в js. Короткие id ведь не всегда можно использовать, особенно если на странице два или более элемента с одинаковыми ивентами.

  40. EurMega:

    backbone поможет избавиться от каши.
    events:{
    “click.bTabBar__eSearchReset”:”resetSear ch”,
    “click.bTabBar__eMapButton”:”toggleMap”,
    “click.bTabBar__eBookmarksButton “:”sortByBookmarks”,
    “blur input”:”blurInput”
    }
    Вроде как читабельно

  41. DioAdm:

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

  42. RegPhone:

    тут нет архитектурных вопросов, тут просто скорлупа для нормального объекта по имени Plugin )
    иногда надо сделать это плагином к жквери и все тут. так-то понятно что нахуй не впилось )

    про вьюшки бекбона я в курсе, но не поверишь, даже в них у меня биндинг jquery. потому что не покидает меня смутное ощущение, что бекбон я выкину нахуй как беспомощное говно )

  43. RegPhone:

    тут типа еще разделение на private/public, вся хуйня
    во время исполнения менять поведение – не совсем очевидная для меня задача. как это?

  44. RegPhone:

    хотя я соврал! они есть
    но я их не jquery доверяю, посмотри внимательно
    там все архитектурное ручками

    и вот есть у меня сейчас ситуация например когда много одинаковых объектов будут вешаться на window.resize. было бы два – я бы хуй забил и вешал внутри. а когда их может быть дохуя, я тут заведу приватный счетчик, который будет вызываться один раз и бегать по стеку таких объектов.

    да, в жквери тоже можно было бы это сделать. но через сраку. а тут красота и пиздец!

  45. Okkam:

    Пиздец какой-то.. На этой подлпепре парсер все линки хрючит 🙁

    shichuan.github.com/javascript-patterns/

  46. KkeNo:

    не все, а только со словом яваскрипт внутри

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