2

ここでRequireJSを初めて使用し、構造に採用する方法を学ぼうとしています。今のところ、私は次のような構造を作成することができました

ddd

上の画像は私のコードの構造を示しています。フォルダ「my」にはすべてのモジュールが含まれているはずですが、各モジュール内に独自のmodels.js、views.jsを記述して、後でbackbone.jsで使用する予定です。

この時点で、次のようないくつかの質問があります

  1. 構造を見ることで、それが良いアイデアなのか、それとも私が再考すべきなのかを誰かが知ることができますか？

2番目の質問は、モジュールの条件付きロードをどのように管理する必要があるかに関するものです。以下は私のconfig.jsファイルです

require([
        "jquery",
        "libs/jquery-ui/js/jquery-ui-1.9.0.custom.min",
        "libs/bootstrap/js/bootstrap.min",
        "my/base/module",
        "my/vehicle/module"],

    function($, ui, bootstrap, base, vehicle) {
        //plugins have been loaded.
        base.initialize();
        vehicle.initialize();

});

閲覧中にモジュール車両をロードする方法、またはアカウントを閲覧しているときにモジュールアカウントをロードする方法がまだわかりません。バックエンドはdjangoを使用して開発されており、モジュールごとにいくつかのconfig.jsファイルを作成できますが、これが正しいアプローチであるかどうかはわかりません。

4

2 に答える 2

1

requireJS の本質はモジュール化です。スクリプトをロードする場合は、パス構成を rquireJS 構成セクションに入れる必要があります。ただし、ファイルの条件付き使用/ロードが必要な場合。次に、コードを define module にラップする必要があります。ややこのように

require.config({

paths:
{
    jquery: 'libs/jquery/jquery-1.7.2.min',
    jqueryui: 'libs/jquery/jquery-ui-1.8.20.min',
    bootstrap: 'libs/bootstrap/bootstrap.min',
},
shim: {
  'underscore': {
    exports: '_'
  },    
  'bootstrap': {
    deps: ['jquery'],
    exports: 'jquery'
  }
}


});



require(['app/jquery.app','jquery.bootstrap'], function (AppRouter) {
var app_view = new AppRouter;
}

app/jquery.app は、アプリケーションの開始点である必要があります。

これを main.js ファイルに書き込んで、このように呼び出す必要があります

<script data-main="/Scripts/main" src="/Scripts/libs/require/require.js" type="text/javascript"></script>

開始点である jquery.app は次のようになります

define(['jquery','my/base/module','my/vehicle/module']],
      //plugins have been loaded.
    base.initialize();
    vehicle.initialize();
 });

define モジュールでは、 jquery ui と bootstrap にロードするものを何も定義していないことに注意してください。その理由は、jquery ui が独自にロードし、jquery 構文を使用するためです。そして、ブートストラップファイルは実際には jquery に依存しています。したがって、shim 構成を使用して、bootstrap.min.js をロードします。基本的に、構成と開始点はパス + 開始点を定義する必要があります。それが作り方です。

于 2012-10-20T05:32:32.823 に答える
1

これは、Python Django フレームワーク内で JQuery を使用して RequireJS をセットアップする方法です。ベースの最上位 baset_site.html には、「head」タグの間に次の require.js 構成コードがあります。

<script>
    requirejs.config({
        baseUrl: "{% static '' %}",
        paths: {
            jquery: './js/jslibs/jquery-1.9.1',
            jqm: './js/jslibs/jquery.mobile-1.4.0',
            ajax_redirect: './js/ajax_redirect',
            make_filt_sel: './app_namespace/js/make_filt_sel'
        },
        shim: {
            "jquery": {
                exports: '$',
            },
            "jqm": {
                deps: ['jquery'],
                exports: '$.mobile'
            },
            "make_filt_sel": {
                deps: ['jquery', 'jqm'],
                exports: 'make_filt_sel'
            }
        }
    });

</script>

{% block header_scripts %}{% endblock header_scripts %}

ここに私の ajax_redirect.js があります

/*
    JQuery Ajax typically does not redirect in Django. Need middleware to
    setup "class AjaxRedirect(object):" to fix redirection.
    Reference:
        http://hunterford.me/how-to-handle-http-redirects-with-jquery-and-django/
*/

(function ( root, doc, factory ) {
    if ( typeof define === "function" && define.amd ) {
        // AMD. Register as an anonymous module.
        define( ['jquery'], function () {
            factory();
        });
    } else {
        // Browser globals
        factory();
    }
}( this, document, function ( ) {

    $(document).ajaxComplete(function(e, xhr, settings){
        if (xhr.status == 278){
            window.location.href =
                xhr.getResponseHeader("Location")
                    .replace(/\?.*$/, "?next="+window.location.pathname);
        }
    });

}));

次に、通常、継承されたテンプレートで次のように「ブロック header_scripts」をセットアップします。

{% block header_scripts %}
    {{ block.super }}

    <script>

        if ( typeof define === "function" && define.amd ) {
            // AMD {# Configure requirejs.config in base_site.html #}
            require(["./app_namespace/js/module_namespace/js_module"]);
        } else {
            // No AMD
            $.ajax({
                async:false,
                type:'GET',
                url: "{% static "app_namespace/js/make_filt_sel.js" %}",
                data:null,
                dataType:'script'
            });

            $.ajax({
                async:false,
                type:'GET',
                url: "{% static "app_namespace/js/module_namespace/js_module.js" %}",
                data:null,
                dataType:'script'
            });
        }

    </script>

{% endblock header_scripts %}

依存関係のある js_module.js を設定する例を次に示します。

(function ( root, doc, factory ) {
    if ( typeof define === "function" && define.amd ) {
        // AMD. Register as an anonymous module.
        define( ['jquery', 'jqm', 'ajax_redirect', 'make_filt_sel'], function () {
            factory();
        });
    } else {
        // Browser globals
        factory();
    }
}( this, document, function ( ) {
    // A bunch of code
    $.mobile.document.on( "pagebeforecreate", function(e){
        // a bunch of code
        // Shorthand for $( document ).ready()
        $(function(){
            // a bunch of code
        }); // end of $( document ).ready()
    }); // end of $(document).on( "pagebeforecreate",

})); // end of (function ( root, doc, factory )
于 2015-02-04T18:09:51.337 に答える