<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
// For testing
function puts(text) {
document.write("<br>" + text);
}
// Thanks to http://javascript.info/tutorial/all-one-constructor-pattern
function BaseClass() {
// Private, invisible to child class and outside
var x;
// In lost context, using "self" to reference
var self = this;
// Public
this.a = 'a freely property';
// Public access to restricted var
this.propertyX = function(_x) {
if (typeof _x != 'undefined') x = _x;
return x;
}
this.actionY = function(message) {
// Bla bla
// "Publish" an event, pass params as an array
$(self).triggerHandler('custom_event', [message]);
}
$(self).on('custom_event', function(event, message) {
puts("Base: " + message);
});
}
function ChildClass() {
// Inherit, able to have many parents
BaseClass.apply(this);
var self = this;
// To call parent implementation, keep a reference to it
var parent = { actionY: this.actionY }
this.actionY = function(message) {
// Super call, note the params as an array
parent.actionY.apply(this, [message]);
// Customize here ...
}
this.actionZ = function() { /* Other.. */ }
$(self).on('custom_event', function(event, message) {
puts("Extended: " + message);
puts("With access to: " + self.a);
});
}
// Now it's time to play with class
c = new ChildClass();
c.propertyX(10);
puts(c.propertyX());
c.actionY('JS OOP is tricky');
</script>
Apr 17, 2014
JS OOP with publish/subscribe custom events using jQuery
As the Javascript script grows, traditional programming style will result in messy code.
With the help of custom event and OOP, we can keep the code clean, easy to extends and maintain.
Below is the snippet comes from my lesson:
Labels:
IT,
javascript
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment
New comment