Цитата:
Цитата:
|
можно. к каждому элементу в момент появления его в доме привязываются яваскриптовые компоненты. каждая умеет запускать всплытие события чтобы передавать сообщения предкам. а также умеет следить за тем какие элементы находятся внутри (аналогично 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, время: 15:12. |