Как я могу написать повторно используемый Javascript? - PullRequest
22 голосов
/ 09 апреля 2010

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

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

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

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

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

Как другие решают эти проблемы? Надев мои мыслительные ограничения, я начинаю верить, что мне нужно иметь специфичный для страницы слой Javascript между каждым использованием в моем приложении и общими методами, которые я создаю, которые должны использоваться в приложении. Используя предыдущий пример, у меня будет кнопка поиска, чей onclick вызывает функцию myPageSpecificSearchFunction, в которой идентификаторы / имена полей поиска жестко закодированы, что маршализирует параметры и вызывает универсальную функцию поиска. Универсальная функция будет возвращать только данные / объекты / переменные и не будет напрямую читать или вносить какие-либо изменения в DOM. Функция поиска по конкретной странице будет затем получать эти данные обратно и соответствующим образом изменять DOM.

Я на правильном пути или есть лучший способ справиться с повторным использованием объектов / методов Javascript?

Ответы [ 3 ]

24 голосов
/ 09 апреля 2010

Базовая модель

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

var Search = (function(){
    var pubs = {};

    pubs.carSearch = carSearch;
    function carSearch(color) {
    }

    pubs.peopleSearch = peopleSearch;
    function peopleSearch(name) {
    }

    return pubs;
})();

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

Получение параметров

Одна из функций, которые мне действительно очень нравятся из Прототип - это функция Form#serialize, которая проходит по элементам формы и создает простой объект со свойством для каждого поля. на основе названия поля. (Текущая реализация прототипа - 1.6.1 - имеет проблему, когда она не сохраняет порядок полей, но удивительно, как редко это является проблемой.) Звучит так, как будто вы хорошо обслуживается такими вещами, и их не сложно построить; тогда ваша бизнес-логика имеет дело с объектами со свойствами, названными в соответствии с тем, с чем они связаны, и не знает самой действительной формы.

Возвращение значений / Смешивание пользовательского интерфейса и логики

Я склонен думать о приложениях как об объектах, а также о связях и взаимодействиях между ними. Поэтому я склонен создавать:

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

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

1 голос
/ 09 апреля 2010

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

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

1 голос
/ 09 апреля 2010

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

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

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

Шаблоны проектирования Pro JavaScript

Техники Pro Javascript

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...