RequireJS依存関係を備えたリモートJQuery UIウィジェットを構築します

StackOverflow https://stackoverflow.com/questions/8811034

質問

他のいくつかのカスタムJavaScriptモジュールに依存するjQuery UIウィジェットを作成しました。ウィジェットの「_create」メソッド中に、requirejsを使用してこれらのモジュールを取得します。これは、消費者が私の「データメイン」プロパティを定義している場合、実際にうまく機能します。ただし、私の消費者が自分でrequirejsを使用している状況では、独自の「データメイン」プロパティを定義している場合、これは機能しません。

私はまったく異なるサーバーからウィジェットを介してスクリプトを挿入するためにrequirejsを使用しているため、これを扱うrequesjsの通常の方法でいくつかの問題に遭遇します。

  • まず、すべての消費者が私とまったく同じリソースを含むpackage.jsonを持っていると想定しない限り、package.jsonファイルを使用することはできません。それに加えて、私はDEV、テスト、プロダクトサーバーのURLを取得しています。
  • 次に、require.configを使用することはできません。サーバーの負荷中にbaseurlを設定します。使用しているすべてのものがすべて壊れている可能性があります。

私が機能している現在の実装では、消費者がデータメインの場所（外部サーバー）で要求するスクリプトリファレンスを追加する必要があります。次に、私のウィジェット（外部サーバー）にスクリプト参照を追加します。これは、私の会社の他の誰もrequirejsを聞いたことがないので、これはうまくいきます:)。 2番目に、すべてのコードを再利用可能なJavaScriptモジュールにバンドルする方法を表示し始めました。ソリューションは壊れています。

最終消費者は単一のJavaScriptウィジェットを単純に参照することができるのに対し、ソリューションを考え出したいと思っています。

これを行う方法についての提案はありますか？独自のバージョンのrequireを静的なデータメインでハッキングすることを考えましたが、複数のrequirejs libsを持つことができると仮定します。私はそれをするのが嫌いです...しかし、私は本当に良い方法を考えることはできません。

役に立ちましたか？

解決

これが私がやろうとしていることです...

いくつかのメモ：

  • 私はjQuery UIウィジェット工場パターンを使用しています（しかし、これは正確にはウィジェットではありません）
  • ウィジェットコードはリモートサーバーに存在し、消費者はそれを参照してください、ダウンロードしないでください
  • Widget依存関係をロードするためにRequireJSを使用しています
  • 消費開発者にとって最大の使いやすさが欲しいです

消費者がすぐにウィジェットのコンテキスト（$（selector）.mywidget）が_createメソッド内で自分の問題に取り組むことにしたように、jquery UIウィジェットをできるだけ早く読み込む必要があるためです。

このコードは基本的にrequirejsが存在しない場合にrequirejsをインストールし、それを使用して、前述のウィジェットが消費する必要がある一連の要件をインストールします。これにより、エンドユーザーがURLで「ウィジェット」スクリプトを参照できると想定できます。データ - レキル除去「同じ名前の属性、そしてリモート依存関係の完全なリストを取得します。

 _create: function () {
   var widget = this;
   widget._establish(widget, function () {
     widget._install(widget);
   });
 },

 _getBaseURL: function (scriptId, callback) {
   var str = $('script[data-requiremodule="' + scriptId + '"]').attr('src');
   if (callback) callback(str.substring(str.search(/scripts/i), 0));
 },       

 _require: function (requirementAry, baseUrl, callback) {
   require.config({ baseUrl: baseUrl });
   require(requirementAry, function () {
     if (callback) callback();
   });
 },

 _establish: function (widget, callback) {
   if (typeof require === 'undefined') {
     widget._getBaseURL(widget._configurations.widgetName, function (baseUrl) {
       var requireUrl = baseUrl + 'scripts/require.min.js';
       baseUrl = baseUrl + 'scripts/';
       $.getScript(requireUrl, function (data, textStatus) {
         widget._require(widget._configurations.requiredLibs, baseUrl, function () { 
           callback(textStatus); 
         });
       });
     });
   }
 },

ここに「_configurations」オブジェクトを表示していません...しかし、あなたはアイデアを得ます。これが私以外の誰かを助けることを願っています:)。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top