My snippets from JavaScript Web Applications

class.js

var Class = function (parent) {
  var klass = function () {
    this.init.apply(this, arguments);
  };

  if (parent) {
    var subclass = function () {};
    subclass.prototype = parent.prototype;
    klass.prototype = new subclass;
  }

  klass._super = klass.__proto__;
  klass.fn = klass.prototype;  // Shorter is sexier
  klass.fn.parent = klass;
  klass.fn.init = function () {};

  klass.extend = function (obj) {
    var i, extended = obj.extended;
    for (i in obj) {
      klass.fn[i] = obj[i];
    }
    if (extended) extended(klass);
  };

  klass.include = function (obj) {
    var i, included = obj.included;
    for (i in obj) {
      klass.fn[i] = obj[i];
    }
    if (included) included(klass);
  };

  /**
   * p.15
   */
  klass.proxy = function (func) {
    var self = this;
    return (function () {
      return func.apply(self, arguments);
    })();
  };

  klass.fn.proxy = klass.proxy;

  return klass;
};

var Person = new Class();

Person.include({
  init: function () {
    // This will be called when Person object gets instantiated.
  },
});

var japboy = new Person();

global-variables.js

/**
 * Importing global variables into local variables
 * It is bad habit to access global variables as it is, because it's slow to
 * find where the variable is. Local variables is always fast to access. So
 * make global variables to local variables as always.
 */

(function ($, exports) {
  // Import global `jQuery` object to local
  $.ajax(/* ... */);

  // Export local variable to global using `window` object
  exports.Foo = 'wem';
})(jQuery, window);

jquery-custom-event.js

jQuery.fn.tabs = function (control) {
  var element = this;
  control = $(control);

  element.delegate('li', 'click', function () {
    var tabName = $(this).attr('data-tab');
    element.trigger('change.tabs', tabName);
  });

  element.on('change.tabs', function (e, tabName) {
    element.find('li').removeClass('active');
    control.find('>[data-tab]').removeClass('active');
    control.find('>[data-tab="' + tabName + '"]').addClass('active');
  });

  var firstName = element.find('li:first').attr('data-tab');
  element.trigger('change.tabs', firstName);

  return this;
};

$('#tabs').trigger('change.tabs', 'users');

jquery-fsm.js

var Events = {
  bind: function () {
    if (!this.o) this.o = $({});
    this.o.bind.apply(this.o, arguments);
  },

  trigger: function () {
    if (!this.o) this.o = $({});
    this.o.trigger.apply(this.o, arguments);
  }
};

var StateMachine = function () {};

StateMachine.fn = StateMachine.prototype;

$.extend(StateMachine.fn, Events);

StateMachine.fn.add = function (controller) {
  this.bind('change', function (e, current) {
    if (controller == current) controller.activate();
    else controller.deactivate();
  });

  controller.active = $.proxy(function () {
    this.trigger('change', controller);
  }, this);
};

jquery-mvc.js

var Controller = {};

(Controller.users = function ($) {
  var nameClick = function () {
    /* ... */
  };

  $(function () {
    $('#view .name').click(nameClick);
  });
})(jQuery);

model.js

var Model = {
  inherited: function () {},
  created: function () {},

  prototype: {
    init: function () {}
  },

  create: function () {
    var object = Object.create(this);
    object.parent = this;
    object.fn = object.prototype;

    object.created();
    this.inherited(object);

    return object;
  },

  init: function () {
    var instance = Object.create(this.prototype);
    instance.parent = this;
    instance.init.apply(instance, arguments);

    return instance;
  },

  extend: function (o) {
    var extended = o.extended;
    jQuery.extend(this, o);
    if (extended) extended(this);
  },

  include: function (o) {
    var included = o.included;
    jQuery.extend(this.prototype, o);
    if (included) included(this);
  }
};

Model.extend({
  find: function () {}
});

Model.include({
  init: function(atts) { /* ... */ },
  load: function(attributes) { /* ... */ }
});

var asset = Asset.init({ name: 'foo.png' });

pubsub.js

var PubSub = {
  subscribe: function (ev, callback) {
    var calls = this._callbacks || (this._callbacks = {});
    (this._callbacks[ev] || (this._callbacks[ev] = [])).push(callback);
    return this;
  },

  publish: function () {
    var args = Array.prototype.slice.call(arguments, 0),
        ev = args.shift(),
        list, calls, i, l;

    if (!(calls = this._callbacks)) return this;
    if (!(list = this._callbacks[ev])) return this;

    for (i = 0, l = list.length; i < l; i++) list[i].apply(this, args);
    return this;
  }
};

PubSub.subscribe('wem', function () {
  alert('Wem!');
});

PubSub.publish('wem');

TODO.md

• apply(), call() の理解が足りない。