jQuery.Modularize
This is my third blog post on comparing jQuery namespace libraries.
I will use jQuery.Modularize by Ariel Flesler to give namespace to my fictitious textUtil plugin.
As usual, we include a reference to jquery.modularize.js at the <head> section of our HTML before we can use its functionalities.
To create the namespace, we call $.modularize(…):
$.modularize('textUtil');
Then we define our plugin methods. Unlike the other 2 libraries, we have to add the namespace before the method names at the moment we declare those methods:
$.fn.textUtil.charCount = function(options){
return cCount(this[0], options);
};
$.fn.textUtil.upperCase = function(){
return this.each(
function(){
uCase(this);
}
);
};
After that, we can access the plugin methods by preceding the method names with textUtil():
$('.countMe').textUtil().upperCase().textUtil().charCount();
$('.countMe').textUtil().sentenceCase().addClass('class2').textUtil().wordCount();
Note that parenthesis are required after the textUtil namespace.
One thing notable about jQuery.Modularize is that you can not only call the plugin methods, but also call the namespace itself as a method. So we can achieve something like:
$('.countMe').textUtil( { ... init params ... } );
Beware that if we choose to do so, we have to define the above method before calling $.modularize(…), and the method must receive one or more arguments:
$.fn.textUtil = function(options){
return this.each(
function(){
init(this, options);
}
);
};
$.modularize('textUtil');
Other plugin methods can be defined before or after $.modularize(…).
Plugin defaults can be defined and accessed in the usual way:
$.fn.textUtil.defaults = { inclPunc: true, inclHTML: true };
Source code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>jQuery.Modularize</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.modularize.js"></script>
<script type="text/javascript">
(function($){
// Modularize the namespace
$.modularize('textUtil');
$.fn.textUtil.charCount = function(options){
return cCount(this[0], options);
};
$.fn.textUtil.wordCount = function(){
return wCount(this[0]);
};
$.fn.textUtil.paraCount = function(){
return pCount(this[0]);
};
$.fn.textUtil.upperCase = function(){
return this.each(
function(){
uCase(this);
}
);
};
$.fn.textUtil.sentenceCase = function(){
return this.each(
function(){
sCase(this);
}
);
};
// Plugin defaults
$.fn.textUtil.defaults = { inclPunc: true, inclHTML: true };
// Private worker functions (with dummy implementation)
function cCount(ele, options){
var opts = $.extend({}, $.fn.textUtil.defaults, options);
var c = 0;
if (ele) {
c = ele.innerHTML.length;
if (!opts.inclPunc) {
c -= 10;
}
if (!opts.inclHTML) {
c -= 20;
}
}
return Math.max(0, c);
}
function wCount(ele){
return cCount(ele) / 5;
}
function pCount(ele){
return wCount(ele) / 10;
}
function uCase(ele){
ele.innerHTML += " UPPERCASED ";
}
function sCase(ele){
ele.innerHTML += " Sentence Cased ";
}
})(jQuery);
function onButtonClicked(){
$('#result').html(
// Test method invocation and chaining
'Chars: ' +
$('.countMe').textUtil().upperCase().textUtil().charCount() +
'<br/>' +
// Test method invocation with params
'Chars (excl punc & html)s: ' +
$('.countMe').textUtil().charCount({inclPunc: false, inclHTML: false}) +
'<br/>' +
// Chain to a jQuery built-in method
'Words: ' +
$('.countMe').textUtil().sentenceCase().addClass('class2').textUtil().wordCount() +
'<br/>' +
'Paras: ' +
$('.countMe').textUtil().paraCount() +
'<br/>'
);
}
</script>
<style type="text/css">
.countMe { border:1px black solid; margin: 2px; }
.class2 { background-color: aqua; }
</style>
</head>
<body>
<div id="div1" class="countMe">This is a sample paragraph. This is a sample paragraph.
This is a sample paragraph. This is a sample paragraph. This is a sample paragraph.
This is a sample paragraph. This is a sample paragraph. This is a sample paragraph.
This is a sample paragraph. This is a sample paragraph. This is a sample paragraph.
This is a sample paragraph. This is a sample paragraph. </div>
<div id="div2" class="countMe">This is a sample paragraph. This is a sample paragraph.
This is a sample paragraph. This is a sample paragraph. This is a sample paragraph.
This is a sample paragraph. This is a sample paragraph. This is a sample paragraph.
This is a sample paragraph. This is a sample paragraph. This is a sample paragraph. </div>
<div>
<input type="button" onclick="onButtonClicked();return false;" value="Go" /><br/>
<span id="result"></span>
</div>
</body>
</html>
Malnotna's Blog 
Leave a comment