Don't say JQuery without defining the JQuery plug in

1. Introduction

Some WEB developers will refer to an JQuery library, then write 1 ("#"), ("#"), (".") on a web page, and say they are familiar with JQuery after a few years of writing. I used to be such a person. It was not until a technical exchange in the company that I changed my view of myself.

2. Popularize JQuery knowledge

Knowledge 1: When writing plug-ins with ES11en, there are two core methods:

$.extend(object) is a static method for JQuery.

$.fn.extend(object) means to add a method to an instance of JQuery.

Basic definitions and calls:

/* $.extend  Definitions and Calls 
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun1: function () { alert(" Execution method 1"); } });
$.fun1();
/* $.fn.extend  Definitions and Calls 
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun2: function () { alert(" Execution method 2"); } });
$(this).fun2();
// Is equivalent to 
$.fn.fun3 = function () { alert(" Execution method 3"); }
$(this).fun3();

Knowledge 2:jQuery(function () {}); And (function ($) {})(jQuery); The difference between:

jQuery(function () { });
// The equivalent of 
$(document).ready(function () { });
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
(function ($) { })(jQuery);
// The equivalent of 
var fn = function ($) { };
fn(jQuery);

jQuery(function () { }); Code in a method that executes after an DOM element has been loaded.

(function ($) { })(jQuery); An anonymous function is defined, where jQuery represents an argument to the anonymous function. Commonly used in JQuery plug-in development, it serves the purpose of defining the private domain of the plug-in.

3. Develop standard structure of JQuery plug-in

1. Define scope: To define an JQuery plug-in, first put the plug-in code in a place where it can be protected from external interference. In technical terms, this means defining private scopes for the plug-in. External code does not have direct access to code inside the plug-in. The code inside the plug-in does not pollute global variables. Decoupled the dependencies of the plug-in and the runtime environment in a certain role. Having said all that, how do you define the private scope of a plug-in?

//step01  define JQuery The scope of the 
(function ($) {

})(jQuery);

This scope is as important as c# defining the class keyword 1 for a class.

2. Add a plugin to JQuery: Once the scope of JQuery is defined, the most essential and urgent step is to add an extension method to this instance of JQuery. We first name a method for the Jqury plugin, called ES63en. When we call the plugin, we can pass some parameters to the plugin via options. See the code below for the specific definition method:

//step01  define JQuery The scope of the 
(function ($) {
 //step02  The extension method name of the plug-in 
 $.fn.easySlider = function (options) {
  
 }
})(jQuery);

So far, one of the simplest ES69en plug-ins has been completed. When can call (" # domName "). easySlider ({}), or (" # domName "). easySlider ({}), or (". domName "). easySlider ({}) or more ways to invoke the plug-in.

3, Set the default value: Define 1 JQuery plug-in, just as you define 1.net control. A perfect plug-in, should be more flexible properties. Let's look at this code: < asp:TextBox ID="TextBox1" Width="20" Height="100" runat="server" > < /asp:TextBox > . TextBox control has Width and Height properties, users in the use of TextBox, can freely set the control of Height and Width, also can not set the value, because the control itself has the default value. When developing an JQuery plug-in, there should be a default value if the user does not specify a property. In JQuery, you can implement this definition in two steps. See step03-a, step03-b.

//step01  define JQuery The scope of the 
(function ($) {
 //step03-a  The default value property of the plug-in 
 var defaults = {
  prevId: 'prevBtn',
  prevText: 'Previous',
  nextId: 'nextBtn',
  nextText: 'Next'
  // ... 
 };
 //step02  The extension method name of the plug-in 
 $.fn.easySlider = function (options) {
  //step03-b  Merges user-defined properties, default properties 
  var options = $.extend(defaults, options);
 }
})(jQuery);

People who do programs like to be creative, change the name of a variable, change a row or something like that. var defaults ={}, var default01 ={}, var default02 ={}, var default02 ={}. Then the default property name is 5 and it's getting worse and worse. Therefore, it is recommended that when writing JQuery plug-in, the default properties are defined with defaults variables to represent the default properties, so that the code is more readable.

var options = $.extend(defaults, options), frowned in confusion. Let's start with 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 under 1 a respectively, b, c, the value of the d knew var options = $. extend (defaults options) meaning. options overrides the value of defaults and assigns it to options.
In a plug-in environment, this represents a value set by the user, overriding the default value of the plug-in. If the user does not set the default value of the property, leave the plug-in's default value.

4. Support for JQuery selector: JQuery selector is an excellent feature of JQuery. It would be a great pity if our plugin did not support JQuery selector. To enable our JQuery plug-in to support multiple selectors, our code should be defined as follows:

//step01  define JQuery The scope of the 
(function ($) {
 //step03-a  The default value property of the plug-in 
 var defaults = {
  prevId: 'prevBtn',
  prevText: 'Previous',
  nextId: 'nextBtn',
  nextText: 'Next'
  // ... 
 };
 //step02  The extension method name of the plug-in 
 $.fn.easySlider = function (options) {
  //step03-b  Merges user-defined properties, default properties 
  var options = $.extend(defaults, options);
  //step4  support JQuery The selector 
  this.each(function () {

  });
 }
})(jQuery);

Support for JQuery link calls: The above code looks perfect, but it's not. Linking calls are not supported so far. Each element of the loop, return, must be broken in order for the link call effect to be achieved

//step01  define JQuery The scope of the 
(function ($) {
 //step03-a  The default value property of the plug-in 
 var defaults = {
  prevId: 'prevBtn',
  prevText: 'Previous',
  nextId: 'nextBtn',
  nextText: 'Next'
  // ... 
 };
 //step02  The extension method name of the plug-in 
 $.fn.easySlider = function (options) {
  //step03-b  Merges user-defined properties, default properties 
  var options = $.extend(defaults, options);
  //step4  support JQuery The selector 
  //step5  Supports chained calls 
  return this.each(function () {

  });
 }
})(jQuery);

Such a definition is required to support link calls. $(".div ").easySlider({border-width :"",prevText:""}).css({" border-width ": "1", "border-color ": "red"," border-bottom-style ": "dotted"});

6, the method in the plug-in: often to achieve the function of a plug-in requires a lot of code, may be hundreds of lines, thousands of lines, or even tens of thousands of lines. We have to use function to structure this code. As stated in point 1, methods defined in the plug-in cannot be called directly by the outside world, and methods defined in the plug-in do not pollute the outside world. Now try to define a few methods in the plugin:

//step01  define JQuery The scope of the 
(function ($) {
 //step03-a  The default value property of the plug-in 
 var defaults = {
  prevId: 'prevBtn',
  prevText: 'Previous',
  nextId: 'nextBtn',
  nextText: 'Next'
  // ... 
 };
 //step06-a  Define methods in the plug-in 
 var showLink = function (obj) {
  $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
 }

 //step02  The extension method name of the plug-in 
 $.fn.easySlider = function (options) {
  //step03-b  Merges user-defined properties, default properties 
  var options = $.extend(defaults, options);
  //step4  support JQuery The selector 
  //step5  Supports chained calls 
  return this.each(function () {
   //step06-b  Define methods in the plug-in 
   showLink(this);
  });
 }
})(jQuery);

Steps step06-a: A method called showLink() is defined in the plugin; This method cannot be called directly outside of the plugin. It is like a private method in the C# class, and can only be used internally. Steps step06-b demonstrate how to invoke methods inside a plug-in.

4. To summarize

Once a standard has been established, it's not that taxing to read someone else's code.