虽然我没有使用,但我还需要在特定页面上需要时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 中运行良好。