1

ローカルでは、アプリはうまく機能します.50%の時間でサーバー上にあると、jqueryライブラリが十分に速くロードされず、アプリはjqueryに関連するものに対して未定義のjsエラーを大量にスローします. jquery、jquery mobile、jquery ui、required.js で backbone.js を使用しています。require js ファイルは正しいように見えますか、それともアプリを起動する前にスクリプトが読み込まれたかどうかを確認する方法はありますか?

require.config({

paths: {
    jquery: 'libs/jquery/jquery-1.7.2',
'jquery.ui':'libs/jquery-ui/jquery-ui-1.8.14.custom',
    'jquery.mobile-config': 'libs/jqm/jquery.mobile-config',
    'jquery.mobile': 'libs/jqm/jquery.mobile-1.1.1',
    underscore: 'libs/underscore/underscore-1.3.3',
    backbone: 'libs/backbone/backbone-amd-0.9.2',
text: 'libs/require/text',
    templates: '../templates'
},

shim: {
    'underscore': {
        exports: "_"
    },
    'backbone': {
        deps: ['jquery','underscore'],
        exports: 'Backbone'
    },
    'jquery.ui': {
        deps:['jquery']
    },
    'jquery.mobile-config': {
        deps: ['jquery']
    },
    'jquery.mobile': {
        deps:['jquery','jquery.mobile-config']
    },
    'bundles': {
        deps:['jquery','jquery.mobile','validate','jquery.ui']
    },
},

waitSeconds: 5

});

require([
    'app'
], function(App) {
    $(function() {
        clearInitialLoader();
        App.initialize();
    });
});
4

3 に答える 3

2

私は使用していませんが、特定のページで必要なときunderscoreにフェッチするプラグインも大量に必要です。requireJSJquery Mobileで動作するようになるまでしばらく時間がかかりましたが、これが私のアプリケーションの実行方法です(エラーが発生しなくなったので、自由にコピーしてください)

1)requirejsページヘッダーに追加

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

2)私はこれを持っているを使用しoverrides.jsています:

// pre-sets
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
});

これが必要なのは、jquery mobileBEFORE require.js(mobileinitとdocready)がトリガーされるためです。これが、おそらくすべての問題の理由です= JQMは、他のすべてがロードおよびレンダリングされる前に実行を開始するため、アプリケーションコントローラー(my app.js)から手動でJQMをトリガーする必要があります。

3)私のmain.js設定

var IS_LOCAL  = /(:\/\/localhost|file:\/\/)/.test(document.location.href);     

requirejs.config({  
         waitSeconds :  (IS_LOCAL? 2 : 45)
      ,  baseUrl:       "../js"
    //,  enforceDefine: true    
      , paths: { 
              app:          'app'
            , overrides:    'overrides'
            , jquery:       'libs/jquery/jquery.min'
            , jqm:          'libs/jquery-mobile/jquery-mobile.min'
            , multiview:    'services/multiview/multiview.min'
            , respond:      'services/respond/respond.min'
            , klass:        'services/klass/klass.min'
            }
      , shim: {
              'overrides':        { deps: ['jquery'] }
            , 'klass':            { deps: ['jquery'] }
            , 'jqm':              { deps: ['jquery'], exports: 'mobile' }
            ,  'services/multiview/multiview.min' :           { deps: ['jquery', 'jqm'] }
            ,  'services/add2home/add2home.min' :             { deps: ['jquery'] }
            ,  'services/datatables/datatables.min' :         { deps: ['jquery'] }
            ... more ... 
            ,  'services/respond/respond.min' :               { deps: ['jquery'] }
                }
        });

    requirejs([ 'overrides', 'jquery', 'jqm', 'multiview', 'respond', 'app'], 
        function( $, overrides, mobile, multiview, respond, App){ 
            App.start();                
            });

4)次にapp.js、アプリケーションを実行し、app.js (config filesすべてのプラグインに)が必要なものがあります。このようにして、オンデマンドでロードできます。このように見えます:

define([], function(){
    var start = function() {
        require([ 'overrides', 'jquery', 'jqm','multiview', 'respond' ],function() {

        // your magic goes here...

        // request a plugin:
        $(document).on('pagebeforeshow.add2home', '#login', function() {
            // add2Home - trigger once and lock
            var dom = $('html');
            if ( dom.jqmData('bound') != true ) {
                dom.jqmData('bound', true);
                require(['services/addtohome/app'], function (App) {
                    App.render();
                    });
            };
         });

        // don't forget to trigger JQM manually
        if ( $.mobile.autoInitializePage == false){
            $.mobile.initializePage();
        }
        }); // end require
    } // end start
    return {"start":start};
});

5)これによりapp.js、すべてのプラグイン構成を含むプラグイン構成ファイルが呼び出されます。このように見えます:

define(['services/addtohome/app', 'services/addtohome/addtohome.min'], function( app, addtohome ) {
function render() {

    if ('standalone' in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion)) { 
        var addToHomeConfig = { 
            touchIcon:true,
            animationIn: 'bubble',
            animationOut: 'drop',
            returningVisitor: 'true',
            expire: '10',       
            }; 
        };
    };
return {
    render:render
    };          
});

もちろん、必要なスクリプトが多いほど時間がかかりますが、このセットアップでは、圧縮+gzip圧縮された132kのJavascriptを正常にプルできます。

于 2012-11-09T15:01:54.603 に答える
1

したがって、ライブサイトでは、リソースをステッチして縮小する必要があるのはほぼ当然のことです。AMD セットアップにはリソースが多すぎて、実際にライブ サイトですべてのリソースをオンデマンドでダウンロードしようとすることはできません。AMD モジュールは、展開ソリューションではなく、開発時の利便性です。

モジュールの注文に関しては、エクスポートを使用してもうまくいきませんでした。私たちが見つけた最良の方法は、AMD ラッパーで外部依存関係をラップすることです。はい、これは、外部ライブラリを更新する場合にやり直す必要があることを意味しますが、実際には思ったほど大したことではありません。

まず、ライブラリをラップします

//underscore.js file
define(function(){
  //underscore code
  return underscore
})

次に、どこにでも含めることができ、順序保証された AMD ロードのすべての利点を得ることができます。

//backbone.js (or any other file that wants underscore)
define([underscore],function(_){
  //backbone code
  return Backbone
})
于 2012-11-09T03:27:41.230 に答える
0

モジュールを順番にロードできるようにするshim オプションを確認する必要があります。

また、require.js オプティマイザーを使用して、すべてのファイルを 1 つに連結することもできます。

于 2012-11-08T23:40:06.417 に答える