1

在本地,应用程序运行良好,一旦它在服务器上大约 50% 的时间 jquery 库加载速度不够快,并且应用程序会为任何与 jquery 相关的内容抛出一堆未定义的 js 错误。我正在使用带有 jquery、jquery mobile、jquery ui 和 required.js 的主干.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获取大量插件。requireJS花了一段时间让它与 Jquery 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 mobile会在之前触发require.js(mobileinit vs. docready),这可能是你所有问题的原因= JQM在其他所有东西加载和渲染之前开始运行,所以你必须从你的应用程序控制器手动触发JQM(我的app.js

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
    };          
});

当然,您需要的脚本越多,花费的时间就越长,但是这个设置在压缩 + gzipped 的 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 优化器将所有文件合并为一个。

于 2012-11-08T23:40:06.417 回答