Нулевой на Гобелене 5.4

Прототип против JQuery

Гобелен исторически использовал Prototype как то, что я называю своей основой . Фонд отвечает за выбор и создание элементов, присоединение обработчиков событий, запуск событий и инкапсуляцию запросов Ajax.

Уже возможно иметь и Prototype, и jQuery на одной странице; Я делаю это регулярно. Для этого также есть проект, гобелен-jquery . Тем не менее, есть несколько затрат на наличие нескольких базовых структур:

Прежде всего это размер ; в каждом фреймворке много кода (160Kb для Prototype, 260Kb для jQuery — намного меньше после минимизации и сжатия) и огромное перекрытие. Это включает в себя тот факт, что обе платформы имеют версию механизма выбора Sizzle CSS .

Есть также некоторые случайные столкновения; У меня была неприятная проблема, когда некоторый Bootstrap JavaScript запускал событие «скрыть», когда модальное диалоговое окно было закрыто. После долгого отслеживания и удаления волос я обнаружил, что jQuery будет рассматривать функцию, прикрепленную к элементу, как обработчик события для события с соответствующим именем. Событие «hide», вызванное jQuery, нашло метод hide (), добавленный Prototype, и мой модальный диалог просто подмигнул, а не анимация, как я хотел.

Наконец, это не просто мир. есть также YUI, ExtJS, MooTools … в течение последних нескольких лет, каждый раз, когда я упоминал о своем желании создать слой абстракции, я получал вопрос «будет ли он поддерживать X?» и «X» был какой-то новой структурой, фаворитом этого человека, о которой я раньше не слышал.

Поэтому уровень абстракции будет важен для обеспечения быстрой загрузки JavaScript и минимизации накладных расходов на выполнение сети и JavaScript.

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

Если вы создаете повторно используемые компоненты, лучше всего попытаться использовать SPI (интерфейс поставщика услуг; уровень абстракции). Это позволяет широко использовать вашу библиотеку, не привязывая пользователей к какой-либо конкретной фундаментальной структуре.

Модули против библиотек

Tapestry 5.3 и более ранние версии предоставляют отличную поддержку JavaScript в виде библиотеки. Концепция JavaScriptStack позволяет объединять любое количество отдельных библиотек JavaScript вместе с поддержкой файлов таблиц стилей CSS. Более того, Tapestry может создать одну виртуальную библиотеку JavaScript, объединяя все библиотеки стека вместе. Tapestry делает это во время выполнения и условно … поэтому во время разработки вы можете работать со многими небольшими файлами JavaScript, а в процессе работы они превращаются в один объединенный минимизированный файл JavaScript.

Однако у этого подхода JavaScript есть свои проблемы. Логика инициализации страницы очень зависит от стеков (включая основы), присутствующих и загружаемых в определенном порядке. Никакая логика инициализации страницы не может быть выполнена, пока все библиотеки не будут загружены. Если у вас есть несколько стеков в производстве, то все стеки должны быть загружены до выполнения любой логики.

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

В Tapestry 5.4 фокус смещается с библиотек на модули. В AMD модуль — это функция JavaScript, которая выражает зависимость от любого количества других модулей и экспортирует значение в другие модули. Экспортируемое значение может быть отдельной функцией или объектом, содержащим несколько функций (или других значений).

Вот снимок одного из модулей, который обеспечивает поддержку компонента Zone :

define ["core/spi", "core/events", "core/ajax", "core/console", "_"],

  (spi, events, ajax, console, _) ->
    spi.onDocument events.zone.update, (event) ->

      this.trigger events.zone.willUpdate

      content = event.memo.content

      unless content is undefined
        this.update content

      this.trigger events.zone.didUpdate

    spi.onDocument events.zone.refresh, (event) ->

      parameters = this.getAttribute "data-zone-parameters"

      parameters = if parameters is null then null else JSON.parse(parameters)

      ajax event.memo.url,
        parameters: _.extend { "t:zoneid": this.element.id }, parameters, event.memo.parameters
        onsuccess: (reply) =>
          this.trigger events.zone.update, content: reply.responseJSON?.content

    deferredZoneUpdate = (id, url) ->

      _.defer ->
        zone = spi id

        if zone is null
          console.error "Could not locate element '#{id}' to update."
          return

        zone.trigger events.zone.refresh, { url }


    return { deferredZoneUpdate }

Функция define () используется для определения модуля; Первый параметр — это массив имен модулей. Второй параметр — это функция, вызываемая после загрузки всех зависимостей; параметры этой функции — экспорт названных модулей.

Эта функция выполняет некоторую инициализацию, присоединяя обработчики событий к объекту документа; он также определяет и экспортирует одну именованную функцию («deferredZoneUpdate»), которая может использоваться другими модулями.

Да, у меня есть модуль с именем «_», который называется
Underscore.js . Я, вероятно, добавлю «$» для jQuery. Почему бы не иметь короткие имена?

Библиотека RequireJS знает, как загружать отдельные модули и обрабатывать зависимости этих модулей от других. А еще лучше, он знает, как сделать это параллельно . Фактически, в 5.4 единственным JavaScript, загруженным с использованием традиционного тега <script>, является RequireJS; все остальные библиотеки и модули загружаются через него.

В конце дня будет меньше загружаться JavaScript, а загружаемый JavaScript будет загружаться параллельно. Я все еще работаю над некоторыми деталями о том, как библиотеки модулей могут быть объединены в стеки.

Декларативный JavaScript

Даже в более ранних формах Tapestry поддержка JavaScript была мощной … но неуклюжей. Чтобы сделать что-то нестандартное и значимое на стороне клиента, вы должны были:

• Напишите библиотеку JavaScript для вашей функциональности
• Monkey-patch для функции в пространстве имен T5.initializers.
• Упакуйте ваши данные инициализации как JSONObject … как правило, идентификаторы клиентских элементов, URL-адреса и т. Д.
• Ваш код компонента Java вызывает JavaScriptSupport.addInitializerCall (String, JSONObject), чтобы связать все это вместе.

    spi.onDocument "click", "input[type=submit], input[type=image]", ->
      setSubmittingHidden (spi this.element.form), this