Я начал переносить свои функции в Объектах, например:
var Search = {
carSearch: function(color) {
},
peopleSearch: function(name) {
},
...
}
Это помогает много с удобочитаемостью, но я продолжаю иметь проблемы с возможностью многократного использования. Чтобы быть точнее, трудность находится в двух областях:
Получение параметров. Много времен, у меня будут поисковый экран с несколькими полями ввода и кнопка, которая вызывает функцию поиска JavaScript. Я должен или поместить набор кода в onclick кнопки для получения и затем военный значения от полей ввода в вызов функции, или у меня есть к hardcode поле ввода HTML, names/IDs так, чтобы я мог впоследствии получить их с JavaScript. Решение, на котором я обосновался для этого, состоит в том, чтобы передать поле, names/IDs в функцию, которую оно затем использует для получения значений от полей ввода. Это просто, но действительно кажется неподходящим.
Возвращение значения. Эффект большинства вызовов JavaScript имеет тенденцию быть тем, в котором некоторые визуальные на экране изменяются непосредственно, или в результате другого действия, выполненного в вызове. Возможность многократного использования является тостом, когда я поместил эти изменяющие экран эффекты в конце функции. Например, после того, как поиск завершается, я должен отобразить результаты на экране.
Как другие обрабатывают эти проблемы? Ставить мое думающее ограничение приводит меня полагать, что у меня должен быть определенный для страницы слой JavaScript между каждым использованием в моем приложении и общими методами, которые я создаю, которые должны использоваться всего приложения. Используя предыдущий пример, у меня была бы кнопка поиска, onclick которой называет myPageSpecificSearchFunction, в котором идентификаторы/имена поля поиска являются hardcoded, который упорядочивает параметры и вызывает универсальную поисковую функцию. Родовая функция возвратила бы данные/объекты/переменные только, и не будет непосредственно читать из или вносить любые изменения в DOM. Определенная для страницы поисковая функция затем получила бы эти данные назад и изменила бы DOM соответственно.
Я нахожусь на правильном пути или являюсь там лучшим шаблоном для обработки повторного использования объектов/методов JavaScript?
Что касается вашего базового шаблона, могу ли я предложить изменить вашу структуру, чтобы использовать шаблон модуля и именованные функции:
var Search = (function(){
var pubs = {};
pubs.carSearch = carSearch;
function carSearch(color) {
}
pubs.peopleSearch = peopleSearch;
function peopleSearch(name) {
}
return pubs;
})();
Да, это выглядит более сложным, но отчасти потому, что здесь нет вспомогательной функции. Обратите внимание, что теперь у каждой функции есть имя (ваши предыдущие функции были анонимными; свойства, к которым они были привязаны, имели имена, а функции - нет, что имеет значение с точки зрения отображения стека вызовов в отладчиках и т. Д.). Использование шаблона модуля также дает вам возможность иметь полностью закрытые функции, к которым могут получить доступ только функции в вашем объекте Search
. (Просто объявите функции внутри большой анонимной функции и не добавляйте их в pubs
.) Подробнее о моем обосновании этого (с преимуществами и недостатками, и почему вы не можете объединить объявление функции и свойство присвоение) здесь .
Одна из функций, которые мне очень нравятся из Prototype , - это функция Form # serialize
, которая просматривает элементы формы и создает простой объект с свойство для каждого поля на основе имени поля. (Текущая реализация прототипа - 1.6.1 - имеет проблему, когда она не сохраняет порядок полей, но удивительно, насколько редко это проблема.) Похоже, что такие вещи вам пригодятся, и их несложно построить; тогда ваша бизнес-логика имеет дело с объектами со свойствами, названными в соответствии с тем, с чем они связаны, и не знает фактической формы.
Я склонен думать о приложениях как об объектах, а также о связях и взаимодействиях между ними. Поэтому я стараюсь создавать:
(Я знаю, вряд ли оригинально!) Я стараюсь сохранить общие для хранилища и рендеринга объекты, чтобы они в основном работали, глядя на общедоступные свойства бизнес-объектов (а это почти все свойства; я не использую паттерны, подобные паттернам Крокфорда, которые позволяют действительно скрывать данные, я считаю их слишком дорогими). Прагматизм означает, что иногда хранилище или объекты рендеринга просто должны знать, с чем они имеют дело, в частности, но я действительно стараюсь, чтобы вещи были общими, где я могу.
Javascript до смешного гибок, а это означает, что ваш дизайн особенно важен, поскольку вы можете делать что-то по-разному. Это то, что, вероятно, заставляет Javascript чувствовать себя менее склонным к повторному использованию.
Есть несколько различных обозначений для объявления ваших объектов (функций / классов) и последующего размещения их имен. Важно понимать эти различия. Как упоминалось в комментарии здесь, «пространство имен - это легкий ветерок» - и это хорошее место для начала.
Я не смог бы углубиться в этот ответ и просто перефразирую, поэтому рекомендую купить эти книги:
Я начал использовать шаблон модуля , но затем начал делать все в плагинах jQuery . Плагины позволяют передавать определенные параметры страницы.
Использование jQuery также позволит вам переосмыслить способ определения условий поиска и нахождения их значений. Вы можете рассмотреть возможность добавления класса к каждому входу и использовать этот класс, чтобы не именовать каждый вход отдельно.