JQuery Plugin Development Analysis

Source: Internet
Author: User

So let's start with a simple look at the most orthodox JQuery plugin definition:

?
1 2 3 4 5 6 7 8 9 10 11 12 (function ($) {     $.fn.插件名 = function (settings) {         //默认参数         var defaultSettings = {        }         /* 合并默认参数和用户自定义参数 */settings = $.extend(defaultSettings, settings);return this.each(function () {             //代码         });   //插件在元素内多次出现} })(jQuery);

First look at the first line of code in the template (of course we want to look at the second half of this line of code, otherwise the first line is completely meaningless):

?
1 2 3 (function ($) {})(jQuery);

This line of code is actually used to create an anonymous function. If you do not know about anonymous functions and closures, you will be very confused about this code, so it is highly recommended that you read the anonymous function and the closure of the function in JavaScript.

the method of inheriting JQuery $.extend--$.extend has a very important role in the development of jquery plug-ins, which is used for merging parameters.

?
1 2 3 4 5 6 7 8 9 $.fn.tip = function (settings) {     var defaultSettings = {            //颜色     color: ‘yellow‘,        //延迟        timeout: 200     }  /* 合并默认参数和用户自定义参数 */settings = $.extend(defaultSettings, settings);    alert(settings.input); <br>}

The JQuery plugin defines the second way:

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 (function ($) {     //插件定义--更换名字     $.fn.tabpanel = function (method) {         var methods = $.fn.tabpanel.methods;         if (methods[method]) {             return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));         } else if (typeof method === ‘object‘ || !method) {             return methods.init.apply(this, arguments);         } else {        }     }     //支持的方法     $.fn.tabpanel.methods =     {         //初始化         init: function (p_options) {             tabpanelBind(p_options, this);         },         add: function (p_options) {             addTab(p_options, this);             tabpanelBind(p_options, this);             // debugger         }    }     function add(p_options) {         var _defaults = {             id: ""         }     <br>    //内部实现略.........<br>        return _index;     } <br>})(jQuery);<br><br>调用  $("#team").tabpanel(‘add‘,"");

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.