Как убедить моего босса (и других разработчиков) использовать / учитывать ненавязчивый JavaScript

Я довольно новичок в нашей команде develepors.

Мне нужны веские аргументы и / или примеры «подводных камней», чтобы мой начальник наконец-то понял преимущества ненавязчивого JavaScript, чтобы он и остальная команда перестали делать такие вещи:

<input type="button" class="bow-chicka-wow-wow" 
       onclick="send_some_ajax(); return false;" value="click me..." />

а также

<script type="text/javascript">

function send_some_ajax()
{
  // bunch of code ... BUT using jQuery !!!
}
</script>

Я предложил использовать довольно распространенный шаблон:

<button id="ajaxer" type="button">click me...</button>

а также

<script type="text/javascript">

// since #ajaxer is also delivered via ajax, I bind events to document 
//  -> not the best practice but it's not the point....

$(document).on('click', '#ajaxer', function(ev) {
var $elem = $(this);
ev.preventDefault();

});

Причина, по которой мой босс (и другие) не хотят использовать этот подход, заключается в том, что Event-Inspection в FireBug (или Chrome Dev Tools) больше не прост, например, с

<input type="text" name="somename" id="someid" onchange="performChange()">

он может сразу увидеть, какая функция выполняется в событии change, и сразу перейти к нему в огромном JS-файле, полном спагетти-кода .

В случае с ненавязчивым JavaScript единственное, что он увидит, это:

<input type="text" name="somename" id="someid" />

и он не знает, были ли какие-либо события, если таковые имеются, связаны с этим элементом и какая функция будет запущена.

Я искал решение и нашел его:

$(document).data('events') // or .. $(document).data('events').click

но этот «подход» заставил его «слишком долго ...» выяснить, какая функция срабатывает при каком событии, поэтому мне сказали остановить подобные события.

Я прошу у вас несколько примеров, сильных преимуществ или любые другие предложения для «Почему мы должны использовать UJS»

ОБНОВЛЕНИЕ: предложение «сменить работу» не является идеальным решением.

ОБНОВЛЕНИЕ 2: Хорошо, я не только предложил использовать привязку событий jQuery, я сделал это . После того, как я написал все делегирование событий, ко мне подошел Босс и спросил, почему я делаю делегирование событий с другим подходом и подходом, которые он не знает

Я упомянул о некоторых очевидных преимуществах, таких как - Есть 15 полей ввода, и у каждого из них есть onchangeсобытие (не только у некоторых из них также onkeyup). Поэтому более прагматично писать такого рода делегирование событий для ВСЕХ полей ввода, вместо того, чтобы делать это 15 раз, особенно если весь HTML будет отображаться с помощью PHP echo ->echo '... <input type="text" id="someid" ... />...'

1. Прекратите использовать модные слова и попробуйте вместо этого привести веские аргументы. Даже на странице Википедии для ненавязчивого JavaScript написано, что этот термин не определен формально. Это может быть общим термином для ряда хороших идей, но если это звучит как причуда или мода, ваш начальник и коллеги не будут уделять много внимания. Хуже того, если вы продолжаете говорить о чем-то, что они считают бесполезным, они могут начать сбрасывать со счетов совершенно несвязанные идеи, которые вы защищаете.

2. Выясните, почему вы считаете, что ненавязчивые идеи JavaScript важны. Это потому, что вы читали, что они считаются лучшими практиками? Сталкивались ли вы с проблемами, которые вы можете объяснить тем, что не следовали этим идеям? Насколько принятие этих идей повлияет на прибыль компании?

3. Получить в голову вашего босса. Почему он делает то, что делает, и почему он отклонил ваши изменения? Он, вероятно, не глуп, и он, вероятно, более опытный, чем вы, поэтому у него, вероятно, есть веские причины для того, чтобы поступать по-своему. Вы уже упоминали о некоторых из них - следуйте этой теме до конца. Затем выясните, улучшат ли ваши предложения то, что его больше всего беспокоит.

4. Подсказка 1: Менеджеры любят деньги. Чем непосредственнее вы можете связать свои предложения с увеличением дохода или сокращением расходов, тем больше влияние будет иметь ваш аргумент. Подсказка 2: время - деньги. Подсказка 3: сама по себе эстетическая привлекательность кода не приносит денег. Напротив, на самом деле - нужно время, чтобы код выглядел красиво. Уродливый код, который хорошо работает, отлично подходит большинству менеджеров.

5. Не просто говори об этом, делай это . Если вам повезло, что на вашем пути появился небольшой автономный проект, спросите своего менеджера, можете ли вы сделать это, используя стиль «UJS» в качестве своего рода демонстрации. Когда вы будете готовы, проведите обзор кода, где вы сможете объяснить, как все это работает и почему вы думаете, что это лучше, чем текущий стиль.

6. Идеализм велик, но не позволяйте ему мешать. Гораздо важнее быть замеченным как тот, кто добивается цели, чем как дилетант, который жалуется на неуклюжий стиль кодирования. Это особенно верно, если вы новый парень. Если вы не можете добиться успеха с UJS сейчас, сделайте хорошую работу, вместо этого, и медленно подбирайте аргументы для изменений, которые вы хотели бы внести, завоевав доверие.

