Do not define jquery plug-ins don't say it will jquery_jquery

I. INTRODUCTION

Some Web developers will refer to a jquery library and then write ("#") ("#"), ("#"), ("#"), ("#"), ("#"), write for years and say they are very familiar with jquery. I used to be one of those people, until there was a technical exchange in the company, I changed my view of myself.

Ii. Universal knowledge of jquery

Knowledge 1: When using jquery to write Plug-ins, the core of the method is as follows two:

$.extend (object) can be understood to add a static method to jquery.

$.fn.extend (object) can be understood to add a method to the jquery instance.

Basic definition and invocation:

* * $.extend definition and call * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
N1:function () {Alert ("execution method One");});
$.fun1 ();
* * $.fn.extend definition and call * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
D ({fun2:function () {alert ("Execute Method 2");});
$ (this). FUN2 ();
Equivalent to
$.fn.fun3 = function () {alert ("Execute method Three");}
$ (this). FUN3 ();

Knowledge 2:jquery (function () {}); differs from (function ($) {}) (JQuery):

JQuery (function () {});
Equivalent to
$ (document). Ready (function () {});
Equivalent to the
var fn = function ($) {};
FN (jQuery);

JQuery (function () {}) is the code that executes the method after a DOM element has been loaded.

(function ($) {}) (JQuery); Defines an anonymous function in which jquery represents the actual parameter of the anonymous function. Typically used in the development of jquery Plug-ins, it plays a role in defining the private domain of plug-ins.

Third, the development of jquery plug-in standard structure

1. Define scope: Define a jquery plugin, first of all, put the code of this plug-in in a place that is not disturbed by the outside world. If you're professional, you want to define a private scope for this plug-in. External code cannot directly access the code inside the plug-in. The code inside the plug-in does not pollute the global variable. In a certain role decoupling the plug-in and the operating environment dependence. Having said so much, how do you define a private scope for a plug-in?

STEP01 defines the scope
(function ($) {

}) (jquery) of jquery;

Don't underestimate the scope, just as important as C # defines a class keyword for classes.

2. Extend a plugin for jquery: When the scope of jquery is defined, the core and most urgent step is to add an extension method to this jquery instance. First we name a method for this Jqury plug-in, called Easyslider, when we invoke the plugin, we can pass some parameters to the plugin via options. The specific definition method looks like the following code:

STEP01 defines the scope of jquery
(function ($) {
 //step02 Plug-in extension method name
 $.fn.easyslider = function (options) {
  
 }
}) (JQuery);

So far, one of the simplest jquery plug-ins has been completed. Call Can ("#domName"), or ("#domName"). Easyslider ({}), or (". Domname"). Easyslider ({}), or more, call this plug-in.

3, set the default value: Define a jquery plug-in, like defining a. NET control. A perfect plugin, should be a more flexible attribute.  Let's look at this code: <asp:textbox id= "TextBox1" width= "height=" runat= "Server" ></asp:TextBox>. The TextBox control has the width and Height properties, and the user can set the height and width of the control freely when using a textbox, or it can not set the value, because the control itself has a default value. When you are ready to develop a jquery plug-in, you should have a default value when the user does not specify a property, and in jquery you can do so in two steps, looking at the following code step03-a,step03-b.

STEP01 defines the scope of jquery
(function ($) {
 //step03-a plug-in default value attribute
 var defaults = {
  previd: ' prevbtn ',
  Prevtext: ' Previous ',
  nextid: ' nextbtn ',
  nexttext: ' Next '
  //...
 };
 STEP02 Plug-in extension method name
 $.fn.easyslider = function (options) {
  //step03-b merge user custom attribute, default property
  var options = $. Extend (defaults, options);
 }
) (JQuery);

Do the program people like innovation, change the name of the variable, change a line ah these. When you see Using var defaults = {} to represent a default property, you want to be different when you write your jquery plug-in, so use the Var default01 ={}, var default02 ={} to represent the default properties. Then the default property names are all sorts of, getting worse. Therefore, it is recommended that when writing jquery plug-ins, when defining default properties, the defaults variable is used to represent the default property, and the code is more readable.

Someone saw this line of code: var options = $.extend (defaults, options), frowned, expressed puzzled. Let's look at the following code:

var obj01 = {name: "English name: Sam Xiao", age:29, girlfriend: {name: "Yang", age:29}}
var obj02 = {name: "Chinese name: Xiaojian" , girlfriend: {name: ' YY '}};

var a = $.extend (obj01, obj02);
var B = $.extend (true, obj01, obj02);
var c = $.extend ({}, obj01, obj02);

Copy the code into the development environment, look at the value of A,b,c,d, and understand the meaning of the var options = $.extend (defaults, options). Indicates options to cover the value of the defaults and assigns the value to the options.
In a plug-in environment, it represents the user-set value, overrides the plug-in's default value, or retains the plug-in's default value if the user does not have a default value set.

4, support jquery selector: jquery selector, is a good feature of jquery, if our plug-ins are written to not support the jquery selector, is indeed a small regret. If you make your own jquery plugin support multiple selectors, our code should define this:

STEP01 defines the scope of jquery
(function ($) {
 //step03-a plug-in default value attribute
 var defaults = {
  previd: ' prevbtn ',
  Prevtext: ' Previous ',
  nextid: ' nextbtn ',
  nexttext: ' Next '
  //...
 };
 STEP02 Plug-in extension method name
 $.fn.easyslider = function (options) {
  //step03-b merge user custom attribute, default property
  var options = $. Extend (defaults, options);
  STEP4 supports the jquery selector
  This.each (function () {

  });
 }
) (JQuery);

5, Support jquery link call: The top code looks perfect, in fact, is not so perfect. Link calls are not supported so far. In order to achieve the effect of the link call, you must return each element of the loop

STEP01 defines the scope of jquery
(function ($) {
 //step03-a plug-in default value attribute
 var defaults = {
  previd: ' Prevbtn ',
  prevtext: ' Previous ',
  nextid: ' nextbtn ',
  nexttext: ' Next '
  //...
 };
 STEP02 Plug-in extension method name
 $.fn.easyslider = function (options) {
  //step03-b merge user custom attribute, default property
  var options = $. Extend (defaults, options);
  STEP4 supports the jquery selector
  //STEP5 support chained call return
  This.each (function () {

  });
 }
) (JQuery);

Such a definition can support link calls. such as support for such calls: $ (". Div"). Easyslider ({previd: "", Prevtext: "}). css ({" Border-width ":" 1 "," Border-color ":" Red "," Border-bottom-style ":" Dotted "});

6, Plug-ins in the method: often implement a plug-in function requires a lot of code, there may be hundreds of lines, thousands of lines, or even tens of thousands of lines. We have to structure this code, we have to use function. In the 1th already said, in the plug-in definition of the method, the outside can not directly call, I in the plug-in definition of the method also does not pollute the external environment. Now try to define some methods in the plugin:

STEP01 defines the scope of jquery
(function ($) {
 //step03-a plug-in default value attribute
 var defaults = {
  previd: ' prevbtn ',
  Prevtext: ' Previous ',
  nextid: ' nextbtn ',
  nexttext: ' Next '
  //...
 };
 Step06-a defines methods in Plug-ins
 var showlink = function (obj) {
  $ (obj). Append (function () {return "(" + $ (obj). attr ("href") + ")" });
 }

 STEP02 Plug-in extension method name
 $.fn.easyslider = function (options) {
  //step03-b merge user custom attribute, default property
  var options = $. Extend (defaults, options);
  STEP4 supports the jquery selector
  //STEP5 support chained call return
  This.each (function () {
   //step06-b defines method Showlink in Plug-ins
   ( This);} ()})
(JQuery);

Step step06-a: In the plug-in definition of a method called Showlink (); This method can not be directly called outside the plug-in, a bit like a C # class in a private method, can only meet the internal use of plug-ins. Step Step06-b demonstrates how to invoke a method inside a plug-in.

Iv. Summary

Developing a standard and then reading someone else's code is less strenuous.