jQuery borderless

A framework is a set of tools , but not traditions or conventions of programming, and the goal of any application is the speed of execution and the correctness of the results. The published article shows the effective use of queries to the DOM, but not only from this jQuery application will work faster.

Do not use each

Rather, "not really," and where it is not justified:

var a = [1,2,3,4];



$.each(a, function ()

{

console.log( this );

});



// !



better this way:

for ( var i = 0, l = a.length; i < l; i++)

{

console.log(a[i]);

}

In the usual approach, you do not spend time on calls to callback functions and unnecessary checks to stop the cycle. Another example:

var b = {c: 1, d: 2, e: 3};



$.each(b, function (k)

{

console.log(k, this );

});



//

better this way:

for ( var k in b)

{

if ( b.hasOwnProperty(k) )

{

console.log(k, b[k]);

}

}

Write plugins

Write plugins for anything that moves and moves. 10 minutes spent today on the design of the plug-in, will increase in the speed of development tomorrow.



An example from life. It took us to enable / disable the submission button depending on the availability of text in the textarea field. The first born plugin:

$.fn.inputChange = function (callback)

{

return this .bind(

{

mousedown: callback,

keyup: callback,

blur: callback

});

};

and it works like this:

var submit = $( "#submit" );



// 1

$( "#text" ).inputChange( function ()

{

submit[0].disabled = this .value.length === 0;

});



// 2

$( "#text" ).inputChange( function ()

{

if ( this .value.length === 0)

{

submit.attr( "disabled" , "disabled" );

}

else

{

submit.removeAttr( "disabled" );

}

});

However, both options are far from ideal: 1 may fall with an error if suddenly there is no element inside submit, 2 is too cumbersome.

')

The second plugin was born:

$.fn.disable = function ( bool )

{

return this .each( function ()

{

this .disabled = bool ;

});

};

and this plugin works in conjunction with $ .fn.inputChange like this:

$( "#text" ).inputChange( function ()

{

submit.disable( this .value.length === 0);

});

However, there was a problem that no event specified in inputChange can handle pasting from the clipboard. Googling, came to a decision:

$.fn.paste = function (listener)

{

if ($.browser.msie)

{

return this .bind( "paste" , function ( event )

{

var that = this ;



setTimeout(

function ()

{

listener.apply(that, [ event ]);

},

.001

);

});

}

else

{

return this .bind( "input" , function ( event )

{

listener.apply( this , [ event ]);

});

}

};

and the inputChange plugin takes the following form:

$.fn.inputChange = function (callback)

{

return this

.paste(callback)

.bind(

{

keyup: callback,

blur: callback

});

};

So “brick by brick” we have assembled the working functionality, adding additional plug-ins to the library, which will surely come in handy for us, and maybe you ...

Native code

Many people think that jQuery can do everything. And to some extent they are right, but this right does not give them a reason to forget about the native JS.



I will give an example:

function warning(text)

{

$( "<div id='alert' class='warning'></div>" )

.appendTo( $( document .body) )

.css(

{

"padding" : "10px" ,

"background-color" : "red" ,

"color" : "white"

})

.html(text)

.append(

$( "<button>OK</button>" ).attr( "title" , "Close me!" ).click( function ()

{

$( this ).parent().remove();

})

);

}

In many ways, the code is sucked from the finger, but only for demonstration purposes. Now we will try to rewrite the code in pure JS:

function warning(text)

{

var div = document .createElement( "div" );

div.id = "alert" ;

div.className = "warning" ;



div.style.padding = "10px" ;

div.style.backgroundColor = "red" ;

div.style.color = "white" ;



div.innerHTML = text;



var button = document .createElement( "button" );

button.setAttribute( "title" , "Close me!" );

button.innerHTML = "OK" ;



$(button).click( function ()

{

div.parentNode.removeChild(div);

});



div.appendChild(button);

document .body.appendChild(div);

}

I deliberately added the event using jQuery, since jQuery well encapsulates the cross-browser calls to addEventListener / attachEvent, erasing the boundaries between browsers and for the creators of jQuery great respect. For the rest, the standard methods for working with the DOM are used.



Both examples are good: the first is elegant, the second is fast. In many ways, there are no restrictions on how you work with DOM, but if you use jQuery (MooTools, Prototype, ExtJS, etc.), then do not forget about native JS, which is always faster. After all, any framework does not put you in the frame, but only gives you tools .