jquery / jqueryui / jquerymobile在backbone.js应用程序中加载速度不够快
本地应用程序运行良好，一旦它在服务器上大约50％的时间jquery库加载速度不够快，应用程序会抛出一堆未定义的js错误，因为任何jquery相关。 我使用的是带有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(); }); }); 虽然我没有使用underscore ， requireJS在特定页面需要时，还需要大量的插件才能被requireJS获取。 花了一段时间让它与Jquery Mobile一起工作，但这就是我的应用程序运行的方式（而且我没有再收到任何错误，所以随意复制）
1）将requirejs添加到页眉
2）我正在使用overrides.js ，它有：
// pre-sets $(document).bind("mobileinit", function(){ $.mobile.autoInitializePage = false; });
你需要这个，因为jquery mobile将触发BEFORE require.js （mobileinit与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。
因此，在现场网站中，您应该拼接和缩小资源。 在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 })
您应该看看垫片选项，允许您按顺序加载模块。
您还可以使用require.js优化器将所有文件连接成一个。