JQuery plugin development methods

JQuery plugin development methods
JQuery and jQuery plug-ins are basically used for web development. One is extension-like development, jQuery adds a new global function (jQuery's global function belongs to the jQuery namespace function). If jQuery is treated as a class, it is equivalent to adding a method to the jQuery class itself. The second is the development plug-in through object extension, that is, the jQuery object addition method. The most direct understanding of plug-in development of class extension is to add class methods to the jQuery class, which can be understood as adding static methods. A typical example is the $. AJAX () function, which is defined in the namespace of jQuery. Plug-in development for class extension can be expanded in the following forms: 1. add a global function $. ltrim = function (str) {return str. replace (/^ \ s +/, "") ;}; call method var str = "Remove left space"; console. log ("before removal:" + str. length + "removed:" + $. ltrim (str ). length); 2. add multiple global functions $. ltrim = function (str) {return str. replace (/^ \ s +/, "") ;};$. rtrim = function (str) {return str. replace (/\ s + $/, "") ;}; it is recommended that you use $ if you write fewer global functions. extend (object) $. extend ({ltrim: function (Str) {return str. replace (/^ \ s +/, "") ;}, rtrim: function (str) {return str. replace (/\ s + $/, "") ;}}); 3. although in the jQuery namespace, a large number of javaScript function names and variable names are not allowed. But it is still inevitable that some functions or variables will conflict with other jQuery plug-ins, so we are used to encapsulating some methods into another custom namespace. $. MyPlugin = {ltrim: function (str) {return str. replace (/^ \ s +/, "") ;}, rtrim: function (str) {return str. replace (/\ s + $/, "") ;}}; use an independent plug-in name to avoid function conflicts in the namespace. Call method: var str = "Remove left space"; console. log ("before call:" + str. length + "after the call:" + $. myPlugin. ltrim (str ). length); object extension plug-in 1. add an object extension method $. fn. changeColor = function () {this.css ("color", "red") ;};$. fn. changeFont = function () {this.css ("font-size", "24px") ;}; caller Formula: $ (function () {$ (""). showColor (); <br> $ ("div "). changeFont () ;}); 2. add multiple object extension methods (function ($) {$. fn. changeColor = function () {this.css ("color", "red") ;};$. fn. changeFont = function () {this.css ("font-size", "24px") ;}} (jQuery); compatible with writing (to prevent previous functions from being written ;) :; (function ($) {$. fn. changeColor = function () {this.css ("color", "red") ;};$. fn. changeFont = function () {this.css ("font-size", "24px") ;}}) (jQuer Y); The above defines a jQuery function with the form parameter $. After the function definition is complete, pass the jQuery real parameter in. Call and execute immediately. The advantage is that when writing the jQuery plug-in, we can also use the $ alias instead of causing conflicts with prototype. 3. use $. fn. for more information about extend (object), see jQuery source code (version 1.11.1. fn = jQuery. prototype = {// The current version of jQuery being used jquery: version, constructor: jQuery ,......................}, jQuery is a well-encapsulated class. For example, the $ ("a") Statement generates an instance of the jQuery class. JQuery. fn. extend (object) is actually an extension of jQuery. prototype, that is, adding a "member function" to the jQuery class ". JQuery class instances can use this "member function ". $. Fn. extend ({changeColor: function () {this.css ("color", "red") ;}, changeFont: function () {this.css ("font-size ", "24px") ;}}); describes the basic usage of object extension. The following is a simple function similar to code highlighting: (function ($) {$. fn. highlight = function (options) {// controllable plug-in parameters. You can modify the default parameter var defaults =$. extend ($. fn. highlight. defaults, options); // traverse the function, and then return this according to the parameter change style. each (function () {var elem = $ (this); var markup = elem.html (); Markup = $. fn. highlight. format (markup); elem.html (markup); elem.css ({color: defaults. color, fontSize: defaults. fontSize, backgroundColor: defaults. backgroundColor}) ;};}; // default value of the parameter $. fn. highlight. defaults = {color: "# 556b2f", backgroundColor: "white", fontSize: "48px"}; // format the font $. fn. highlight. format = function (txt) {return "<strong>" + txt + "</strong>" ;};}) (jQuery); $ (function () {// call the plug-in $ (""). Highlight ({color: "red", fontSize: "24px"}) ;}); Summarize the development and use of jQuery plug-ins, depending on the specific conditions in the development process, the first type of extension method is similar to C # adding a static method. The second type of object extension is determined based on your actual business, some common functions of your website can certainly be written as a plug-in by yourself, such as viewing images and clicking on the sidebar. Sometimes you can also study plug-ins written by others on the Internet, you can also learn a lot. if you think this article is good and rewarding, please give me a suggestion. Thank you ~