0

私は見てきましたがrequire.js、ウィジェットシステムでの使用方法について少し混乱しています。

私のウィジェットシステムでは、基本的に、データベースに保存されるウィジェットをユーザーが選択できるようになっています。

そのため、ユーザーが次回の訪問時にページをロードすると、選択したウィジェットのみが表示されます。実際には、すべてのウィジェットのすべてのhtmlとjavascriptをロードしてから不要なものを隠すのではなく、表示されたウィジェットに必要なhtmlとjavascriptのみをロードします。

私が混乱しているのは、これをrequire.jsで行う方法です

以下の require.js コードを動的に生成する必要がありますか? ユーザーが保存した場合、widget_1, widget_5 and widget_70動的に JavaScript を生成する必要があると思いますか?

require(['widget_1','widget_5','widget_70'], function(w1, w5, w70){
    // then do something here?
});

require 行は、SQL クエリに基づいて動的に生成されるはずですか?

したがって、次回表示するために保存するウィジェットを 1 つだけ選択した場合は、次のものが得られます。

require(['widget_90'], function(w90){
    // then do something here?
});

それは私がしなければならないことですか？

4

2 に答える 2

2

以下のように、モジュールが頻繁に依存するライブラリへのパスを常に定義します。

<script data-main="scripts/main" src="scripts/require.js"></script>

ファイル: scripts/main.js

require.config({
    paths: {
        jQuery_1_7_2: 'lib/jquery.1.7.2',
        underscore: 'lib/underscore',
        .....
        .....
    }
});

注: 以下のように、モジュール内にライブラリを含め、オブジェクトとして返す必要があります。

ファイル: lib/jquery.1.7.2.js

define([ 'lib/jquery/jquery.1.7.2.min' ], function() {

    return jQuery.noConflict(true);

});

モジュラー アプローチに従わない他のライブラリについても、同じアプローチに従うことができます [AMD 仕様]

注: ライブラリ モジュールを定義する上記の手順は、shim 機能を使用することで回避できます。

ページは動的であるため、どのモジュールがロードされるかはわかりません。

複数の require() 呼び出しを呼び出して、モジュールをロードできます。requirejs はスクリプトを非同期的にロードするため、以下のアプローチによってページのパフォーマンスが損なわれることはありません。

HTML ビューでの Module-1

<html>..
<div id="module_1">
    //contents of module 1
</div>
<script type="text/javascript">
    require(["scripts/widgets/module_1"], function( module_1 ){
        module_1.init();
    })
</script>
..</html>

ファイル: scripts/widgets/module_1.js

define(["jQuery_1_7_2","underscore"], function($, _){
    // Module functionality goes here
    return {
        init: function(){
            // Module initialiser
        }
    }
});

モジュール 2 in-in HTML ビュー

<html>..
<div id="module_2">
    //contents of module 2
</div>
<script type="text/javascript">
    require(["scripts/widgets/module_2"], function( module_2 ){
        module_2.init();
    })
</script>
..</html>

ファイル: scripts/widgets/module_2.js

define(["jQuery_1_7_2","underscore"], function($, _){
    // Module functionality goes here
    return {
        init: function(){
            // Module initialiser
        }
    }
});

DOM ロード後にモジュールを初期化しても構わない場合は、controljsを使用してスクリプト タグの MIME タイプを変更できます。ページのパフォーマンスに大きな違いはないと思います。

于 2013-01-07T12:14:51.813 に答える
0

私が想定し：

  • require config のどこかにウィジェットへのパスを定義しました
  • ウィジェットはサンドボックス化されています (依存関係なしで実行できます)
  • アプリケーションはウィジェットなしで実行できます

サーバー上で配列を生成し、それを js に入力して (インライン スクリプトなど)、何らかの app.ready イベントを次のように発行できます。

<script>
require(/*array from the server*/, function(){
    // publish application ready event
});
</script>
于 2013-01-07T10:48:41.040 に答える