Как я могу записать допускающий повторное использование JavaScript?

Я начал переносить свои функции в Объектах, например:

var Search = {
  carSearch: function(color) {
  },
  peopleSearch: function(name) {
  },
  ...
}

Это помогает много с удобочитаемостью, но я продолжаю иметь проблемы с возможностью многократного использования. Чтобы быть точнее, трудность находится в двух областях:

  1. Получение параметров. Много времен, у меня будут поисковый экран с несколькими полями ввода и кнопка, которая вызывает функцию поиска JavaScript. Я должен или поместить набор кода в onclick кнопки для получения и затем военный значения от полей ввода в вызов функции, или у меня есть к hardcode поле ввода HTML, names/IDs так, чтобы я мог впоследствии получить их с JavaScript. Решение, на котором я обосновался для этого, состоит в том, чтобы передать поле, names/IDs в функцию, которую оно затем использует для получения значений от полей ввода. Это просто, но действительно кажется неподходящим.

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

Как другие обрабатывают эти проблемы? Ставить мое думающее ограничение приводит меня полагать, что у меня должен быть определенный для страницы слой JavaScript между каждым использованием в моем приложении и общими методами, которые я создаю, которые должны использоваться всего приложения. Используя предыдущий пример, у меня была бы кнопка поиска, onclick которой называет myPageSpecificSearchFunction, в котором идентификаторы/имена поля поиска являются hardcoded, который упорядочивает параметры и вызывает универсальную поисковую функцию. Родовая функция возвратила бы данные/объекты/переменные только, и не будет непосредственно читать из или вносить любые изменения в DOM. Определенная для страницы поисковая функция затем получила бы эти данные назад и изменила бы DOM соответственно.

Я нахожусь на правильном пути или являюсь там лучшим шаблоном для обработки повторного использования объектов/методов JavaScript?

22
задан aw crud 9 April 2010 в 15:58
поделиться

3 ответа

Базовый шаблон

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

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) и разработаны с учетом сериализации (через JSON, в моем случае), поэтому я могу отправлять их туда и обратно. с легкостью.
  • Объекты на стороне сервера, которые знают, как их использовать для обновления базового хранилища (поскольку я обычно работаю над проектами с базовым хранилищем), и
  • Объекты на стороне клиента, которые знают, как использовать эту информацию для рендеринга в пользовательский интерфейс.

(Я знаю, вряд ли оригинально!) Я стараюсь сохранить общие для хранилища и рендеринга объекты, чтобы они в основном работали, глядя на общедоступные свойства бизнес-объектов (а это почти все свойства; я не использую паттерны, подобные паттернам Крокфорда, которые позволяют действительно скрывать данные, я считаю их слишком дорогими). Прагматизм означает, что иногда хранилище или объекты рендеринга просто должны знать, с чем они имеют дело, в частности, но я действительно стараюсь, чтобы вещи были общими, где я могу.

25
ответ дан 29 November 2019 в 05:26
поделиться

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

Есть несколько различных обозначений для объявления ваших объектов (функций / классов) и последующего размещения их имен. Важно понимать эти различия. Как упоминалось в комментарии здесь, «пространство имен - это легкий ветерок» - и это хорошее место для начала.

Я не смог бы углубиться в этот ответ и просто перефразирую, поэтому рекомендую купить эти книги:

Профессиональные шаблоны проектирования JavaScript

Профессиональные методы Javascript

1
ответ дан 29 November 2019 в 05:26
поделиться

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

Использование jQuery также позволит вам переосмыслить способ определения условий поиска и нахождения их значений. Вы можете рассмотреть возможность добавления класса к каждому входу и использовать этот класс, чтобы не именовать каждый вход отдельно.

1
ответ дан 29 November 2019 в 05:26
поделиться
Другие вопросы по тегам:

Похожие вопросы: