jqueryプラグインの継承とrequirejs

Question

requirejsでいくつかのjqueryuiプラグインをロードするAPIを定義したいとします。ロードするプラグインの 定義は、データノードを介して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中）、次の1：コードソース：

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

しかし/js/bar/bar.jsファイルで定義されてBarPlugin（）は、中間プラグインから継承し、（定義された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'); 
    } 
     }); 
}); 

、定義、すぐに使用されて使用されている必要後で使用するために使用されます。だから私のコードは大丈夫です。

私の質問は：どのように私はプラグインの依存関係もすべて読み込まれることを確認することができますか？この例で使用

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