jquery插件封装几种方法

jquery插件封装几种方法

1.jquery插件封装方法1：
(function ($) {
    $.fn.extend({
        test:function (opt) {
            opt=jQuery.extend({
                name:'name'
            },opt)
            //这里是实现代码
        }
    })
})(jQuery)

引用方法
$("div").test();
或者带参数：
$("div").test({name:"testName"});

2.jquery插件封装方法2：
可以将参数抽取出来
(function () {
        $.fn.test = function (opt) {
            opt = $.extend({},
                    $.fn.layer.defaults, opt);
                    //这里是实现代码
                    console.log(opt.width);
        }; 
        $.fn.test.defaults={
            width:'100',
            height:'100'
        }
    })(jQuery);
等价于：
 (function () {
        $.fn.layer = function (opt) {
            opt = $.extend({
                width:'100',
                height:'100'
            }, opt);
           console.log(opt.width);
        };
    })(jQuery);   

引用方法
$("div").test();

3.jquery插件封装3：
也可以像方法2将参数单独提取出来
(function ($) {
        jQuery.test = function (opt) {
           opt = $.extend({
               width:'100',
               height:'100'
           }, opt);
            console.log(opt.width);
        };
    })(jQuery);

引用方法
$.test(); 
这种不需要绑定一个标签