Im have a Single Page application, all javascript front end, backed api that uses php to access data, to which ajax calls to the controllers.
I want to bootstrap all my js libraries (the files that make up the app, mostly custom myApp.x.js files), inside a master js file(myApp.core.js), to which im asking what technology should i use for this(ajax, requirejs,the promsies im already using..etc). I am using some promise calls and ajax on some of my functionality and right now during my extensive implementation of promises im finding that certain core features of the app that were previously accwessible are now either not loaded yet when needed, or are being blocked by some other chain.
What i want to do is focus on the beautifully named method that i have on each of my js files, "init()
". I want to use an init to on each file to properly get my stuff initialized in order, and for clarity. So, for each file, i have an init. So say, for files coolApp.router (ajax promise backed API(speaks to php controllers)), coolApp.ui(jquery ui tweaks, based on data collected from router,etc..), coolApp.core(the stuff that i no longer have access to from coolApp.ui, in the first few seconds when i used to).
So right now im using assetic, and including them all,and they are all loaded into one big js file, core first, before the app is even loaded. so sometimes it plagues me how the core objects cant be available, then it dawns on me, its in the promise its not available, shit. i have to refactor some stuff?
This all boils back to init(). so in my init, i fire up the app, and make sure these objects are available. why then aren't they? something int he promise, but what if i add init to the chain, that's the idea im having right now.
note, alternate design pattern here..
//coolcoolApp.core.js
var coolApp = {},
Routing = window.Routing;
$(document).ready(function () {
coolApp.core.init();
});
(function (core, $, undefined) {
coolApp.core.logItType = 'js_generic';
coolApp.core.init = function(){
//init stuff here
};
coolApp.core.getEnv = function(){
coolApp.router.resetAjaxParams(); //get setup route
coolApp.router.ajax.url = Routing.generate('get_env'); //get environment
var promise = coolApp.router.callAPI()
.then(
function(env) {
return env.env;
}, function(rejectMessage){
console.log(rejectMessage);
}
);
return promise;
};
}( window.coolApp.core = window.coolApp.core || {}, jQuery ));
//coolcoolApp.router.js
var coolApp;
$( document).ready(function(){
coolApp.router.init(); //initialize
});
(function (router, $, undefined) {
coolApp.router.ajax = {};
coolApp.router.init = function(){
//init stuff here
};
coolApp.router.rsvpAjax = function (/*ajaxOpts*/){
var async,
promise = new window.RSVP.Promise(function(resolve, reject){
async = $.extend( true, {}, coolApp.router.ajax, {
success: function(returnData) {
resolve(returnData);
},
error: function(jqXhr, textStatus, errorThrown){reject(jqXhr);}
});
$.ajax(async); //make the call using jquery's ajax, passing it our reconstructed object, each and every time
});
return promise;
};
coolApp.router.callAPI = function (useAlt) {
var promise = coolApp.router.rsvpAjax();
if ( ! coolApp.router.ajax.url ) {
throw new error ("need ajax url");
}
return promise;
};
}(window.coolApp.router = window.coolApp.router || {}, jQuery));
//coolApp.ui.js
var coolApp;
$( document).ready(function(){
"use strict";
coolApp.ui.init();
});
(function (ui, $, undefined) {
coolApp.ui.showLoader = false;
coolApp.ui.bsEnv = null;
coolApp.ui.init = function(){
var watchElem, headerMeasurement;
coolApp.ui.setBootstrapEnvironment();
watchElem = $('#filterSelectedList');
$(watchElem).on('affixed-top.bs.affix', function(){
coolApp.ui.unsetContentTopMargin();
});
console.log(coolApp.core.symphEnv);
coolApp.core.getEnv()
.then(
function(env){
coolApp.core.symphEnv = env;
console.log('coolApp.core.symphEnv');
console.log(coolApp.core.symphEnv);
}
);
};
coolApp.ui.showLoader = function () {
setTimeout(function () {
$('.ajaxIndicator').removeClass('hidden');
}, 100);
};
}( window.coolApp.ui = window.coolApp.ui || {}, jQuery ));
What kind of trickery can i do to put these inits inside a promise run, and init all of them needed in the core file, for e.g., then no matter what all these core objects WILL be available through the lifespan of the rest of the coolApp.children objects
can somebody point me some examples to what im missing, or can be improved?
Aucun commentaire:
Enregistrer un commentaire