24

RequireJSモジュールでサーバーデータを渡すための好ましい方法はありますか？現在の実装は、次のコードスニペットのようになります。'page'オブジェクトを使用してサーバー/動的データを保持し、それをメインブートストラップに渡します。（現時点では、ajaxを使用して依存関係を設定する必要はありません）

サーバーページから：

<script data-main="scripts/main" src="scripts/require-jquery.js"></script>
<script type="text/javascript">
  define("page", function () {
      return { guid: "<%=Guid.NewGuid() %>" };
    });
</script>

main.js

require(["jquery", "jquery.alpha", "page"], function ($, alpha, page) {
    alpha.initialize(page);
});

jquery.apha.js

define(["jquery", "page"], function ($, page) {
    return {
        initialize: function () {
            console.log(page.guid);
            //logs guid as expected
        }
    }
});
4

6 に答える 6

4

私は通常次のようなことをします（バックエンドでPHPを使用しますが、何でも機能します）：

<script src="scripts/require-jquery.js"></script>
<script>
require(['scripts/main'], function(App) {
  var myApp = new App({
    param1: <?=json_encode($param1);?>,
    param2: <?=json_encode($param2);?>
  });
});
</script>

そして、私のモジュールを設定を行うものとして定義します。

define(['jquery'], function($) {
  var App = function(options) {
    this.options = options;
    //blabla
  }

  // add some stuff to App.prototype maybe

  // and finally...
  return App;
});
于 2012-05-31T06:01:48.017 に答える
3

RequireJSは、JavaScriptをモジュール化する手段であるため、サーバーデータの処理方法については何も述べていません。したがって、その点ではデファクトスタンダードはなく、RequireJSをjson、ajax、php、埋め込みxmlなどと好きなように組み合わせることができます。

2つのアプローチ

これを行うには、一般的に2つの方法があります。

  1. サーバーから必要なデータを取得し、ユーザーがアクセスできるようにする「dao」または「service」モジュールをモデル化します（現在のアプローチと同様、以下のコードサンプルを参照）
  2. すべてのモジュールがアクセスできるグローバルオブジェクトを定義します

最初のアプローチは、関数にパラメーターを追加します。

2つ目は、グローバルアクセスを提供します。これには、データのフェッチを開始するための独自の初期化コードも必要です。

それは個人的な好みとあなたが持っているこれらの「dao」の数に帰着します。複数ある場合は、daoモジュールごとに新しいパラメーターが必要になるため、汚染される可能性があります。その場合、それらをグローバルにすることはよりクリーンに思えます。

あなたのアプローチの問題

ただし、現在のアプローチには問題があります。Pag​​eモジュールを定義として使用している場合（define()の代わりにを使用require()）、それに依存するオブジェクトごとに定義モジュールが作成されるためです。これは、同じページ内で複数の呼び出しが発生する可能性があることを意味します。代わりに以下を使用してください：

// in seperate file page.js:
require([], function () {
  return { guid: "<%=Guid.NewGuid() %>" };
});

このように、RequireJSはページをモジュールとして認識します。これは、ページが別個のファイルであり、ページごとに1回だけサーバーに送信されるためです。

于 2012-05-30T10:02:08.477 に答える
1

JSONオブジェクトがある場合は、コメントに記載されている@yvesのようなAJAX呼び出しを行います。

あなたがそれをしたくない場合は他のオプションがあります。スクリプトタグのデータ属性としてGUIDを配置できます。また、ローダーjsファイルを動的にして、構成がその中に設定されるようにすることもできます。

正直なところ、私はAJAX呼び出しを行うだけです。

于 2012-04-29T23:56:56.660 に答える
1

私は今日から始めたばかりでRequireJS、これ以前は、次のようにページの読み込み時に実行したい関数を呼び出すために使用されていました。

<script>
my_method(<?php echo json_encode( array('opt1'=>true, 'opt2'=>false) );?>);
</script>

@ ziad-saabとして、私ができる最も類似したことは、data-main属性を使用せず、インラインモジュールを定義することであることがわかりました。

<script src="path/to/require.js"></script>
<script>
require(['my/module'],function(module){
    module.my_method(<?php echo json_encode( array('opt1'=>true, 'opt2'=>false) );?>); 
});
</script>

このdata-main属性はRequireJS、require.jsとすべてのモジュール依存関係がロードされるとすぐにモジュールを実行するように指示します。PHPそれ（モジュール）を省略し、それをインラインモジュールとして定義するだけで、変数をスローできます。

このように、構成を保持するモジュールを処理する必要がなく、requirejsを使用するための移行が私の環境で簡単になります。

于 2013-10-02T20:23:17.673 に答える
1

いくつかの答えがわかりにくいことがわかったので、それを機能させるために従う必要のある正確な手順は次のとおりです。

私の場合、私はこのようにしています：

index.php

<script src="/js/crm/lib/require.js"></script>
<script>
    // this is so called "named define"
    define('dto', {
        page: JSON.parse('{{ pageDTO | json_encode }}'),
        flashMessages: JSON.parse('{{ this.flashSession.getMessages() | json_encode }}')
    });
    // note we are using relative path to public dir here
    // order is also important, we need to define our dto module before bootstraping the application
    require(['/js/crm/app.js']);
</script>

app.js

"use strict";

require.config({
    // ...
    baseUrl: '/js/crm/lib',
    paths: { app: '../app' }
});

require(['app/bootstrap']);

some-module.js

（この場合、app / bootstrapで必要なlayout.js）

"use strict";

define([
    'dto',
    'jquery',
    'lodash'
], function (dto, $, _) { 
    console.log(dto);
});

アプリケーションをブートストラップするために使用することに注意data-mainしてください。requireを明示的に呼び出さなくても機能する可能性がありますが、競合状態が原因です。何らかの理由でdtoを定義すると、requirejsがメインモジュールを呼び出すのにかかる時間よりも長くかかる場合、スクリプトがクラッシュします。私たちはそれに依存したくないので、私たちはすべて自分たちで行います:)

したがって、これは機能しません（時々）：

<script data-main="/js/crm/app.js" src="/js/crm/lib/require.js"></script>
<script>
    // this is so called "named define"
    define('dto', {
        page: JSON.parse('{{ pageDTO | json_encode }}'),
        flashMessages: JSON.parse('{{ this.flashSession.getMessages() | json_encode }}')
    });
</script>
于 2017-08-31T07:45:45.373 に答える
0

ウィンドウグローバル変数を使用して、サーバーデータをjsアプリケーションに転送します。

 <script type="text/javascript">
    window.server_data=parseJSON(<?php echo json_encode(array ("server_data"=>"it works!"));?>);
 </script>
 <script data-main="js/application" src="js/lib/require.js"></script>

application.js内：

requirejs(["app/main"],function (MyApp){
     console.dir(window.server_data); //all our application need this global variable
    var myApp=new MyApp();
    myApp.init(window.server_data); //and your application now has server data
});
于 2013-09-20T07:14:45.707 に答える