Как правильно реализовать?

Question

[Eugene Chefranov]

Есть такой сайт. На сайте представлен калькулятор умений для игры.
Хочу реализовать себе подобный калькулятор, только с дизайном по-лучше и функциональней. В примере выше это всё реализовано на ASP.NET, а я хочу это полностью сделать на JS (jQuery) и всё на одной странице (в примере выше сделано "как-бы" на разных страницах, автоматом генерируются страницы для каждой комбинации умений).

Вот несколько вопросов:

1. Как это реализовать (алгоритм) всё на одной странице (на JS)?
   
2. Как можно реализовать получения ссылки на билд (на JS)?
   
3. Какие могут быть подводные камни?
   

Comments

[Dima Polos]

1. Используйте Vue.js, React, Angular, на JS(jQ) Вы просто замучаетесь все это делать.
2. В отношении Vue, чтобы на одной странице все было, но был эфект перехода по url используйте vue-router.
3. На чистом JS их множество, воды мало, камни сплошные, скорее подкаменная вода)

Answer 1

[Interface]

1) Про алгоритм не уверен, что кто-то подскажет. Может имеет смысл написать автору того сайта?

2) Вам нужна сериализация "билда" в строку, которую потом можно добавить к урлу через решетку, в итоге будет example.com/#abcd... , где abcd - строка содержащая информацию о "билде". При загрузке страницы соответственно можно смотреть на урл и если в нем содержится эта строка, то рисовать этот билд в окне.

3) Подводные камни которые видно с берега, например:
- длина url ограничена ~2000 - а это значит, что если данные достаточно сложные, то есть вероятность не уложиться в лимит. Но судя по тому, что тот сайт ссылки генерирует - в целом это не проблема

Comments

[Eugene Chefranov]

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

[Interface]

В этом нет никакой проблемы, если вы обладаете определенным уровнем владения js и программированием в целом. А как вы можете оценить свой уровень? Если совсем новичок - то можно подтянуть (дело пары месяцев), это кстати был б неплохой проект в копилку (если планируете карьеру в этой области). Надо понимать, что проект не самый простой.

Если же вы не совсем новичок в этом, у вас должно быть понимание того, что именно для вас не ясно.

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

Если говорить о каких-то практиках, то возможно действительно стоит посмотреть в сторону фреймворков. Angular например, vue (вместе с vuex я так понимаю) и других. Они (это и есть то, для чего нужен фреймворк) подскажут вам архитектуру приложения.

Пройдите какой-нибудь туториал по vue например и возможно все станет понятнее. Или по react'у / angular / ember etc.

Answer 2

[Егор Живагин]

На ASP.NET реализован только бэк, вы можете переложить логику на Node.js или React/Vue/Angular без проблем

1) ... В чём вопрос вообще? У вас есть компонент - первая таблица. Есть кнопки, за каждой закреплено какое-то значение. По клику на кнопку вы передаёте её значение в другой компонент -- следующую "страницу". Или вопрос именно в одной странице? Ну, не делайте перезагрузку/редирект - будет одна страница

2) Роуты, они такие. Вы на фронте или бэке генерите ссылку случайную и пишете роут, который с ними будет работать.

3) Главный - слабое знание JS. Вам 100% или Node.js или какой-нибудь React понадобится. На JQuery можно даже не начинать.

Answer 3

[Алексей Сергеев]

Очень просто!
Нужно всего-лишь узнать формулы, по которым идёт расчёт и изучить js. Тогда вопрос отпадёт сам по себе.

Comments

[Eugene Chefranov]

Формулы есть

[Алексей Сергеев]

Jack Brown, осталось изучить js ;)

Answer 4

[дядя Фёдор]

Слушайте, если уверены, что хотите точно как на этом сайте
то предлагаю, собственную авторскую методику изучения javascript, называется "Не дурак поймёшь"