Deep Learning about jQuery custom plug-ins

Deep Learning about jQuery custom plug-ins
1. Define the method object-level extension of the plug-in, that is, add a method to the jQuery class instance, call: (selector ). function Name (parameter); ('# id '). myPlugin (options); method defined:

$. Fn. extend ({"function name": function (custom parameter) {// write plug-in code here}); // or $. fn. function name = function (options) {// write the plug-in code here

 

} A class-level method is a method that extends the jQuery class and adds a new method to it. Call:. Function Name (arguments);. add (3,4 );

$. Extend ({"function name": function (custom parameter) {// write plug-in code here}); // or $. function name = function (custom parameter) {// write the plug-in code here}

 

You will find that the difference between them is that there is only one less fn, while jQuery. fn = jQuery. prototype, the prototype attribute of the object in Javascript is interpreted as: return the reference of the Object Type prototype. If A. prototype = new B (); is equivalent to an instance where A. prototype is B, A can use all the methods in B. So here we are not just extending the object method, so that the object can use the method we define. For prototype, refer to this article: What does extend mean by prototype in JS? Here, extend has only one parameter, "function name: function (custom parameter) {// write plug-in code here, our function is merged into the global object of jquery, which is equivalent to extending the jQuery class method. Because extend has multiple parameters, extend is used to merge the parameters into a new parameter, such as var result = $. extend ({}, {name: "Tom", age: 21 },{ name: "Jerry", sex: "Boy "}); // The result is result = {name: "Jerry", age: 21, sex: "Boy"} For details about extend, refer to this article: jQuery. for details about the extend function, see extend and fn of jquery. extend 2. instance analysis: defines a plug-in with parameters. Generally, we will see in many places that js should not pollute the global environment. In fact, it is also true. Otherwise, you define a variable and define it in your reference to other people's plug-ins. This is a conflict, this involves the js scope. We have to "encapsulate" the scope, so we know that the scope of a function is only in one function, but after the function is executed, the variable will be deregistered. So here we need to use the immediate execution function, and use a function to wrap the defined plug-in code, so that a local scope is formed, which will not affect the global environment, for details about how to execute a function immediately, refer to this article: js (function (){...}) () To understand how to execute function writing immediately, our writing method will be:

(Function ($) {$. fn. extend ({function: function (options) {}}) ;}( jQuery );

 

I want to customize a pop-up layer plug-in. You can set the background color, width, and height. If it is not set, it is the default one. First, in the html element, I want to set the button and click, <a id = "dialog"> click the pop-up layer </a> <div class = "dialog"> </div>. dialog can be dynamically created, but it does not exist here. For details about dynamic creation, refer to jQuery-add element $ ('body '). append ($ ('<div> </div> '). addClass ('Dialog '); // if you have any questions, the css style is initially hidden.

.dialog{width:300px;height: 200px;background:green;position: absolute;left:50%;top:30%;margin-left: -150px;display: none;}

 

Finally, it defines the js of the plug-in.

(Function ($) {$. fn. extend ({dialog: function (options) {// $ ('body '). append ($ ('<div> </div> '). addClass ('Dialog '); // if you have any questions, why do I need to click "2" to see the effect after dynamically creating an element here? I don't understand. Please tell me. Var setting = $. extend ({},{ background: 'green', width: 300, height: 200}, options); return this.css ({'width': setting. width, 'height': setting. height, 'background': setting. background }). show ('low') ;}}) ;}( jQuery );

 

Here, the return this function enables the defined plug-in method to be called in a chain, that is, to maintain the link. This inside the plug-in points to jQuery objects rather than common DOM objects. Because DOM objects do not have the css () method and this is the jQuery object method, shouldn't jQuery objects be written in this way? Here we can change this to (this). For the difference between $ (this) and this, see the difference between this and $ (this) in jQuery, but I still don't know why this and $ (this) are the same here? Finally, you can call initialization.

$('#dialog').click(function(){$('.dialog').dialog({background:'red',width:500,height:100});});