How To Write JavaScript \ JQuery Plugins
I’m working on some big projects involve a lot of JavaScript, JavaScript has many libraries to improve JavaScript writing (JQuery, Open Rico, Qooxdoo and more…) but still sometimes you want more from your JavaScript, so I’ll show you how you can write Plugins for JavaScript and JQuery.
Everyone working with JavaScript should be familiar with prototype object (not library):
The prototype object is here to help when you wish to quickly add a custom property to an object that is reflected on all instances of it. To use this object, simply reference the keyword "prototype" on the object before adding the custom property to it, and this property is instantly attached to all instances of the object.
Example: Add startsWith and endsWith for String prototype
In the below code you can see I’m using String.prototype and adding a new function called startsWith that receive a string for the start with condition, inside I’m performing a simple regex on the string (txt) to check if the object (this) does starts with (txt).
String.prototype.startsWith = function (txt)
{ return (this.match("^" + txt) == txt) }
String.prototype.endsWith = function (txt)
{ return (this.match(txt+ "$") == txt) }
How To Use:
var test1 = "This is a Test.";
var test2 = "Another -> This is a Test,";
test1.endsWith(".") // True
test1.endsWith(",") // False
test2.startsWith("A") // True
Example: Add JQuery Blink Effect
The code below can be write with “JQuery” instead of “$” to avoid collision with other libraries, it's a best practice to pass jQuery to a self executing function (closure) and then you can use the “$” safely.
In JQuery the prototype object called – fn and the rest is the same as the above example.
There's no need to do $(this) because "this" is already a JQuery object, and I’m using JQuery fadeIn and fadeOut to create the Blink effect.
(function ($) {
$.fn.blink = function () {
this.fadeOut(‘fast’);
this.fadeIn(‘fast’);
})(jQuery);
Add Options and default values to our Blink effect, for example I want to choose how much times the element should blink and in what speed.
(function ($) {
$.fn.blink = function (options) {
var settings = {
'speed': 'fast',
'repeat': 3
};
//if the options isn’t null extend defaults with user options.
if ( options ) {
$.extend( settings, options );
}
for(var i = 0;i<settings.repeat;i++)
{
this.fadeOut(settings.speed);
this.fadeIn(settings.speed);
}
}
})(jQuery);
How To Use:
I’ve added a div called “Demo1” and wrote some text.
<div id="Demo1">This is a Test.</div>
Then from your script tag write:
$("#Demo1").blink();
Or if you want to pass different options to the Blink effect
$("#Demo1").blink({ 'repeat': 5 });
Full Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS\JQuery Extensions</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
String.prototype.startsWith = function (txt)
{ return (this.match("^" + txt) == txt) }
String.prototype.endsWith = function (txt)
{ return (this.match(txt + "$") == txt) }
(function ($) {
$.fn.blink = function (options) {
var settings = {
'speed': 'fast',
'repeat': 3
};
if (options) {
$.extend(settings, options);
}
for (var i = 0; i < settings.repeat; i++) {
this.fadeOut(settings.speed);
this.fadeIn(settings.speed);
}
}
})(jQuery);
function Test() {
$("#Demo1").blink({ 'repeat': 5 });
}
$(document).ready(function () {
Test();
var test1 = "This is a Test.";
var test2 = "Another -> This is a Test?";
var result;
result = "<br/>test1.endsWith('.')";
if (test1.endsWith(".")) result += " - True";
else result += " - False";
result += "<br/>test1.endsWith(',')";
if (test1.endsWith(",")) result += " - True";
else result += " - False";
result += "<br/>test2.startsWith('A')";
if (test1.startsWith("A")) result += " - True";
else result += " - False";
$("#SP").html(result);
});
</script>
</head>
<body>
<div id="Demo1">This is a Test.</div>
<button onclick="Test()">Blink Me</button>
<div id="SP"></div>
</body>
</html>