Some tips on how to write high efficient jslite code in The imitation of jquery _jquery

Articles that discuss jquery and JavaScript performance are not uncommon. However, I plan to teach you to upgrade your jslite and JavaScript code based on some of the speed tips and some suggestions that others can summarize with jquery. Good code can lead to a speed boost. Fast rendering and response means a better user experience.

First, keep in mind that Jslite is JavaScript. This means that we should adopt the same coding conventions, style guides and best practices.

First of all, if you're a JavaScript novice, you've never used jquery. I recommend that you read the syntax introduction to the official document first, which is a high-quality JavaScript tutorial, which means you've been using jquery for a while.

When you are ready to use jslite, I strongly recommend that you follow these guidelines:

Cache variables

DOM traversal is expensive, so try to reuse the element cache.

Copy Code code as follows:

Bad
H = $ (' #element '). Height ();
$ (' #element '). CSS (' height ', h-20);
Suggestions
$element = $ (' #element ');
h = $element. Height ();
$element. css (' height ', h-20);

Avoid global variables

Jslite like JavaScript, in general, it's best to make sure that your variables are within the scope of the function.

Copy Code code as follows:

Bad
$element = $ (' #element ');
h = $element. Height ();
$element. css (' height ', h-20);
Suggestions
var $element = $ (' #element ');
var h = $element. Height ();
$element. css (' height ', h-20);

using the Hungarian naming Act

Add the $ prefix before the variable to easily identify the Jslite object.

Copy Code code as follows:

Bad
var-i = $ (' #first ');
var second = $ (' #second ');
var value = $first. val ();
Recommendation-add $ prefix to Jslite object
var $first = $ (' #first ');
var $second = $ (' #second '),
var value = $first. val ();

using the var chain (single var mode)

Combining multiple VAR statements into one statement, I recommend putting unassigned variables behind.

Copy Code code as follows:

var $first = $ (' #first '),
$second = $ (' #second '),
Value = $first. val (),
K = 3,
cookiestring = ' Somecookiesplease ',
I
J
MyArray = {};

Please use on

In the new Jslite, a shorter on ("click") is used to replace a function like click (). In the previous version, on () is bind (). On () the preferred method of attaching an event handler. However, for consistency reasons, you can simply use the on () method entirely.

Copy Code code as follows:

Bad
$first. Click (function () {
$first. CSS (' border ', ' 1px solid red ');
$first. CSS (' Color ', ' blue ');
});

$first. Hover (function () {
$first. CSS (' border ', ' 1px solid red ');
})
Suggestions
$first. On (' click ', function () {
$first. CSS (' border ', ' 1px solid red ');
$first. CSS (' Color ', ' blue ');
})

$first. On (' hover ', function () {
$first. CSS (' border ', ' 1px solid red ');
})

Streamline JavaScript

Generally, it is best to merge functions as much as possible.

Copy Code code as follows:

Bad
$first. Click (function () {
$first. CSS (' border ', ' 1px solid red ');
$first. CSS (' Color ', ' blue ');
});
Suggestions
$first. On (' click ', function () {
$first. CSS ({
' Border ': ' 1px solid red ',
' Color ': ' Blue '
});
});

chained Operation

Jslite is very easy to implement the chained operation of the method. Let's take advantage of that.

Copy Code code as follows:

Bad
$second. HTML (value);
$second. On (' click ', function () {
Alert (' Hello everybody ');
});
$second. FadeIn (' slow ');
$second. Animate ({height: ' 120px '},500);
Suggestions
$second. HTML (value);
$second. On (' click ', function () {
Alert (' Hello everybody ');
}). FadeIn (' slow '). Animate ({height: ' 120px '},500);

Maintain the readability of your code

Along with the streamlining of code and the use of chain-type, it may bring code difficult to read. Adding tightening and wrapping can have a good effect.

Copy Code code as follows:

Bad
$second. HTML (value);
$second. On (' click ', function () {
Alert (' Hello everybody ');
}). FadeIn (' slow '). Animate ({height: ' 120px '},500);
Suggestions
$second. HTML (value);
$second
. On (' click ', function () {alert (' Hello Everybody ');})
. FadeIn (' slow ')
. Animate ({height: ' 120px '},500);

