Уникальные экземпляры Javascript, выполняющие анонимные функции - PullRequest
Новая
       20

Уникальные экземпляры Javascript, выполняющие анонимные функции

1 голос
/ 16 августа 2011

Я создал сторону PHP модульной среды AJAX / PHP и сейчас пытаюсь реализовать клиентскую сторону.

Из моего предыдущего опыта работы с модульными веб-приложениями я знаю, что иногда требуется несколько экземпляров одного конкретного модуля. Например, веб-игра для двух игроков с частями страниц для каждого пользователя.

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

Модули могут быть загружены все сразу или загружены отдельно через AJAX (я использую jQuery).

Теперь я использую модульный подход, который я нашел в какой-то статье, но я могу изменить его другим способом, если это поможет решить эту проблему, не жертвуя модульностью и разделением частного / открытого кода. А теперь, скажем, у меня есть файл js со следующим: 

//Self-Executing Anonymous Func
(function( MyModule, $, undefined ) {

    // My Uid
    MyModule.UID = "";

    //Public Method
    MyModule.onLoad = function() {
       alert("Hey, you loaded an instance of MyModule with UID " + MyModule.UID);      
    };

    //Private Methods follow
    function somethingPrivate( ) {

    }    
}( window.MyModule = window.MyModule|| {}, jQuery ));

Я использую Smarty для шаблонов. Допустим, у меня есть простой шаблон модуля, подобный этому: 

<div id="{$contents.moduleuid}">
here goes the contents of the module which can be accessed from MyModule Javascript code by using this unique moduleuid
</div>

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

    <script type="text/javascript">
    /*
    TODO: here I have access to the {$contents.moduleuid} 
    But I have no idea what to put here to create a unique instance of MyModule
 (also it might need loading js file if it was not loaded yet) and I should also set for
 this instance MyModule.UID to {$contents.moduleuid} 
and also call MyModule.onLoad for this instance after it has loaded its Javascript.  
    */
    </script>

У меня нет опыта работы с продвинутыми темами Javascript, поэтому мне неясно, как я могу создать отдельный экземпляр MyModule для каждого модуля, который создается на стороне сервера? Можно ли вообще создавать экземпляры самозапускающихся анонимных функций? Если нет, то как я могу реализовать и клонировать объекты Javascript с отдельным частным / открытым кодом?

Ответы [ 2 ]

2 голосов
/ 06 сентября 2012

Я рекомендую поддерживать слабую связь на стороне клиента и на стороне сервера.Попробуйте полностью построить свое модульное клиентское приложение с использованием HTML / JS без использования PHP-трюков.Как я понимаю, каждый ваш модуль (или компонент пользовательского интерфейса) должен быть слабо связан с остальными.В таком случае есть несколько других проблем, которые вам, возможно, придется искать:

  • Как сохранить структуру компонентов UI (html), представление (css) и поведение (JS) самодостаточными (например, водна папка), чтобы он мог жить или умереть независимо
  • Как эти автономные компоненты взаимодействуют друг с другом
  • Как управлять конфигурациями / настройками компонентов пользовательского интерфейса
  • Если вы используете шаблон MVVM или MVC для организации и привязки представления к вашей модели PHP
  • Кто решает, когда создавать / показывать / скрывать компоненты пользовательского интерфейса (например, на основе URL для закладок)

Если ваш клиент представляет собой большое и сложное приложение, вам может потребоваться поиск других проблем, таких как оптимизация JS, модульное тестирование, документация, подмодули продукта и т. Д.

Посмотрите наBoilerplateJS Javascript эталонная архитектура, которую мы выдвинули на http://boilerplatejs.org. Она предлагает способы решения всех проблем, которые я обсуждал выше.

1 голос
/ 16 августа 2011

Поскольку вы уже используете jQuery, вы можете создать плагин jQuery. Плагин должен вести себя так, как вам нужно, и я считаю, что вам даже не понадобится уникальный идентификатор. Учитывая, что каждый экземпляр вашего модуля содержится в div с классом module-container, ваш код jQuery для добавления клиентского поведения в div будет выглядеть примерно так: 

$(function(){
    // DOM content is loaded
    $('.module-container').MyPluginName();
});

Минимальный код плагина будет (учитывая, что он находится в отдельном файле .js): 

(function($){
  $.fn.MyPluginName = function() {  
     // Return this.each to maintain chainability
    return this.each(function() {
      // Keep a reference to your unique div instance.
      var $this = $(this);
      // Plugin logic here
    });
  };
})(jQuery);

Если вы используете jQueryUI, я также рекомендую вам также заглянуть в «фабрику виджетов» ( intro , docs ), которая служит основой для создания мощного, нормализованного jQuery плагины.

...