7. Переключатель чтения : как изменить ситуацию, когда изменение сложно . Это даст вам гораздо больше хороших идей о том, как эффективно построить ваше дело.

Что вы можете сделать, это дать им демонстрацию отладки HTML- кода USJ с использованием инструментов FireQuery, а также Chrome Query .

FireQuery является расширением Firebug и делает его довольно хорошо. Что касается Chrome Query, я не могу поручиться за то, насколько он хорош, но он определенно используется некоторыми разработчиками ( публикация в stackoverflow ).

Также известно, что .dataфункция удалена для возврата внутренних данных о событиях начиная с jQuery 1.8.0 , и заменена на те, $._data(element, "events")которые могут быть нестабильными, согласно официальному журналу изменений

Это теперь удалено в 1.8, но вы все равно можете получить данные о событиях для целей отладки через $ ._ data (element, "events"). Обратите внимание, что это не поддерживаемый публичный интерфейс; фактические структуры данных могут несовместимо меняться от версии к версии.

ОБНОВЛЕНИЕ:
Когда я начал работать, у меня была та же самая дилемма. Но после создания демонстрации с полностью функциональным графическим интерфейсом (одностраничное приложение), который включал в себя динамически открывающиеся вкладки (тоже закрываемые), меню Accordion (динамически создаваемое из db), они наконец поняли, что лучше использовать USJ полностью.

Также плюсом использования USJ является то, что вы можете минимизировать все ваше приложение в небольшой (нечитаемый) скрипт. Также покажите им сценарии для google.com / github.com (в качестве примера) и укажите, что даже у них сжатый код, что всегда лучше, так как зрителю сайта будет трудно расшифровать недостатки безопасности и использовать их, чтобы начать полноценную атаку на ваш сайт (напугать их), хотя вряд ли.

ОБНОВЛЕНИЕ 2 :
Кстати, я не знал, что я делаю USJ, пока я не увидел этот вопрос, так что спасибо одним способом.

Встроенные обработчики событий воняют, потому что:

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

• Вы привязали поведение к тегам HTML, а не к атрибутам класса / идентификатора тегов HTML. Допустим, у вас есть класс «combo_box» во всем приложении. Внезапно, на половине ваших старых страниц, вы хотите немного изменить свои поля со списком, когда они находятся в другом контейнере. Связанный с классом, вы можете изменить это поведение в зависимости от контекста контейнера, например "#special_container .combo_box". Связанный внутри проклятого HTML, вы можете обнаружить, что отслеживаете каждое маленькое поле выбора с классом .combo_box на любых числовых страницах, чтобы изменять ссылки на эти обработчики по одной, а не настраивать или писать пару новых строк кода для фильтрации из одного местоположения файла. ,

• Если вам нужно несколько обработчиков, вы должны обернуть их в функцию, а затем связать ее без необходимости с конкретными файлами HTML. Насколько это обслуживаемо?

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

• Это на стороне клиента. У нас есть несколько браузеров, каждый из которых интерпретирует тяжелую сложность по-своему. Откажитесь от всего вместе, и пусть IDE разберется с вами, менталитет здесь не работает. Хранение кода в строгом, минимальном, слабо связанном и чистом состоянии - это не модно, это абсолютно необходимо для создания удобного в обслуживании внешнего интерфейса, который легко модифицировать и обновлять, и да, именно в этом и заключается смысл $$$, если ваш менеджер действительно предвидит ,

• Это не так! @ # $ 2002 больше. Этот аргумент так же стар, как таблицы, как макет. Преодолейте это и начните доверять опытным специалистам, специализирующимся на клиентах, которых вы сами наняли, потому что вам не хватало их опыта (не то, чтобы я передавал гнев из личного опыта или чего-то еще).

И чтобы опровергнуть аргументы вашего босса, на самом деле не так сложно отследить, какой класс или ID используется при делегировании события или привязке обработчика с помощью CTRL + F и инструмента, который позволяет вам просматривать все JS на странице, как мой личный смущающий jquery. / версия прототипа только для букмарклетов Я спешно соединился, когда панель инструментов веб-разработчика начала навязываться мне (проклятая цветовая кодировка). Сделайте закладку по ссылке на странице js fiddle или скопируйте JS и сделайте свой собственный.

Скриптовая ссылка JS, которая, вероятно, в конце концов истечет

Одним из основных преимуществ предложенного вами метода является то, что вам нужно только один раз связать обработчик событий с родителем, таким как «документ», и этот обработчик сможет перехватывать события, приходящие от всех дочерних элементов, которые удовлетворяют данному селектору, например «button.anyclass». ». Экономит память и обслуживается таким образом, что требуется только один экземпляр редактирования, и это влияет на все элементы.

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

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

Очевидный ответ заключается в том, что вы можете связать только одну функцию с вашей кнопкой с помощью атрибута onclick, тогда как событие JQuery позволяет вам связать несколько функций. Распространенная проблема с событием onload: если ваш документ состоит из более чем одного файла, часто происходят конфликты.

Другое решение, которое может удовлетворить вас и вашего босса, - это использование привязки данных с библиотекой, такой как Knockout или Angular, которая отслеживала бы изменения в вашем представлении и устраняла необходимость в значительной части обработчиков событий.