Here is what I’ve been using to make my JavaScript more modular and testable. I’m using JQuery’s promises and the Revealing Module Pattern.
I got the idea for the DataServices from John Papa's Pluralsight course on Knockoutjs, but modified it to work with promises, instead of passing in the callback as a parameter.
// DataService example: dataService.UiDataService = (function (ajaxService) { 'use strict'; var webServiceUrl = "/api/UiApi/", /** * @brief Get all the components from the service. */ getComponents = function (success) { ajaxService.AjaxGetJson(webServiceUrl + "GetComponents", true, success, function (errorMessage) { ajaxService.CommonFailHandling(errorMessage + " in GetComponents"); }); }; return{ GetComponents: getComponents; }; });
// Ajax Service example dataService.AjaxService = (function (window, $) { 'use strict'; /** * @brief Get JSON from the service and return a promise. * @param url The url for the request. * @param cache bool to cache the request. * return a promise. */ ajaxGetJsonAsync = function (url, cache) { return $.ajax({ type: "GET", url: url, dataType: "json", accepts: { json: "application/json" }, cache: cache === undefined? false: cache, statusCode: { 401: function { // un-authorized, the session timed out // re-direct to the login page window.location = "/?ReturnUrl=" + window.location.pathname; } } }); }, /** * @brief Post the JSON data to the url and return a promise. * @param url The url to post to. * @param data The JSON data to post. * @param success The callback to call on success. * @param fail The callback to call on failure (400 or 500 errors from the service). * * @return The promise. */ ajaxPostJsonAsync = function (url, data) { return $.ajax({ type: "POST", url: url, data: data, dataType: "json", contentType: "application/json", statusCode: { 401: function { // un-authorized, the session timed out // re-direct to the login page window.location = "/?ReturnUrl=" + window.location.pathname; } } }); }, /** * @brief Delete * @param url The url with the item id as a query string. * @param success The callback to call on success. * @param fail The callback to call on failure (400 or 500 errors from the service). */ ajaxDeleteAsync = function (url) { return $.ajax({ type: "DELETE", url: url, statusCode: { 401: function { // un-authorized, the session timed out // re-direct to the login page window.location = "/?ReturnUrl=" + window.location.pathname; } } }); }; return { AjaxGetJsonAsync: ajaxGetJsonAsync, AjaxDeleteAsync: ajaxDeleteAsync, AjaxPostJsonAsync: ajaxPostJsonAsync, CommonFailHandling: commonFailHandling }; }(window, $));
Update 5/8/2013 ~ This post shows using the promises. If you upgrade to jQuery 1.9.1 + then make sure you use this instead of the call backs. The jQuery post page says "Deprecation Notice: The jqXHR.success, jqXHR.error, and jqXHR.complete callback methods introduced in jQuery 1.5 are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done, jqXHR.fail, and jqXHR.always instead."