文章/答案/技术大牛

发布

社区首页 >问答首页 >jquery/jqueryui/jquerymobile在backbone.js应用中加载速度不够快

问jquery/jqueryui/jquerymobile在backbone.js应用中加载速度不够快
EN

Stack Overflow用户

提问于 2012-11-09 07:38:02

回答 3查看 1.8K关注 0票数 1

在本地，这个应用程序运行得很好，一旦它在服务器上，大约50%的时间jquery库加载速度不够快，应用程序抛出一堆与jquery相关的未定义的js错误。我在jquery、jquery mobile、jquery ui和required.js中使用backbone.js。是否需要的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();
    });
});

jquery

jquery-ui

jquery-mobile

backbone.js

requirejs

回答 3

Stack Overflow用户

发布于 2012-11-09 23:01:55

虽然我没有使用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与docready)之前触发，这可能是您所有问题的原因= JQM在其他所有内容加载和呈现之前就开始运行，因此您必须从应用程序控制器(我的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
    };          
});

当然，你需要的脚本越多，需要的时间就越长，但是这个设置在compressed+gzipped 132k的Javascript中运行得很好。

票数 2

Stack Overflow用户

发布于 2012-11-09 11:27:41

因此，在一个实时站点中，你应该拼凑和压缩你的资源。在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
})

票数 1

Stack Overflow用户

发布于 2012-11-09 07:40:06

您应该看看允许您按顺序加载模块的shim options。

您还可以使用require.js optimizer将所有文件连接成一个文件。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13299816

复制

相似问题

问jquery/jqueryui/jquerymobile在backbone.js应用中加载速度不够快
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery/jqueryui/jquerymobile在backbone.js应用中加载速度不够快EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery/jqueryui/jquerymobile在backbone.js应用中加载速度不够快
EN