Return to Question

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 etc.

/** SENCHA SRC IMAGE FALLBACK ***************************************
 *
 * Author: Josh Harrison (http://wwwjoshharrison.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();
      };
      
      img.src = this.$imgs[0].getAttribute("src");
    },
    
    fallback_to_local_srcs : function() {
      var t = this;

      this.$imgs.each(function() {
        this.setAttribute("src", this.getAttribute("src").replace(t.sencha_path_regex, ""));
      });
    }

  };
  
  window.SenchaSRCFallback = SenchaSRCFallback;

})(window, jQuery);

// Example usage:

// Instantiate the fallback
var senchafallback = new SenchaSRCFallback().init();

// Listen for failure like this:
senchafallback.onsenchafailure = function() {
    console.log("It failed.");
    // log failure event in google analytics, etc
};

Github repo here.

jsfiddle with test case prepared for you here.

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();
      };
      
      img.src = this.$imgs[0].getAttribute("src");
    },
    
    fallback_to_local_srcs : function() {
      var t = this;

      this.$imgs.each(function() {
        this.setAttribute("src", this.getAttribute("src").replace(t.sencha_path_regex, ""));
      });
    }

  };
  
  window.SenchaSRCFallback = SenchaSRCFallback;

})(window, jQuery);

// Example usage:

// Instantiate the fallback
var senchafallback = new SenchaSRCFallback().init();

// Listen for failure like this:
senchafallback.onsenchafailure = function() {
    console.log("It failed.");
    // log failure event in google analytics, etc
};

Many thanks in advance.

This is my first open-sourced bit of code, so am keen to get feedback on style, appropriateness, portability etc. :)

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 etc.