Наследование наследований jquery и requirejs

Question

Я хочу определить API, который загружает некоторые jqueryui-плагины с requirejs. Определение плагинов для загрузки производится в содержании DOM через узлы данных:

<div id="pluginContainer"> 
    <div data-plugin="fooPlugin"/> 
    <span data-plugin="barPlugin"/> 
</div> 

Следующий исходный код попытается загрузить все модули внутри контейнера:

<script type="text/javascript"> 
    require(['jquery', 'container'], function() { 
     // when widget container is loaded, we load the plugins inside #pluginContainer 
     $('#pluginContainer').container(); 
    }); 
</script> 

Исходный контейнер код плагина является следующий один (в файле /js/container.js):

define(['jquery', 'jquery/ui'], function($) { 
    'use strict'; 
    $.widget('ns.container', { 
    /** 
    * container constructor 
    * @private 
    */ 
    _create: function() { 
     this._initPlugin(); 
    }, 
    /** 
    * load plugins into the container 
    * @private 
    */ 
    _initPlugin: function() { 
     var $plugin, $pluginType; 
     this.element.find('*[data-plugin]').each(function(index, plugin) { 
      $plugin = $(plugin); 
      pluginType = $plugin.data('plugin'); 
      require([pluginType], function() { 
      try { 
       console.log("instanciate plugin type '" + pluginType+"'"); 
       $plugin[pluginType](); 
      } catch (e) { 
       console.error("Cannot instanciate plugin '"+pluginType+"'"); 
      } 
      }); 
     } 
    }); 
}); 

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

create fooPlugin 
Instanciate plugin type 'fooPlugin' 
Cannot instanciate plugin 'barPlugin' 
create extendedPlugin 
create barPlugin 

И я ожидаю:

create fooPlugin 
Instanciate plugin type 'fooPlugin' 
create extendedPlugin 
create barPlugin  
Instanciate plugin type 'barPlugin' 

Я полагаю, что это плагин организация, которая несет ответственность за это. Они используют следующий:

AbstractPlugin 
    |_FooPlugin 
    |_ExtendedPlugin 
     |_BarPlugin 

Все мои плагины имеют базовую структуру приходит из abstractPlugin (определенный в файле /js/shared/abstract.js):

/** 
* abstractPlugin widget plugin definition 
* This plugin define base structure for all plugins used 
*/ 
define(['jquery', 'jquery/ui'], function($) { 
    'use strict'; 
    $.widget('ns.abstractPlugin', { 
     _create: function() {} 
    }); 
}); 

Foo плагин (определен в /js/foo/foo.js файле) наследуют непосредственно из abstractPlugin:

/** 
* fooPlugin widget plugin definition 
*/ 
define(['jquery', 'jquery/ui', 'abstractPlugin'], function($) { 
    'use strict'; 
    $.widget('ns.fooPlugin', { 
     _create: function() { 
      console.log('create fooPlugin'); 
     } 
    }); 
}); 

Но BarPlugin (определено в файле /js/bar/bar.js) наследуют от промежуточного плагин, называется extendedPlugin (определяется в/j s/общий/extended.js файл):

/** 
* extendedPlugin widget plugin definition 
*/ 
define(['jquery', 'jquery/ui', 'abstractPlugin'], function($) { 
    'use strict'; 
    $.widget('ns.extendedPlugin', $.ns.abstractPlugin, { 
    _create: function() { 
     console.log('create extendedPlugin'); 
    } 
    }); 
}); 

Bar содержание плагина заключается в следующем:

/** 
    * Bar widget plugin definition 
    */ 
define(['jquery', 'jquery/ui', 'extendedPlugin'], function($) { 
     'use strict'; 
     $.widget('ns.barPlugin', $.ns.extendedPlugin, { 
    _create: function() { 
     console.log('create barPlugin'); 
    } 
     }); 
}); 

Согласно с некоторыми ответами, доступных на этом сайте, требуют используется для немедленного использования, определяют как используется для последующего использования. Поэтому мой код должен быть в порядке.

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

Конфигурация requirejs В данном примере используется следующая одна:

var config = { 
    map: { 
     '*': { 
      abstractPlugin: 'js/shared/abstract', 
      fooPlugin: 'js/foo/foo', 
      extendedPlugin: 'js/shared/extended', 
      barPlugin: 'js/bar/bar', 
      container: "js/container" 
     } 
    } 
} 

Спасибо заранее для каждого вида наконечника вы можете предоставить мне.

С уважением

Answer 1

я не нашел время, чтобы извлечь код и попробовать его в любом jsfiddler, но вы, возможно, отсутствует «abstractPlugin» определены в виджете Bar.

что-то вроде этого. Возможно стоит попробовать?

/** 
* Bar widget plugin definition 
*/ 
define(['jquery', 'jquery/ui', 'abstractPlugin', 'extendedPlugin'],   
function($) { 
    'use strict'; 
    $.widget('ns.barPlugin', $.ns.extendedPlugin, { 
     _create: function() { 
     console.log('create barPlugin'); 
    } 
    }); 
});