Select short-circuit Evaluation

Short-circuit evaluation is an expression that is evaluated from left to right, using the && (logic) or | | (logical OR) operator.

Copy Code code as follows:

Bad
function Initvar ($myVar) {
if (! $myVar) {
$myVar = $ (' #selector ');
}
}
Suggestions
function Initvar ($myVar) {
$myVar = $myVar | | $ (' #selector ');
}

Choose a shortcut

One way to streamline code is to take advantage of coding shortcuts.

Copy Code code as follows:

Bad
if (Collection.length > 0) {.}
Suggestions
if (collection.length) {..}

separation of elements in heavy operations

If you're going to do a lot of work on DOM elements (multiple attributes or CSS styles consecutively), it's recommended that you detach the elements and add them first.

Copy Code code as follows:

Bad
Var
$container = $ ("#container"),
$containerLi = $ ("#container Li"),
$element = null;

$element = $containerLi.
//... A number of complex operations
Better
Var
$container = $ ("#container"),
$containerLi = $container. Find ("Li"),
$element = null;

$element = $containerLi. Detach ().
//... A number of complex operations
$container. Append ($element);

Memorizing Tips

You may have a lack of experience with the methods used in Jslite, be sure to view the documentation and there may be a better or quicker way to use it.

Copy Code code as follows:

Bad
$ (' #id '). Data (Key,value);
Recommended (efficient)
$.data (' #id ', key,value);

using a subquery-Cached parent element

As mentioned earlier, Dom traversal is an expensive operation. A typical approach is to cache the parent element and reuse the cached elements when selecting child elements.

Copy Code code as follows:

Bad
Var
$container = $ (' #container '),
$containerLi = $ (' #container Li '),
$containerLiSpan = $ (' #container Li span ');
Recommended (efficient)
Var
$container = $ (' #container '),
$containerLi = $container. Find (' Li '),
$containerLiSpan = $containerLi. Find (' span ');

Avoid Universal selectors

Putting the universal selector in the descendant selector is a bad performance.

Copy Code code as follows:

Bad
$ ('. Container > * ');
Suggestions
$ ('. Container '). Children ();

Avoid implicit universal selectors

Universal selectors are sometimes implicit and are not easily discovered.

Copy Code code as follows:

Bad
$ ('. Someclass:radio ');
Suggestions
$ ('. SomeClass input:radio ');

Optimization Selector

For example, ID selectors should be unique, so there is no need to add additional selectors.

Copy Code code as follows:

Bad
$ (' Div#myid ');
$ (' Div#footer a.mylink ');
Suggestions
$ (' #myid ');
$ (' #footer. MyLink ');

Avoid multiple ID selectors

It is emphasized here that ID selectors should be unique, do not need to add additional selectors, and do not require multiple descendant ID selectors.

Copy Code code as follows:

Bad
$ (' #outer #inner ');
Suggestions
$ (' #inner ');

adhere to the latest version

The new version is usually better: more lightweight, more efficient, more effective, and more comprehensive coverage of the jquery approach. Obviously, you need to consider the compatibility of the code you want to support. For example, whether the project runs in good support HTML5/CSS3

Combine jslite and JavaScript native code if necessary

As mentioned above, Jslite is JavaScript, which means that what can be done with jslite can also be done with native code. Native code may be less readable and maintainable than jslite, and the code will be longer. But also means more efficient (usually closer to the underlying code, the more readable, the higher the performance, for example: The assembly, of course, the need for more powerful people can). Keep in mind that no frame can be smaller, lighter, and more efficient than native code (note: The test link is invalidated and the test code can be searched online).

Final advice

Finally, I recorded this article to improve the performance of jslite and some other good suggestions. If you want to delve into this topic you will find a lot of fun. Remember, Jslite is not indispensable, it is only an option. Think about why you should use it. Dom operations? Ajax? Template? CSS animation? Or a selector? jquery Heavy developer?