Detailed jquery plug-in development way _javascript Skills

jquery Plugin Development

In general, the development of jquery Plug-ins is divided into two types: a global function that hangs under the jquery namespace, or a static method, or a method of jquery object-level, that is, a method that hangs under the jquery prototype, This method can also be shared by the JQuery object instance obtained by the selector.

One, jquery expansion

　　1, $.extend (object)

Similar to. NET extension method for extending jquery. It can then be invoked in the form of $.

 $ (function () {
 $.extend ({fun1:function () {alert ("Extend a fun1 function for jquery!");});
 $.fun1 ();
 })

　　2, $.fn.extend (object)

An object that extends jquery.

 $.fn.extend ({fun2:function () {alert ("Execute Method 2");});
 $ ("#id1"). Fun2 ();

You can use Google to see:

The above wording is equivalent to:

 $.fn.fun2 = function () {alert ("Execute Method 2");}
 $ (this). FUN2 ();

Second, private domain

This is defined in the following way:

(function ($) {}) (jQuery);
Equivalent to the
var fn = function (Xxoo) {};
FN (jQuery);

The following code pops up 123.

 $ (function () {
 var fn = function (Xxoo) {};
 fn (alert (123));
 })

Basic steps for defining plug-ins

　　1. Defining scopes

Development of a jquery plug-in, first of all, the plug-in code to isolate the outside world, the external code does not allow direct access to the plug-in internal code, plug-in internal code does not affect the external.

Step 1 Define the plug-in private scope

 (function ($) {

 }) (JQuery);

This ensures that the code inside the plug-in is isolated from the outside world.

　　2. Extend jquery

After the scope is defined, the plug-in needs to be extended to jquery in order to allow external invocation.

Step 1 defines
 the extension method name $.fn for the private scope (function ($) {
 /Step 2 plug-in
 . MyFrame = function (options) {
  
 }
 }) (JQuery);

3, default value

After you define the jquery plug-in, you can specify it in this way if you want some parameters to have default values.

Step 1 defines
 the default Value property of the private scope (function ($) {
 //Step 3 plug-in
 defaults = {
  Id: ' #id1 ',
 };
 Step 2 The extension method name of the plug-in
 $.fn. MyFrame = function (options) {
  //Step 3 Merge User custom attributes, default properties (use Defaults if the options are blank)
  var options = $.extend (Defaults, options);
 }
 ) (JQuery);

4. Support jquery selector

 Step 1 defines
 the default Value property of the private scope (function ($) {
 //Step 3 plug-in
 defaults = {
  Id: ' #id1 ',
 };
 Step 2 The extension method name of the plug-in
 $.fn. MyFrame = function (options) {
  //Step 3 Merge User custom attributes, default properties (use Defaults if the options are blank)
  var options = $.extend (defaults , options);
 }
 Step 4 supports the jquery selector
 This.each (function () {

 });
 } (JQuery);

5, supporting the chain of jquery calls

Step 1 defines
 the default Value property of the private scope (function ($) {
 //Step 3 plug-in
 defaults = {
  Id: ' #id1 ',
 };
 Step 2 The extension method name of the plug-in
 $.fn. MyFrame = function (options) {
  //Step 3 Merge User custom attributes, default properties (use Defaults if the options are blank)
  var options = $.extend (Defaults, options);
 }
 Step 4 supports the jquery selector
 //Step 5 support for chained calls (returning step 4) return
 This.each (function () {

 });
 }) (JQuery);

6, plug-in internal methods

 Step 1 defines
 the default Value property of the private scope (function ($) {
 //Step 3 plug-in
 defaults = {
  Id: ' #id1 ',
 };

 Step 6 defines the function in the plug-in
 var myfun = functions (obj) {
  alert (obj);
 }

 Step 2 The extension method name of the plug-in
 $.fn. MyFrame = function (options) {
  //Step 3 Merge User custom attributes, default properties (use Defaults if the options are blank)
  var options = $.extend (defaults , options);
 }
 Step 4 supports the jquery selector
 //Step 5 support for chained calls (returning step 4) return
 This.each (function () {
  //step 6 defining functions in Plug-ins
  myfun (This) ;
 });
 }) (JQuery);

Because of the scope relationship, the private function of step 6 is currently allowed within the plug-in used internally.

  above is the full content of this article, I hope to help you, thank you for the support of cloud habitat community!