Что такое jQuery наиболее важные проблемы, и что, как разработчик, я могу сделать с ними?

У меня есть проект для создания интерфейса, который позволяет пользователю создавать контент с заранее определенными шаблонами и фрагментами кода.

Мы уже решили использовать интерфейсы jQuery и jQuery UI, чтобы помочь нам с компонентами перетаскивания/удаления/сортировки. Там также должно быть какое-то редактирование на месте, и я собираюсь использовать contenteditable в сочетании с функциями jQuery CSS.

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

Прежде чем приступить к работе над проектом, мне интересно, есть ли какие-то общие проблемы с jQuery - вроде как jQuery - Bad Parts. Есть ли функции, которые лучше всего избегать? Существуют ли функции, которые необходимо обойти?

Я читал эту ссылку, но теперь ему 2 года, и с тех пор многое изменилось в jQuery (и браузерах).

Любые ответы "Использовать эту инфраструктуру вместо" или "Не использовать фреймворк" будут проигнорированы - мне нужно использовать jQuery. Любые "jQuery - это мусор", которые не предоставляют решений, также будут игнорироваться. Конструктивные комментарии только пожалуйста. Если бы я знал, как делать лучше в JavaScript, что делает jQuery, я бы не использовал jQuery.

ОТВЕТЫ

Ответ 1

Я отвечу на половину вашего вопроса. Здесь есть список ошибок, основанных на болезненном опыте, не все из которых у меня есть решения.

  • Искушение сильно использовать длинные цепочки селекторов ( "ul # leftnav li p a.current" ) делает ваш код хрупким. Он может чувствовать себя умным ( "Эй, я мастер CSS!" ), Но он легко ломается, когда макет изменяется каким-либо нетривиальным способом.
  • Использование DOM в качестве базы данных. Похоже, это простая идея использовать .data() для прикрепления данных к вашим элементам DOM, для отслеживания состояния вашей страницы и для связывания элементов DOM вместе, но если вы перейдете за борт, вы начнете терять следы, что именно.
  • Вложение слишком много материала в $(document).ready(). И снова, естественно, чтобы инициализировать все ваши события и данные здесь, но вы скоро столкнетесь с проблемами организации и упорядочения. Посмотрите на MVC-подобные решения, чтобы все было организовано.
  • Не совсем кросс-браузер. Тест во всех целевых браузерах рано и часто! jQuery, хотя и замечательная абстракция, по-прежнему непроходим. События и атрибуты не всегда ведут себя одинаково в разных JS-машинах.

Ответ 2

Держите клей минимальным

Вещи, которые я сделал в jQuery, которые я научился избегать:

  • Использование больших, умных плагинов. Держите его просто или не используйте.
  • Большие, сложные файлы. Храните файлы небольшими и описательными.
  • Загрязнение глобального пространства имен. Используйте затворы для каждого файла. Экспортировать в пространство имен.
  • Построение разметки с помощью $(). Шаблон с использованием магистрали/усов, чтобы сохранить js в чистоте.
  • Хрупкие селектора CSS. Выберите по ID, где это возможно, используя иерархию, вызывает проблемы.

Хранить в рабочем состоянии

Вещи, которые я сделал в jQuery, которые я научился делать каждый раз:

  • Определенно использовать автоматическое тестирование. Поддерживает структуру кода и спокойствие.
  • Сохранять информацию состояния из DOM в модели.
  • Выберите сохранение функций обратного вызова и ссылайтесь на них по имени var над сумасшедшим вложением функции.
  • Используйте минимальную структуру для раннего создания соглашений.

Это последнее обязательное. Существует множество способов организации JS-проекта. Выберите что-то вроде ember.js, чтобы дать вам набор условных обозначений, а затем придерживаться их!

Ответ 3

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

С jQuery очень легко написать такой код:

$.get('/data', function (data) {
    // process data, then
    alertThing.fadeIn(function () {
        // when the alert is visible, handle clicks
        alertButton.click(function () {
            // the user confirmed, so post
            $.post('/data', function () {
                // ... and on and on
            });
        });
    });
});

В итоге вы получаете длинные цепочки и/или глубоко вложенные функции, которые трудно читать и отлаживать. Использование Deferred объектов может помочь, но было бы лучше разделить ваше приложение на слабосвязанные компоненты. Вы даже можете упаковать повторно используемый (презентационный, связанный с DOM) код в plugins.

Сила jQuery - кросс-браузерная манипуляция DOM; когда дело доходит до организации программной/бизнес-логики, jQuery - не самый подходящий инструмент. (Хранение не-презентационных данных на DOM в основном является костылем для этого.)

Рамки вроде Backbone или JavaScriptMVC помогите, предоставив структуру для вашего кода. Это "еще одна основа для изучения", но без этого вы в конечном итоге написали свой собственный MVC-подобный код.

Ответ 4

Одна из самых больших ошибок - IE6. Я постоянно нахожусь в работе, чтобы заставить jqueryUI работать в IE6 и забыть о попытке заставить его работать в IE 5.5

Ответ 5

Ну, я N00B, но большинство проблем, с которыми я столкнулся с функциями JQuery, не работает в методе $( "div > label" ). Несколько раз он не работал в IE (я думаю, 7), и я должен был бы явно указать Это. Кроме того, функция Document.Ready не работает для меня, когда у меня загружается загрузка скриптов в IE7. В целом Несмотря на то, что вышеупомянутые вещи могли быть вызваны ошибкой с моей стороны Я считаю, что лучше избегать использования ELE.children("#id") вместо предпочтительного ELE.find(".class"), поскольку это даст немного гибкости над макетом и потому что u будет делать множество вещей на аналогичных элементах (например, копировать несколько div) Мое единственное предложение - использовать классы вместо идентификаторов и использовать Find вместо Children. То, что я пытаюсь сказать здесь, заключается в том, что если вы используете Find вместо детей, вы получите независимость от изменения компоновки отдельного элемента, если они находятся в разных контейнерах (надеюсь, это полезно).

Ответ 6

Одна неудачная ловушка для избежания ошибок - это много генерации HTML из вашего javascript. Например, я так много вижу:

$('<a href="'+url+'">'+text+'</a>').appendTo('#container');

Осторожно! В 90% случаев этот тип кода генерирует аналогичную разметку, которая уже поступает с сервера. Другими словами, как только разметка для ваших ссылок изменится, вам также придется выслеживать строку javascript и обновлять ее.

Я настоятельно рекомендую использовать официальный jQuery templates, как только вы почувствуете, что сначала захотите создать HTML-код в своем javascript!

Ответ 7

Я лично много работал с jQuery, и я могу сказать, что проблемы, с которыми вы столкнетесь, - это не с jQuery, а с характером самого javascript. Вы должны сохранить свой код организованным и хорошо документированным. Попробуйте выполнить какой-то mvc (backbonejs, javascript mvc или что-то в этом роде). ИЗБЕГАЙТЕ ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ. Используйте пространства имен для объектов, которые вы используете. Используйте document.ready как можно меньше событий. В противном случае вы перейдете к загрязнению и снова... это становится грязным.

Сохраняйте javascript характер вещей, как при использовании закрытий, объектов и методов.

Осторожно за добавление строк в dom. Убедитесь, что вы используете .load() или .clone(), чтобы получить html из вашего файла шаблона. Если вы используете магистраль или javascriptmvc, это будет происходить по своей сути.

Надеюсь, это поможет и удачи!