jQuery Event Data
Something I didn't realized that I made use of was jQuery event data. I recently posted about callback scope for Ajax, but I guess there is an easier way via the event data verses hacking the Ajax options.
Again, I had to do this in an object structure where the callback function was a method on an object. Simply passing the function gives no reference to the instance of the given object being used. So in the event data, you can pass the "this" to maintain the reference to the containing instance of the function being passed as the callback.
For example:
SomeObject.prototype.eventCallback = function(e){
....
};
This function "eventCallback" will be the function passed to the event such as a click. $("#submit").click( {callingReference: this}, this.eventCallback);
See the options being passed in the click? The "this" is the instance object which "eventCallback" exists on. "this" will contain the state for the given constructed object. This click assignment is contained within a "setup" function on the same instance of "eventCallback". In the "eventCallback" function, accessing the "this" data is a bit different:
var lCalRef = e.data.callingReference;"e" is the function argument, and on it you can access the data passed in, which we are looking for "callingReference". It's assigned to "lCalRef" for shorthand.
Javascript inheritance
I've seen a lot of Javascript articles lately talking about object oriented implementations, inheritance, classes, prototype chains, etc. While, interesting, I never really needed this until this past weekend. Here is what I came up with.
// parent object
function Parent(){ ... }
// method on parent
Parent.prototype.buildBoards = function (){ ... };
// child object
function Child(){
// in the child constructor, call the parent constructor
Parent.call(this);
}
// set the prototype of the child to a new parent instance
Child.prototype = new Parent();
// reset the constructor of the child to the child's constructor
Child.prototype.constructor = Child;
// reset the function to override on the child to the child's version
Child.prototype.__proto__.functionToOverride = Child.prototype.functionToOverride;
// define child version of function to override
Child.prototype.functionToOverride = function (){...};
Credit to this site which I stole from: Classes and Inheritance. What's happening here is manipulation of the prototype chain in Javascript to simulate inheritance. The child object is set to act just like the parent initially and then told to use it's own version of the defined function to override. The "prototype.__proto__" first points to the child's prototype, and "__proto__" is the parent's ("__proto__.__proto__" would work, but it was nice to show a difference). In my testing, I found that the prototype chain manipulation to set the function to override must be done before the function declaration.
See also:
No comments:
Post a Comment