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'); 
    } 
    }); 
});