jQuery 插件开发指南

171 阅读 0 评论 113 点赞

我是靠谱客的博主自由刺猬，最近开发中收集的这篇文章主要介绍jQuery 插件开发指南，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

那么首先我们来简单的看一下最正统的 jQuery 插件定义方式：

复制代码代码如下:

(function ($) {     

$.fn.插件名 = function (settings) {         

//默认参数         

var defaultSettings = {

        }         /* 合并默认参数和用户自定义参数 */        

settings = $.extend(defaultSettings, settings);

return this.each(function () {             //代码         });   //插件在元素内多次出现

} })(jQuery);

先来看模板中的第一行代码（当然我们要把这一行代码的后半部分给揪出来一起看，不然第一行就完全无意义了）：

复制代码代码如下:

(function ($) {

})(jQuery);

这行代码其实是用于创建一个匿名函数。如果你对匿名函数和闭包不了解，将会对这种代码非常疑惑，那么强烈建议您阅读【详谈JavaScript 匿名函数及闭包】这篇文章。

jQuery 的继承方法 $.extend —— $.extend 在jQuery 插件开发中有个很重要的作用，就是用于合并参数。

复制代码代码如下:

$.fn.tip = function (settings) {     

var defaultSettings = {            

//颜色     

color: 'yellow',        

//延迟        

timeout: 200     }

 /* 合并默认参数和用户自定义参数 */   

settings = $.extend(defaultSettings, settings);    

alert(settings.input); <br>}

jQuery 插件定义第二种方式：

复制代码代码如下:

(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',"");