Цитата:
Цитата:
|
можно. к каждому элементу в момент появления его в доме привязываются яваскриптовые компоненты. каждая умеет запускать всплытие события чтобы передавать сообщения предкам. а также умеет следить за тем какие элементы находятся внутри (аналогично form.elements или document.frames), чтобы в случае необходимости брать из них данные или посылать им события. с внешним миром компоненты общаются исключительно посредством событий. на корневой элемент вешается компонента для общения с сервером и другими внешними апи. не пойманное событие приводит к исключению в консоли.
|
а, ну и подцепляются компоненты на основе предикатов. в принципе можно сделать css-предикаты, но это слишком избыточно. вполне хватает имени тэга и аттрибутов.
|
Я думаю много можно хвалить тот или иной фреймворк. Важно понимать что все относительно, и каждый инструмент нужно рассматривать в том или ином контексте. Я думаю самое частое применение javascript - это контентые вебсайты (frontend), где основные необходимости - это манипуляции с DOM, анимация css-свойств, асинхронные запросы и тп. Причем нередко (но все реже) применяется ненавязчивый js. Такие сайты работают при включенном расширении NoScript.
Приведу одну конкретную задачу, которая нарисовалась мне недавно. Имеется набор таблиц. В каждой таблице есть основные строки, и дополнительные, с расширенной информацией. В целях удобства пользования необходимо скрыть расширенные строки и сделать их раскрытие/сворачивание по клику по основной строке. Структура таблицы проста - идет основная строка, две три расширенных, далее основная, снова расширенные и тд. Предлагаю каждому стороннику той или иной либы решить задачу своими методами. Посмотрим у кого выйдет короткий и читаемый код (вопрос производительности тут не стоит, таблиц не тысячи, а меньше десятка). Разметка уже есть и менять ее нельзя. Таблицы помечены классом collapsible. Вот разметка: <table class="collapsible"> <thead> <tr> <th></th> <th>Тип</th> <th>Количество пассажирских мест</th> <th>Дальность полета (км)</th> <th>Вместительность багажника (м³)</th> </tr> </thead> <tbody> <tr> <td><img src="images/planes/ececuliners.png" alt="Execuliners" /></td> <td><span>Execuliners</span></td> <td><span>50</span></td> <td><span>11520</span></td> <td><span>18.1</span></td> </tr> <tr> <td colspan="2">Airbus Corporate Jetliner (ACJ)</td> <td>43</td> <td>11297</td> <td>9.6</td> </tr> <tr> <td colspan="2">Boeing Business Jet (BBJ)</td> <td>50</td> <td>11519</td> <td>17.5</td> </tr> <tr> <td colspan="2">Embraer Lineage 1000</td> <td>19</td> <td>7800</td> <td>18.1</td> </tr> </tbody> <tbody> <tr> <td><img src="images/planes/ececuliners.png" alt="Execuliners" /></td> <td><span>Execuliners</span></td> <td><span>50</span></td> <td><span>11520</span></td> <td><span>18.1</span></td> </tr> <tr> <td colspan="2">Airbus Corporate Jetliner (ACJ)</td> <td>43</td> <td>11297</td> <td>9.6</td> </tr> <tr> <td colspan="2">Boeing Business Jet (BBJ)</td> <td>50</td> <td>11519</td> <td>17.5</td> </tr> <tr> <td colspan="2">Embraer Lineage 1000</td> <td>19</td> <td>7800</td> <td>18.1</td> </tr> </tbody> <tbody> <tr> <td><img src="images/planes/ececuliners.png" alt="Execuliners" /></td> <td><span>Execuliners</span></td> <td><span>50</span></td> <td><span>11520</span></td> <td><span>18.1</span></td> </tr> <tr> <td colspan="2">Airbus Corporate Jetliner (ACJ)</td> <td>43</td> <td>11297</td> <td>9.6</td> </tr> <tr> <td colspan="2">Boeing Business Jet (BBJ)</td> <td>50</td> <td>11519</td> <td>17.5</td> </tr> <tr> <td colspan="2">Embraer Lineage 1000</td> <td>19</td> <td>7800</td> <td>18.1</td> </tr> </tbody> </table> Первый tr внутри каждого tbody - основная строка, последующие - дополнительные, их нужно скрыть. |
а чего это разметку менять нельзя? я так не играю)
|
Скажем, не хватает прав на редактирование документов :) А вот на правку шаблона - хватает.
Да и не наша задача редактировать контент. Контент уже есть, нужно только навесить скрипт. |
> Скажем, не хватает прав на редактирование документов
и в чём проблема их получить? > Да и не наша задача редактировать контент. Контент уже есть, нужно только навесить скрипт. это какая-то сферическая задача в вакууме. высосанные из пальца задачи решать совершенно не интересно. |
Мы находимся на javascript форуме, а не на html, а потому, обсуждать верстку не имеет смысла. Разметка таблицы полостью достаточна для решения задачи. Таблиц может быть много, и никто не собирается придумывать им id или проставляеть классы строкам. Задача была у меня конкретно такая, я привел ее как есть.
Я никого не заставляю ее решать, однако публичный отказ под предлогом высосанности или сферичности кое-о-чем говорит :) Видимо зря я этот пример тут запостил. Очевидно что эту задачу проще всего решить на jQuery (что я и сделал). Либо любая либа позволяющая выборку по селектору (mootools например). В общем бред. Кстати, сначала думал о своей идее - pure js + polyfill's . Фигня все это. С NodeList работать неудобно (через циклы или метод forEach из прототипа массива), стили изменять не очень удобно, dom travelsing тоже неудобный, XHR тож избыточный, для анимации всеравно нужно что-то либное. В общем код получается очень раздутый и писать его долго. Плюс костыли для ие будут весить немало. Я думаю неплохо было бы использовать что-то типа zepto.js, но с подгружаемыми костылями для IE. В общем проще всего пока использовать jQuery. С версией 2.0 она должна заметно похудеть. |
интересно как ты в этом случае будешь менять картинку группы при её разворачивании/сворачивании?
а как будешь выравнивать численные значения по правому краю, текстовые по левому, а флаги по центру? а как будешь реализовывать двухуровневое разворачивание? |
tenshi, не перегибай палку )
Это не интерфейс приложения, это всего лишь табличка с простой инфой, выложенная на вебсайте. Нет тут флагов, не нужна картинка и двухуровневая вложенность. Я понял к чему ты клонишь - тут нужны qooxdoo, ExtJS или dojo. (кстати почему qooxdoo тут не освещается вовсе? помоему достойный фреймворк, даже интереснее ExtJS) Коли была бы такая задача -я бы выбрал что-нибудь их них. Собственно о том и речь. Любой здравый человек гвозди забивает молотком, а шурупы вворачивает шуруповертом. И тут не вопрос предпочтений, тут все зависит от задач. |
<style> air_stat { display: block; border: 1px solid lightsteelblue; } air_head { display: block; font-weight: bold; text-align: center; } air_tree { display: block; } air_branch { width: 100%; display: table; background: #efe; cursor: pointer; } air_leaf { width: 100%; display: none; } air_type, air_chairs, air_range, air_bag { display: table-cell; border: 1px solid lightsteelblue; padding: .2em; } air_type { text-indent: 1.5em; } air_chairs, air_range, air_bag { text-align: right; width: 20%; } air_head > * { text-align: inherit; } input[ air_switcher ] { position: absolute; visibility: hidden; display: none; } input:checked ~ label air_branch { background: #fef; } input:checked ~ air_leaf { display: table; } </style> <air_stat> <air_head> <air_type>Тип</air_type> <air_chairs>Количество пассажирских мест</air_chairs> <air_range>Дальность полета (км)</air_range> <air_bag>Вместительность багажника (м³)</air_bag> </air_head> <air_tree> <input id="switcher-1" type="checkbox" air_switcher="true" /> <label for="switcher-1"> <air_branch> <air_type>Execuliners</air_type> <air_chairs>50</air_chairs> <air_range>11520</air_range> <air_bag>18.1</air_bag> </air_branch> </label> <air_leaf> <air_type>Airbus Corporate Jetliner (ACJ)</air_type> <air_chairs>43</air_chairs> <air_range>11297</air_range> <air_bag>9.6</air_bag> </air_leaf> <air_leaf> <air_type>Boeing Business Jet (BBJ)</air_type> <air_chairs>50</air_chairs> <air_range>11519</air_range> <air_bag>17.5</air_bag> </air_leaf> <air_leaf> <air_type>Embraer Lineage 1000</air_type> <air_chairs>19</air_chairs> <air_range>7800</air_range> <air_bag>18.1</air_bag> </air_leaf> </air_tree> <air_tree> <input id="switcher-2" type="checkbox" air_switcher="true" /> <label for="switcher-2"> <air_branch> <air_type>Execuliners</air_type> <air_chairs>50</air_chairs> <air_range>11520</air_range> <air_bag>18.1</air_bag> </air_branch> </label> <air_leaf> <air_type>Airbus Corporate Jetliner (ACJ)</air_type> <air_chairs>43</air_chairs> <air_range>11297</air_range> <air_bag>9.6</air_bag> </air_leaf> <air_leaf> <air_type>Boeing Business Jet (BBJ)</air_type> <air_chairs>50</air_chairs> <air_range>11519</air_range> <air_bag>17.5</air_bag> </air_leaf> <air_leaf> <air_type>Embraer Lineage 1000</air_type> <air_chairs>19</air_chairs> <air_range>7800</air_range> <air_bag>18.1</air_bag> </air_leaf> </air_tree> <air_tree> <input id="switcher-3" type="checkbox" air_switcher="true" /> <label for="switcher-3"> <air_branch> <air_type>Execuliners</air_type> <air_chairs>50</air_chairs> <air_range>11520</air_range> <air_bag>18.1</air_bag> </air_branch> </label> <air_leaf> <air_type>Airbus Corporate Jetliner (ACJ)</air_type> <air_chairs>43</air_chairs> <air_range>11297</air_range> <air_bag>9.6</air_bag> </air_leaf> <air_leaf> <air_type>Boeing Business Jet (BBJ)</air_type> <air_chairs>50</air_chairs> <air_range>11519</air_range> <air_bag>17.5</air_bag> </air_leaf> <air_leaf> <air_type>Embraer Lineage 1000</air_type> <air_chairs>19</air_chairs> <air_range>7800</air_range> <air_bag>18.1</air_bag> </air_leaf> </air_tree> </air_stat> |
Мне нравится использовать w3c методы. Поэтому spike.js. В примере не подключено — думаю здесь у всех есть современные браузеры. Проверялось в Opera Mobile.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type = "text/css"> .collapsible .collapse { display: none; } </style> <title>Untitled</title> </head> <body> <table class="collapsible"> <thead> <tr> <th></th> <th>Тип</th> <th>Количество пассажирских мест</th> <th>Дальность полета (км)</th> <th>Вместительность багажника (м³)</th> </tr> </thead> <tbody> <tr> <td><img src="images/planes/ececuliners.png" alt="Execuliners" /></td> <td><span>Execuliners</span></td> <td><span>50</span></td> <td><span>11520</span></td> <td><span>18.1</span></td> </tr> <tr> <td colspan="2">Airbus Corporate Jetliner (ACJ)</td> <td>43</td> <td>11297</td> <td>9.6</td> </tr> <tr> <td colspan="2">Boeing Business Jet (BBJ)</td> <td>50</td> <td>11519</td> <td>17.5</td> </tr> <tr> <td colspan="2">Embraer Lineage 1000</td> <td>19</td> <td>7800</td> <td>18.1</td> </tr> </tbody> <tbody> <tr> <td><img src="images/planes/ececuliners.png" alt="Execuliners" /></td> <td><span>Execuliners</span></td> <td><span>50</span></td> <td><span>11520</span></td> <td><span>18.1</span></td> </tr> <tr> <td colspan="2">Airbus Corporate Jetliner (ACJ)</td> <td>43</td> <td>11297</td> <td>9.6</td> </tr> <tr> <td colspan="2">Boeing Business Jet (BBJ)</td> <td>50</td> <td>11519</td> <td>17.5</td> </tr> <tr> <td colspan="2">Embraer Lineage 1000</td> <td>19</td> <td>7800</td> <td>18.1</td> </tr> </tbody> <tbody> <tr> <td><img src="images/planes/ececuliners.png" alt="Execuliners" /></td> <td><span>Execuliners</span></td> <td><span>50</span></td> <td><span>11520</span></td> <td><span>18.1</span></td> </tr> <tr> <td colspan="2">Airbus Corporate Jetliner (ACJ)</td> <td>43</td> <td>11297</td> <td>9.6</td> </tr> <tr> <td colspan="2">Boeing Business Jet (BBJ)</td> <td>50</td> <td>11519</td> <td>17.5</td> </tr> <tr> <td colspan="2">Embraer Lineage 1000</td> <td>19</td> <td>7800</td> <td>18.1</td> </tr> </tbody> </table> <script> ( function (className) { var x, tables = document.querySelectorAll("." + className), collapse = function (e) { var trs, x, clickedTr = e.target.parentNode.parentNode, th = clickedTr.parentNode ; if ( clickedTr === th.querySelector( "tr" ) ) { trs = th.querySelectorAll("tr") for (x = 1; x < trs.length; x++) { trs[x].className = trs[x].className === "collapse" ? "" : "collapse"; } } } ; for (x = 0; x < tables.length; x++) { tables[x].addEventListener("click", collapse, false) } } ) ("collapsible") </script> </body> </html> |
Почему фреймворки? Это же все библиотеки.
|
что значит любимый?? бред.. они используются исходя из задачи. не будешь же использовать extjs для мелких задач (например: поиска селекторов, привязка событий и т.д.), когда есть jquery. и зачем вручную создавать те же таблицы с динамическими данными с помощью jquey, когда можно их создать в extjs
|
ковыряюсь сейчас в extjs и не понимаю зачем его вообще хоть для чего-то использовать)
|
а где же мой любимый Google Closure Library??? :)
|
Страшненький помоему,
во всех смыслах от внешнего вида UI компонентов до api. |
Цитата:
UI из коробки как в jq это по воробьям из пушки))) прелесть Closure Library в том что там есть всё необходимое для разработки СВОЕГО интерфейса без тупых навязыванний - один только лишь datepicker чего стоит! |
Кто что может сказать о Flying JS?
http://javascript.ru/forum/showthrea...176#post280176 |
Цитата:
|
в опросе не хватает варианта: "Любимого фреймворка нет, но приходится использовать jQuery"
|
Цитата:
Интересно. ;) Может разницы нет? |
Цитата:
Вероятно все таки фреймворк должен диктовать архитектуру приложения, ну к примеру backbone это фреймворк потому что там есть коллекции, модели и view. Тобиш в backbone мы уже знаем что для представления мы используем view, а бизнес логику и данные отправим в коллекции и модели. В то время как библиотека диктует лишь api для манипулирования чем либо, к примеру в случае jQuery это api к DOM, в случае raphael это api к SVG, mathjs набор функций для математических вычислений и т.д. |
Snap.svg
По моему, самая годная из всех. |
Angular.JS
|
React
|
reactjs, виртуальный дом быстр! давайте ветку по реакту! К примеру есть цикл для создания дочки, при следующем проходе реакт смотрит по ключам, это выгоднее чем .empty().
|
На работе использую jQuery, т.к. все на нем завязано, на своих проектах если есть необходимость в подключении какого-либо, то MooTools.
|
Использую kendo UI, помоему очень удобный, значительно ускоряет процесс разработки
|
React + Redux
|
А где же в опросе React | Angular | Vue?)
|
Цитата:
|
Цитата:
|
w3ui
Зачетный минимализм. |
|
Цитата:
Причем такую себе самописную что ли. Я правда пока еще в середине документации. |
jquery лучше всех.
я не веб разработчик, но очень удобная и простая библиотека. И если надо, можно юзать чистый жс, а не как во всех этих реактах. |
Цитата:
Любое более-менее практическое применение приводит к множественному подключению стороннего кода, расширяющего прототип jQuery (мы не слышали про модули и экспорт) и как следствие к callback hell, поскольку религия этих «плагинописателей» запрещает использовать им классы и синтаксис для асинхронного программирования. jQuery совершенно не приспособлена для работы с современным DOM. Цитата:
Поскольку кросс-браузерная совместимость теперь не является больным местом при разработке (ведь в 2020 году поддержка JavaScript браузерами более согласованная, чем когда-либо), то вы совершенно спокойно можете использовать DOM API (а если вас интересует компонентный подход, то совершенно нормально использовать веб-компоненты или React/Preact) |
Цитата:
Если программер делает это для себя, то чистый и читабельный код - несомненно ценность. А юзер этого не видит (и не оценит). Ему подавай меньший трафик и скорость работы (хотя бы первоначальной загрузки). Просто есть статистика по миллионам сайтов, использующих jquery, react, vue, angular. Вот статейка об этом https://timkadlec.com/remembers/2020...pt-frameworks/ |
Цитата:
У меня однажды был проект на пфиечпфи, так там всё было всё в одну кучу свалено и к тому же код чеикуэжи, навешивающий обработчики событии, генерировался через пфиечпфи... (У кого-то кукушка поехала отдыхать в далёкие страны) И уже это было слишком запутанно и слишком много языков в одном файле! А теперь подумайте о таком ужасном подходе, чтобы написать не какие-то обработчики формочек, а полноценное приложение... Цитата:
Цитата:
|
Часовой пояс GMT +3, время: 14:01. |