JQ plug-in Development specification (RPM)

When we draw the UI, we can formally write the jquery plugin code, but before we do, we need to have some understanding of some of the norms of jquery plug-in development.

1. Use closures:
(function ($) {
Code goes here
}) (JQuery);

This is from the official jquery plug-in development specification requirements, the use of this method of writing what is the advantage?

A) avoid global dependencies.

b) Avoid third-party damage.

c) compatible with jquery operator ' $ ' and ' jquery '

We know that this code will be parsed with the following code:
var JQ = function ($) {
Code goes here
};
JQ (JQuery);

This effect is at a glance.

2. Expansion

jquery provides 2 ' base classes '-$.extend and $.fn.extend for user extensions.

$.extend is used to extend its own methods, such as $.ajax, $.getjson, and so on, $.fn.extend is used to extend the jquery class, including methods and operations on jquery objects. To maintain the integrity of jquery, I tend to use $.fn.extend for plug-in development with minimal use of $.extend.

3. Selector

jquery provides a powerful and compatible selection of CSS versions, but finds that many students do not focus on efficiency when using selectors.

A) using the ID selector as much as possible, the jquery selector uses an API based on getElementById or getelementsbytagname, so you know that the most efficient is the ID selector, Because jquery calls getElementById directly to fetch the DOM, and the style selector gets the jquery object, it often uses getelementsbytagname to get and then filter.

b) The style selector should specify tagname as much as possible, and if the developer uses the style selector to get the DOM, and the DOM is of the same type, such as getting all the div classname as jquery, then we should use the notation $ (' div.jquery ') Rather than $ ('. jquery '), the benefits of writing this are obvious, and when you get the DOM jquery gets the div and then filters it instead of getting all the DOM re-filters.

c) Avoid iterations, and many students prefer to use an iterative approach when using jquery to get the DOM in the specified context, such as $ ('. jquery. Child '), to get all the classname nodes that are classname under the DOM of jquery, In fact, the cost of writing code is very large, jquery will continue to carry out deep traversal to get the necessary elements, even if it is really necessary, we should also use such as $ (Selector,context), $ (' Selector1>selector2 '), $ ( Selector1). Children (Selector2), $ (Selctor1). Find (Selector2) way.


JS plug-in development of a method:

JS Code:

<script type= "Text/javascript" src= "Jquery-1.9.1.min.js" ></script>
<script type= "Text/javascript" >
(function ($) {
Default parameters (placed outside the plugin to avoid calling the plug-in every time, saving memory)
var defaults = {
Color: ' Red '
};
Extended
$.fn.extend ({
Plug-in Name
Height:function (options) {
overriding default parameters
var opts = $.extend (defaults, options);
Main function
Return This.each (function () {
Activation events
var obj = $ (this);
Obj.click (function () {
alert (Opts.color);
});
});
}
})
}) (JQuery);
$ (function () {
$ ("P"). Height ({color: ' black '});
});
</script>


HTML code:

<p>
Click here
</p>

JQ plug-in Development specification (RPM)