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

Source: Internet
Author: User
Tags instance method



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)


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.