Абстрагирование jQuery

В этих выступлениях Николаса Закаса и Адди Османи они обсуждают идею использования шаблона фасада в качестве "песочницы" при создании крупномасштабных приложений Javascript, чтобы отделить приложение от базовых базовых библиотек.

Такое разделение теоретически позволит вам отключить базовую библиотеку без необходимости переписывать модули приложения. Однако на практике это представляется более сложным для реализации.

Существуют конкретные реализации этой предложенной архитектуры, такие как AuraJS. Однако, глядя на исходный код, кажется, что песочница все еще имеет утечку абстракций, возвращая объекты jQuery из некоторых ее методов.

Меня не касается конкретно AuraJS, а скорее общая концепция попыток абстрагировать библиотеку, такую ​​как jQuery, без потери такой функциональности.

Например, скажем, мой фасад / песочница имеет метод dom .find(selector), Я могу придумать 3 варианта того, что он может вернуть:

  1. Объект jQuery - это приведет к утечке jQuery в модули-потребители.

  2. Необработанный элемент dom - потеря функциональности, никто не хочет с этим работать! Нет цепочки.

  3. Пользовательская jQuery-подобная оболочка - может быть довольно сложной, но кажется идеальным решением.

Итак, мой вопрос: как бы вы абстрагировали библиотеку, такую ​​как jQuery, не теряя слишком много функциональности, чтобы она могла быть заменена в какой-то момент в будущем с минимальными усилиями?

Источник

2 ответа

Вот очень простой пример использования модулей в качестве архитектуры:

<!DOCTYPE html>
<title>Module play</title>
<body>
<script>

// myCore provides all functionality required by modules
// Could use a library in here
var myCore = {

  getContainer: function() {
    // code in here to find a suitable container in which to put widgets
    // This is where different client capabilities will be tested to ensure the
    // widget behaves in it's user agent context - desktop, phone, tablet, pad, etc.

    // very simple shortcut
    return {
            element: document.body,

            // This function could use a general purpose library
            add: function(widget) {
              this.element.appendChild(widget.getElement());
            }
    };

  },

  // This function could use a general purpose library
  getNewWidget: function() {
    var element = document.createElement('div');

    return {

      getElement: function() {
        return element;
      },

      display: function(text) { 

        // Tightly couple to itself or not? 
        this.getElement().innerHTML = '<em>' + text + '</em>';

        // or
        element.innerHTML = '<em>' + text + '</em>';
      }
    }
  }
};

// Missing sandbox layer...

// Add a module - only uses myCore API (access should be controlled by
// the sandbox), does not deal with underlying library or host objects
(function() {

  // Get a container to add a widget too
  var container = myCore.getContainer();

  // Create a widget
  var widget = myCore.getNewWidget();

  // Add the widget to the container
  container.add(widget);

  // Give something to the widget to display
  widget.display('Hello World');

}());

</script>
</body>

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

(function() {
    var container, widget;

    if (!myCore) return;

    if (myCore.getContainer) { // Some would include an isCallable test too

      container = myCore.getContainer();
    }

    // getWidget could be a method of container instead so that
    // everything you need is either a method or property of container
    // or widget
    if (myCore.getWidget) {
      widget = myCore.getWidget();
    }

    ...
}

и так далее, так что все проверено и проверено. Я упустил обработку ошибок, но, надеюсь, этого достаточно.

Источник

Я думаю, что вы спрашиваете о написании более модульного кода, но JQuery не подходит для этого.

Определение асинхронного модуля http://addyosmani.com/writing-modular-js/

Источник
Другие вопросы по тегам