jQuery插件开发

前端

类级别的插件开发

类级别的插件开发就是给jQuery添加静态方法
· 添加新的全局函数
· 使用$.extend(obj)
· 使用命名空间

需求：写一个弹窗。针对于这个需求，下面使用三种方式实现一个弹窗插件。

直接给jQuery添加全局函数

实现：

//插件代码
$.myAlter = function(var){
    alert(var);
}
//调用
$.myAlter("使用全局函数实现的弹窗");

用$.extend(obj)方法

实现：

//插件代码
$.extend({
    myAlter:function(var){
        alert(var);
    }
});
//调用
$.myAlter("使用$.extend()方法实现的弹窗");

使用命名空间

//插件代码
$.wxf={
    myAlter:function(var){
        alert(var);
    }
}
//调用
$.wxf.myAlter("使用命名空间实现的弹窗");

代码实例：设置div水平上下居中

$.wxf={
    centerDiv:function(obj){
        obj.css({
            "top":($(window).height()-obj.height())/2,
            "left":($(window).height()-obj.height())/2,
            "position":"absolue"
        });
        return obj;
    }
}

对象级别的插件开发

插件开发模板

;(function($){
    $.fn.plugin = function(options){
        var defaults={
            //各种参数,属性
        }
        var options = $.extend({}, defaults,options);
        this.each(function(){
            //实现功能的代码
        });
    }
})(jQuery);