jQuery no borders

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

Do not use each

Rather, "not really", but 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]);
}

With the usual approach, you do not waste time calling callsback functions and unnecessary checks to end 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 everything that moves and moves. 10 minutes spent today on the design of the plugin will give an increase in the speed of development tomorrow.

An example from life. We needed to enable / disable the submit 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 the 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 not a single event specified in inputChange can handle paste from the clipboard. Googling, we came to the 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 took the following form:

$.fn.inputChange = function (callback)
{
 return this
  .paste(callback)
  .bind(
  {
   keyup: callback,
   blur: callback
  });
};

So “brick by brick” we put together a working functional, complementing the library with excellent plugins that will certainly come in handy for us , and possibly for you ...

Native code

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

I will give an example:

function warning(text)
{
 $("

")
  .appendTo( $(document.body) )
  .css(
  {
   "padding": "10px",
   "background-color": "red",
   "color": "white"
  })
  .html(text)
  .append(
   $("OK").attr("title", "Close me!").click( function ()
   {
    $(this).parent().remove();
   }) 
  );
}

In many ways, the code is sucked from the finger, but solely for demonstration purposes. Now 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 an event using jQuery, since jQuery encapsulates addEventListener / attachEvent cross-browser calls well, erasing the boundaries between browsers and for that jQuery creators have a lot of respect. The rest uses standard methods for working with the DOM.

Both examples are good: the first is elegant, the second is fast. There are many restrictions on how you work with the 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 framework, but only gives you tools .