Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.05.2016, 13:34
Кандидат Javascript-наук
Отправить личное сообщение для zlodiak Посмотреть профиль Найти все сообщения от zlodiak
 
Регистрация: 24.02.2012
Сообщений: 104

форма на backbone
ребята, посмотрите пожалуйста на мой первый опыт работы с backbone:
https://jsfiddle.net/9t1cwfrv/7/

не совсем ли говнокод получился? что нужно исправлять в первую очередь?

конечно, форма простая, и без backbone её сделать было бы проще. но хотелось попробовать именно эту библиотеку

если удобнее, то можно пользоваться https://github.com/zlodiak/shippingCalculator1
Ответить с цитированием
  #2 (permalink)  
Старый 01.05.2016, 15:21
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,198

Молодец, в правильном направлении движешься. Код из 100500 коллбэков на jQuery надоел?

А зачем во вьюхах в tagName div прописывать? Он же вроде по дефолту идет? И зачем template, если по сути туда данные никакой модели не подставляются? Для читабельности кода?
Также советую использовать какой-нибудь таск-раннер, например Gulp, чтобы вот такого в production сборке не было
<script src="js/jquery/jquery.2.min.js"></script>    
<script src="js/bootstrap-3/js/bootstrap.min.js"></script> 
<script src="js/underscore-min.js"></script>
<script src="js/backbone-min.js"></script>

<script src="js/project/models/models.js"></script> 
<script src="js/project/views/calculatorViews.js"></script> 
<script src="js/project/views/widjetViews.js"></script> 
<script src="js/project/helper.js"></script>

Там все минифицировать, сжать, прогнать через rigger и получить аккуратный файлик.
Также хотелось бы увидеть под капотом использование фреймворка RequireJS для реализации AMD. Как всё подключается и оптимизируется написано тут
Ответить с цитированием
  #3 (permalink)  
Старый 04.05.2016, 11:24
Аватар для armidoll
Кандидат Javascript-наук
Отправить личное сообщение для armidoll Посмотреть профиль Найти все сообщения от armidoll
 
Регистрация: 28.05.2015
Сообщений: 116

префиксы модуля в атрибуте "class"
Я бы в id и class префикс модуля прописывал (если нет особых требований или причин так не делать), проще потом будет разбираться, когда модулей много накопится.

допустим, имя модуля: "calc"

тогда получится что-то навроде:

// ---------- html ids ----------
"mainContainer" --> "calcMainContainer"
"contentContainer" --> "calcContentContainer"

// ---------- html class names ----------
"city_of_departure_container" --> "calc_city_of_departure_container"
"city_of_destination_container" --> "calc_city_of_destination_container"
Ответить с цитированием
  #4 (permalink)  
Старый 06.05.2016, 12:46
Кандидат Javascript-наук
Отправить личное сообщение для zlodiak Посмотреть профиль Найти все сообщения от zlodiak
 
Регистрация: 24.02.2012
Сообщений: 104

Сообщение от destus Посмотреть сообщение
Молодец, в правильном направлении движешься. Код из 100500 коллбэков на jQuery надоел?

А зачем во вьюхах в tagName div прописывать? Он же вроде по дефолту идет? И зачем template, если по сути туда данные никакой модели не подставляются? Для читабельности кода?
тут
это по привычке для порядка прописываю. одно время на питоне сидел долго, а там "явное лучше неявного")

grunt-ом умею пользоваться, но пока не лень по-быстрому ручками всё подключать
Ответить с цитированием
  #5 (permalink)  
Старый 06.05.2016, 12:52
Кандидат Javascript-наук
Отправить личное сообщение для zlodiak Посмотреть профиль Найти все сообщения от zlodiak
 
Регистрация: 24.02.2012
Сообщений: 104

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

http://prozaik.16mb.com/works/weeken..._Calculator_3/
https://github.com/zlodiak/shippingCalculator3

кому не сложно, критикуйте)
Ответить с цитированием
  #6 (permalink)  
Старый 06.05.2016, 18:30
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,198

zlodiak,
Вместо
this.$el.find('selector')

можно писать
this.$('selector')

Весьма приятный сахар.

Нашел в calcViews.js вот такой интересный момент
this.model.set({
      'departCity': departCity,
      'destinCity': destinCity,
      'shippOptionsWeight': shippOptionsWeight,
      'shippOptionsVolume': shippOptionsVolume
    });

Я понимаю что с точки зрения работы веб-приложения всё гуд. Но я не считаю такой подход правильным. Вы смешиваете логику данных с логикой представления. Каждый объект должен отвечать за сферу своей деятельности: представление - отображать данные модели. Более правильным будет вынести это отдельным методом самой модели и из представления вызывать этот метод. Ну или миксин из Backbone.Events делать и тригеррить пользовательские события, к счастью паттерн наблюдателя в Backbone сделан просто замечательно.
Ответить с цитированием
  #7 (permalink)  
Старый 07.05.2016, 08:52
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,198

Если интересен ES6 можно на новый стандарт переписать https://habrahabr.ru/post/283054/
Ответить с цитированием
  #8 (permalink)  
Старый 07.05.2016, 09:41
Кандидат Javascript-наук
Отправить личное сообщение для zlodiak Посмотреть профиль Найти все сообщения от zlodiak
 
Регистрация: 24.02.2012
Сообщений: 104

интересно. спасибо
Ответить с цитированием
  #9 (permalink)  
Старый 15.05.2016, 09:27
Аватар для armidoll
Кандидат Javascript-наук
Отправить личное сообщение для armidoll Посмотреть профиль Найти все сообщения от armidoll
 
Регистрация: 28.05.2015
Сообщений: 116

Оригинальному калькулятору можно было бы еще прикрутить сохранение состояний через изменение хэша в URL, используя HTML5 history API. В контексте Backbone можно сделать через Router, изменение состояния привязать к onClick для какой-нить кнопки "Рассчитать", например.

В книге Single Page Web Applications представлен патерн "anchor interface pattern" ( там правда через плагин jQuery, но суть понятна ) на стр.109 подраздел "The anchor interface pattern"

Как destus писал выше, через requireJS построить архитектуру было бы здорово.
Пример можно также найти в книге "Backbone.js Applications" by Addy Osmani ( https://addyosmani.com/backbone-fund...uirejs-and-amd ).
У автора еще есть интересная книга по паттернам:
Javascript Design Patterns

Последний раз редактировалось armidoll, 15.05.2016 в 09:34.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает всплывающая форма на второстепенных страницах denjer Javascript под браузер 0 22.04.2016 21:30
Не передается форма в выводе результатов через ajax tot18 AJAX и COMET 4 06.03.2014 14:15
Баг в backbone 1.0.0? YuriT Библиотеки/Тулкиты/Фреймворки 0 15.04.2013 10:46
не работает форма в окне, вызванном jquery page slide ikar jQuery 0 31.07.2011 21:55
Всплывающая форма в центре страницы для гостевой книги angel-13th Элементы интерфейса 8 05.02.2011 19:10