Повторное использование кода jQuery?

#jquery #reusability

#jquery #возможность повторного использования

Вопрос:

У меня есть некоторый код jQuery, который я планирую использовать на многих страницах в моем asp.net приложение веб-формы.

Пример: Создайте пользователя с помощью кода диалогового окна jQuery.

В Asp.net мы используем пользовательский элемент управления для повторного использования одного и того же фрагмента кода снова и снова. Есть идеи о том, как я могу повторно использовать код jQuery?

Комментарии:

1. Я не понимаю. Почему бы вам просто не создать функцию или не расширить объект jQuery с помощью метода?

Ответ №1:

Обычно вы помещаете код во внешний файл .js и используете <script src="my/path/to/jsfile.js" type="text/javascript"></script> на каждой странице, на которой используете javascript. (или вы можете поместить его в свой главный шаблон).

(перенесено из комментария из-за того, что это … не комментарий: P)

Ответ №2:

Обычно, когда я работаю с более сложными приложениями, есть несколько общих шаблонов, которым я обычно следую в своем коде jQuery. Чтобы справиться с проблемой разбросанного кода JavaScript по всей кодовой базе, я стараюсь упаковать как можно больше плагинов jQuery и приложить некоторые усилия, чтобы сделать их как можно более универсальными.

Вы можете найти много советов по разработке плагинов jQuery из этого доклада NDC 2011.

При разработке большего количества фреймворков JavaScript, таких как приложения, с меньшим количеством jQuery и более простым старым JavaScript, я пытаюсь разделить свой код в разных файлах по функциям. Я использую инструмент упаковки, такой как AjaxMin, для объединения и минимизации фреймворка в единый конечный JavaScript-файл.

Ответ №3:

Я тоже не уверен, что понимаю: если вы имеете в виду, что ваш опыт работы с jQuery заключается в том, что он запускается при готовности документа, это могут быть просто примеры, которые вы нашли. В этом случае комментарий dotweb дает ответ.

Если вы имеете в виду, что не уверены, как перенести этот код на другие страницы, не помещая его в тег сценария с помощью копирования / вставки, у Джозефа есть ответ.

Чтобы внести что-то новое, вот довольно типичный способ сделать это, который учитывает оба вышеперечисленных:

Создайте (и включите, согласно Джозефу) один или несколько внешних JS-файлов, которые составляют то, что вы считаете компонентами JS вашего приложения. «myApp.js » или что-то еще. Внутри этого файла вы можете использовать объект для хранения всех ваших функций (согласно dotweb). Это дает ему безопасное пространство имен и обеспечивает квазиглобальный способ доступа к функциям и переменным. На самом деле это не «глобальный» документ в смысле этого слова, но в пределах области, с которой вы можете легко работать и вызывать из любого другого места вашего приложения. Итак, ваше содержимое может выглядеть примерно так:

 var myApp = myApp || {}; // create a new empty object if that variable name is available

myApp.divHider = function() {
  $('div').hide();
}

myApp.backColor = function(color) {
  $('body').css('background', color);
}

// document ready function, which is where you might be accustomed to seeing scripts executed. Doesn't HAVE to be in this file; could be anywhere that makes sense

$(function() {
  myApp.divHider(); // hide all divs on document ready. Just a silly example
});