JQuery plug-ins are not defined.

JQuery plug-ins are not defined.

I. Introduction

Some WEB developers reference A JQuery class library and write ("#"),("#"),(". ") I have been familiar with JQuery for several years. I used to be such a person. I didn't change my opinion on myself until I had a technical exchange in my company.

Ii. Popularize JQuery knowledge

Knowledge 1: When writing plug-ins using JQuery, the core methods are as follows:

$. Extend (object) can be understood as adding a static method to JQuery.

$. Fn. extend (object) can be understood as adding a method to the JQuery instance.

Basic definition and call:

/* $. Extend definition and call ************************************ * ***/$. extend ({fun1: function () {alert ("execution method 1") ;}}); $. fun1 ();/* $. fn. extend definition and call ************************************ * ***/$. fn. extend ({fun2: function () {alert ("execution method 2") ;}}); $ (this ). fun2 (); // equivalent to $. fn. fun3 = function () {alert ("execution method 3") ;}$ (this ). fun3 ();

Knowledge 2: jQuery (function () {}); and (function ($) {}) (jQuery:

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

JQuery (function () {}); is the code in the execution method after a DOM element is loaded.

(Function ($) {}) (jQuery); defines an anonymous function. jQuery represents the real parameter of this anonymous function. It is usually used in JQuery plug-in development to define the private domain of the plug-in.

Iii. Develop the standard structure of JQuery plug-in

1. Define scope: Define a JQuery plug-in. First, put the code of this plug-in a place that is not subject to external interference. If you are professional, you need to define a private scope for this plug-in. External Code cannot directly access the internal code of the plug-in. The code inside the plug-in does not pollute global variables. This decouples the dependencies between plug-ins and runtime environments. After talking about this, how should we define the private scope of a plug-in?

// Step01 defines JQuery's scope (function ($) {}) (jQuery );

Don't underestimate this scope. It is as important as c # defines the class Keywords of a class.

2. Extension of a plug-in for JQuery: After the scope of JQuery is defined, the core and most urgent step is to add an extension method for this JQuery instance. First, we name this Jqury plug-in a method called easySlider. When calling this plug-in, we can pass some parameters to this plug-in through options. The specific definition method can be found in the following code:

// Step01 defines the JQuery scope (function ($) {// The Extension Method Name of the step02 plug-in $. fn. easySlider = function (options) {}}) (jQuery );

So far, a simple JQuery plug-in has been completed. You can call it ("# domName "). easySlider ({}), or ("# domName "). easySlider ({}), or (". domName "). easySlider ({}) or more methods to call this plug-in.

3. Set the default value: Define a JQuery plug-in, just like defining a. net Control. A perfect plug-in should have more flexible attributes. Let's take a look at this code: <asp: TextBox ID = "TextBox1" Width = "20" Height = "100" runat = "server"> </asp: TextBox>. The TextBox Control has the Width and Height attributes. When using TextBox, You can freely set the Height and Width of the control, or do not set the value, because the control has its own default value. When preparing to develop a JQuery plug-in, when the user does not specify the property, there should be a default value, in JQuery can be achieved in two steps such definition, see the following code step03-a, step03-b.

// Step01 defines JQuery's scope (function ($) {// default attribute var defaults = {prevId: 'prevbtn ', prevText: 'previous', nextId: 'nexttbtn ', nextText: 'Next '//...... }; // The Extension Method Name of the step02 plug-in $. fn. easySlider = function (options) {// step03-b combines user-defined attributes, default attribute var options =$. extend (defaults, options) ;}} (jQuery );

Programmers like innovation, change the variable name, and change the variable name. When var defaults = {} is used to represent a default attribute, you may think differently when writing the JQuery plug-in yourself. Therefore, you can use var default01 = {}, var default02 = {} indicates the default attribute. Then the default attribute names are varied and getting worse. Therefore, we recommend that you use the ults variable to represent the default attribute when defining the default attribute when writing the JQuery plug-in. Such code is more readable.

Some people see this line of code: var options = $. extend (defaults, options), frowning, indicating not understanding. Let's take a 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 to the development environment and take a look at the values of a, B, c, and d to understand the meaning of var options = $. extend (ults, options. Indicates that options overwrites the defaults value and assigns the value to options.
In the plug-in environment, the value set by the user overwrites the default value of the plug-in. If the default value is not set, the default value of the plug-in is retained.

4. Support for JQuery selector: JQuery selector is an excellent feature of JQuery. If our plug-in does not support JQuery selector, it is a pity. For example, if your JQuery plug-in supports multiple selectors, our code should be defined as follows:

// Step01 defines JQuery's scope (function ($) {// default attribute var defaults = {prevId: 'prevbtn ', prevText: 'previous', nextId: 'nexttbtn ', nextText: 'Next '//...... }; // The Extension Method Name of the step02 plug-in $. fn. easySlider = function (options) {// step03-b combines user-defined attributes, default attribute var options =$. extend (defaults, options); // step4 supports the JQuery selector this. each (function () {}) ;}) (jQuery );

5. Support for JQuery link calls: the above Code seems perfect, but not so perfect. Link calling is not supported so far. To achieve the effect of link calling, you must return each element of the loop.

// Step01 defines JQuery's scope (function ($) {// default attribute var defaults = {prevId: 'prevbtn ', prevText: 'previous', nextId: 'nexttbtn ', nextText: 'Next '//...... }; // The Extension Method Name of the step02 plug-in $. fn. easySlider = function (options) {// step03-b combines user-defined attributes, default attribute var options =$. extend (defaults, options); // step4 supports JQuery selector // step5 supports chained call return this. each (function () {}) ;}) (jQuery );

This definition can support link calling. For example, you can call $ (". div "). easySlider ({prevId: "", prevText: "" audio character .css ({"border-width": "1", "border-color": "red ", "border-bottom-style": "dotted "});

6. Method in Plug-ins: a lot of code is often required to implement a plug-in function. There may be hundreds, thousands, or even tens of thousands of lines of code. We need to use function to structure the code. As mentioned in the first article, the methods defined in the plug-in cannot be called directly from outside, and the methods defined in the plug-in do not pollute the external environment. Now try to define some methods in the plug-in:

// Step01 defines JQuery's scope (function ($) {// default attribute var defaults = {prevId: 'prevbtn ', prevText: 'previous', nextId: 'nexttbtn ', nextText: 'Next '//...... }; // The step06-a defines the method var showLink = function (obj) in the plug-in {$ (obj ). append (function () {return "(" + $ (obj ). attr ("href") + ")"});} // The Extension Method Name of the step02 plug-in $. fn. easySlider = function (options) {// step03-b combines user-defined attributes, default attribute var options =$. extend (defaults, options); // step4 supports JQuery selector // step5 supports chained call return this. each (function () {// The step06-b defines the method showLink (this);}) ;}} in the plug-in (jQuery );

Step step06-a: Define a method in the plug-in named showLink (); this method cannot be called directly outside the plug-in, a bit like a private method in the C # class, it can only be used inside the plug-in. The step step06-b demonstrates how to call the internal method of the plug-in.

Iv. Summary

As long as the development standards are formed, it is not so hard to read other people's code.

Articles you may be interested in:

• Detailed description of image delay loading using jquery plug-in
• How to install jQuery plug-in myeclipse
• Customize a jquery plug-in [description label appears when the mouse is suspended]
• Self-developed jQuery plugin tutorial
• Troubleshooting problems encountered during jquery component usage
• Use the jquery component qrcode to generate QR code and Application Guide
• JQuery plug-in Slider Revolution enables switching of animated slide Images
• JQuery plug-in development excellent tutorial (bringing jQuery to a higher level)