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() {} 
    }); 
}); 

美孚插件（定义在/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 widget plugin definition 
    */ 
define(['jquery', 'jquery/ui', 'extendedPlugin'], function($) { 
     'use strict'; 
     $.widget('ns.barPlugin', $.ns.extendedPlugin, { 
    _create: function() { 
     console.log('create barPlugin'); 
    } 
     }); 
}); 

一些可以从这个网站根据答案，需要使用立即使用，则定义用于以后的使用。所以我的代码应该没问题。

所以我的问题是：我如何确保当我使用require时，所有的插件依赖也将被加载？

在这个例子中使用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 widget plugin definition 
*/ 
define(['jquery', 'jquery/ui', 'abstractPlugin', 'extendedPlugin'],   
function($) { 
    'use strict'; 
    $.widget('ns.barPlugin', $.ns.extendedPlugin, { 
     _create: function() { 
     console.log('create barPlugin'); 
    } 
    }); 
});