JavaScript jQuery-9 jquery Development plugin (Add new global function, add JQuery object method, add new shorthand method, method parameter)

First, add a new global function

Global functions

-Global functions, which are actually methods of jquery objects, are, in practice, functions inside the jquery namespace

-Some of the features built into jquery are implemented through global functions

-The $.ajax () function is a typical global function

-Add a function to the jquery namespace, just specify the new function as a property value for jquery

-can also be called by an alias

Add multiple functions

-If we want to provide multiple global functions in the plug-in, we can declare these functions independently

-even though the jquery namespace masks most JavaScript functions and variable names, there are still conflicting function names defined by other plug-ins

-We'd better wrap all the global functions that belong to a plug-in into an object

-The following code adds a new $.sum function that demonstrates how to create a practical method

Second, add jquery object method

Object methods

-Most of the built-in features in jquery are provided through the methods of their objects, and they are the key to the allure of plug-ins

-When a function needs to manipulate DOM elements, it is a good opportunity to create a method of the jquery object

-Adding a global function requires a new way to extend the jquery object. Adding an instance method is similar to an object method, but the Jquery.fn object is extended

Environment for Object methods

-Within any plug-in method, the keyword this refers to the current jquery object. Therefore, you can call any built-in jquery methods above this, or extract their DOM nodes and manipulate the node

Write a small plug-in

-Write a small plug-in that is used to switch the style of Li when finished. The method in the plug-in accepts two parameters, two class style names, if the element already has the first class style, switch to the second, otherwise, switch to the first

-Step 1: Write plugins

-Cause: The jquery selector matches 0 or one or more elements. When we call. Hasclass (), only the first matching element is checked.

-Workaround: Independently examine and manipulate each element, invoking the each method in the context of the method, so that an implicit iteration

Method connection

-In addition to implicit iterations, jquery users should be able to use concatenating behavior normally. Therefore, we must return a jquery object in all the plugins. Unless the corresponding method is clearly used to obtain different information

-The returned jquery object is the object referenced by this, which is the return this

-If you use the. each () iteration of this, you can return only the results of the iteration

Ii. parameters of the method

Parameters of the method

-In some plug-in methods, some of these methods are display accept parameters, others are not. As in the previous place, this is always the execution environment for the method, but in addition we can provide additional information that affects how the method executes

-Although our parameters are few now, they can actually be very long

Simple parameters

-some methods are executed to depend on information that some users might modify, and we can define this information as parameters so that the user may change it as needed.

-Defined as follows:

Parameter mapping

-As a plug-in, parameter mapping is more friendly than using parameter lists.

-Maps provide a meaningful label for each parameter, while making the order irrelevant

-Improve consistency and ease of use through parameter mapping as much as possible in the plugin

Default parameter values

-always specify that each parameter is not required as the method parameters are increasing, and a reasonable set of default values can enhance the usability of the plug-in interface

-mapping as a parameter can help us to achieve this goal, it can automatically pass the default value for parameters not specified by the user

callback function

-Method parameters may sometimes not be a simple numeric value, and may be more complex. For example, we can often see the callback function as a parameter

-The callback function can greatly increase the flexibility of the plugin, but it does not need to write how much code when creating the plug-in

-To use a callback function in a method, you need to receive a function object as

Customizable default values

-by setting reasonable parameter values for the method parameters, you can significantly improve the user experience of using the plug-in, but depending on the consumer, it may be difficult to determine the default value, you can customize the default value to reduce the number of code to write

-the so-called custom default is to remove the default value code from the method and place it outside the method

Summary: This chapter mainly introduces the JQuery development plug-in (adding new global functions, adding JQuery object methods, adding new shorthand methods, methods of parameters)

This article from the "Flying Ants" blog, declined to reprint!

JavaScript jQuery-9 jquery Development plugin (Add new global function, add JQuery object method, add new shorthand method, method parameter)