Selector and Options independent jQuery coding

We all have passed that phase, our big and long script.js contained nothing but plugins initializing scripts and their options configuration scripts. There was a strong need of following two things:

• Make jQuery plugin initialization independent
• Store all the configuration in markup itself

And then came in the data attributes in HTML5, just at the right time. Blessed !! Before data attributes we used to store some data required for js in rel attribute or class or custom(invalid) attributes. But with data attributes everything got legal and easy. Let me give you an example:

<script type='text/javascript' src='/js/your-jquery-animatons.js'></script>
<div class="js-init-animations" data-anim-dir="left" data-anim-move="-100px" data-anim-speed="2000"
	data-anim-delay="0" data-anim-ease="bounce">
	<!-- your awesome markup here -->
</div>
<div class="js-init-animations" data-anim-dir="right" data-anim-move="+200px" data-anim-speed="4000"
	data-anim-delay="1000" data-anim-ease="ease-in-out">
	<!-- your awesome markup here -->
</div>

See, great work there, you initialized animations on two blocks, without writing any JavaScript, without even touching or opening script.js, Awesome !!

If it would have been the old way, you would have written all the scripts like:

$('.js-animation-box1').animations({
	direction: 'left',
	movement: '-100px',
	speed: 2000,
	delay: 0,
	easing: 'bounce'
});
$('.js-animation-box1').animations({
	direction: 'right',
	movement: '+200px',
	speed: 4000,
	delay: 1000,
	easing: 'ease-in-out'
});
/* and so on for every animating block, think of this for ten times */

So instead of all this code repeating and repeating numerous time, write something standalone and independent. Take a look at the code below, it may not work but you will get a great Idea:

$('.js-init-animations').animations({
	direction: attr('data-anim-dir') || 'right', // default 'right'
	movement: attr('data-anim-move') || '+200px', // default '+200px'
	speed: attr('data-anim-speed') || 4000, // default 4000
	delay: attr('data-anim-delay') || 1000, // default 1000
	easing: attr('data-anim-ease') || 'ease-in-out' // default 'ease-in-out'
});
/* You just saved 9 block of repeating js code there. And you will never need to open this js file again. */

All of the jQuery plugins are releasing a new version to support data attributes and The new plugins work on data attributes itself. So I suggest, whenever you write your jQuery code, do so in this standalone and independent way. And when you are trying to find a new plugin for your need, do not forget to look for this feature.