patternjavascriptMinor
Graceful JavaScript fallback for external web service failure
Viewed 0 times
javascriptfallbackserviceforwebexternalfailuregraceful
Problem
I use the src.sencha.io service to resize images on the fly according to device width, saving lots of bandwidth on mobiles etc.
Sometimes the service fails randomly with a 503 error, so a fallback is needed. I've written this JS to fallback to "non-sencha" urls, and emit an error event, if the first image requested through sencha fails.
This is my first open-sourced bit of code, so am keen to get feedback on my:
Even just confirming whether it's good would be helpful, as I don't have any formal programming training to be confident.
Github repo here.
jsfiddle with test case prepared for you here.
``
*
*/
;(function(window, $) {
var SenchaSRCFallback = function() {
this.sencha_path_identifier = '.sencha.io/';
this.sencha_path_regex = /http:\/\/src[1-4]?\.sencha\.io\//i;
this.$imgs = null;
};
SenchaSRCFallback.prototype = {
init : function() {
this.$imgs = $("img[src*='" + this.sencha_path_identifier + "']");
if(this.$imgs.length) {
this.test_sencha_availability();
}
return this;
},
test_sencha_availability : function() {
var t = this, img = new Image();
img.onerror = function() {
$(t).trigger("senchafailure");
t.fallback_to_local_srcs();
Sometimes the service fails randomly with a 503 error, so a fallback is needed. I've written this JS to fallback to "non-sencha" urls, and emit an error event, if the first image requested through sencha fails.
This is my first open-sourced bit of code, so am keen to get feedback on my:
- code correctness
- whether this prototype-based design pattern is appropriate
- alternative better patterns
- comment/code clarity
Even just confirming whether it's good would be helpful, as I don't have any formal programming training to be confident.
Github repo here.
jsfiddle with test case prepared for you here.
``
/ SENCHA SRC IMAGE FALLBACK ***
*
* Author: Josh Harrison (http://www.joshharrison.net/)
* URL: https://github.com/ultrapasty/sencha-src-image-fallback
* Version: 1.0.0
* Requires: jQuery
*
* Tests to see if the src.sencha.io service is down, and if so,
* falls back to local images, by removing the sencha domain
* from the src.
*
* Can be instantiated with new SenchaSRCFallback().init();
* Or var instance = new SenchaSRCFallback().init();
*
* Emits the event senchafailure if sencha fails.
* Listen with instance.onsenchafailure = func;`*
*/
;(function(window, $) {
var SenchaSRCFallback = function() {
this.sencha_path_identifier = '.sencha.io/';
this.sencha_path_regex = /http:\/\/src[1-4]?\.sencha\.io\//i;
this.$imgs = null;
};
SenchaSRCFallback.prototype = {
init : function() {
this.$imgs = $("img[src*='" + this.sencha_path_identifier + "']");
if(this.$imgs.length) {
this.test_sencha_availability();
}
return this;
},
test_sencha_availability : function() {
var t = this, img = new Image();
img.onerror = function() {
$(t).trigger("senchafailure");
t.fallback_to_local_srcs();
Solution
I like the idea, from a once over:
This is something I might borrow at some point.
- Since you use an IIFE I would declare
sencha_path_identifierandsencha_path_regexoutside of the constructor, then you can access them without specifyingthis.
- I would do either
function SenchaSRCFallback() {orvar SenchaSRCFallback = function SenchaSRCFallback() {, anonymous functions are a pain to troubleshoot
- Why do you require the caller to call
init()? In my mind this call should be done within the constructor.
This is something I might borrow at some point.
Context
StackExchange Code Review Q#43507, answer score: 2
Revisions (0)
No revisions yet.