Visibility in OOP concerns the fact that class methods and properties can be accessed from outside the class. JavaScript doesn't provide default keywords for setting the visibility of a class member, so we have to use scope to mimic this behavior. In this post I'm going to explain you these basic concepts that also turn out to be useful when developing a jQuery plugin. First of all, let's start with a basic DOM structure that consists of an unordered list with four list items:
<ul id="test"> <li class="test1">A</li> <li>B</li> <li>C</li> <li class="test2">D</li> </ul>
The unordered list has an ID of test. Two list items have two class attributes, namely test1 and test2, respectively. We want to collect these class names and replace the text node of each item with the corresponding class name. Note that this can be easily achieved without OOP, but the following code has only a demonstrative purpose.
First, each class member defined with a var keyword has a private visibility, meaning that it cannot be accessed from outside its class. Let's define some private members for handling these CSS classes:
var Class = new function() {
var that = this;
var classes = [];
var addItem = function(item) {
classes.push(item);
};
var getLength = function() {
return classes.length;
};
var setElement = function(elem) {
that.element = elem;
};
var parseClasses = function() {
var length = getLength();
that.element.find('li').each(function() {
if(length == 0) {
var $li = $(this);
if($li.attr('class')) {
addItem($li.attr('class'));
} else {
addItem(false);
}
}
});
};
var filterItems = function() {
var filtered = [], i = -1, len = classes.length;
do {
i += 1;
if(classes[i]) {
filtered.push(classes[i]);
}
} while(i < len);
classes = filtered;
};
}
that points to Class. Why are we using this variable? Consider the setElement() method without that:
var setElement = function(elem) {
this.element = elem;
};
If we use this instead of that, we're actually pointing to setElement() and not to Class. That's because in JavaScript a function is also a first-class object, and if we don't store a reference to our main class scope, we're actually using the local function scope.
Then we need to set a public property to store the element to analyze and a private method to set everything up:
this.element = null;
var initialize = function() {
setElement($('#test'));
parseClasses();
filterItems();
};
element depends from the initialize() method, which is defined later in our class. We've chosen to make this property public because it's a member that might be used from other classes. Further, since its default value is null, other classes can check this value to determine whether our class has already done its job or not. In fact, the main task of our class is performed by the last method, which is also public:
this.run = function() {
initialize();
$.each(classes, function(index, value) {
var className = '.' + value;
var elem = $(className);
$.data(elem, 'test', {test: value});
elem.text($.data(elem, 'test').test);
});
};
When we use our class like so:
$(document).ready(function() {
Class.run();
});
the element property changes its value from null to $('#test') and this is something that can be used by other classes in their routines.