从jquery.tip理解jquery插件开发

jquery.tips.js是基于jQuery的一个提示插件，简单易用，源代码很简洁！作为一个简单的jQuery插件来说，对于理解jQuery插件的开发思路是很有帮助的。源码如下：

/**
 * jquery tips 提示插件 jquery.tips.js v0.1beta
 *
 * 使用方法
 * $(selector).tips({  //selector 为jquery选择器
 * msg:'your messages!',  //你的提示消息 必填
 * side:1, //提示窗显示位置 1，2，3，4 分别代表 上右下左 默认为1（上） 可选
 * color:'#FFF', //提示文字色 默认为白色 可选
 * bg:'#F00',//提示窗背景色 默认为红色 可选
 * time:2,//自动关闭时间 默认2秒 设置0则不自动关闭 可选
 * x:0,//横向偏移 正数向右偏移 负数向左偏移 默认为0 可选
 * y:0,//纵向偏移 正数向下偏移 负数向上偏移 默认为0 可选
 * })
 *
 *
 */
(function ($) {
    $.fn.tips = function(options){
        var defaults = {
            side:1,
            msg:'',
            color:'#FFF',
            bg:'#F00',
            time:2,
            x:0,
            y:0
        }
        var options = $.extend(defaults, options);
        if (!options.msg||isNaN(options.side)) {
            throw new Error('params error');
        }
        if(!$('#jquery_tips_style').length){
            var style='<style id="jquery_tips_style" type="text/css">';
            style+='.jq_tips_box{padding:10px;position:absolute;overflow:hidden;display:inline;display:none;z-index:10176523;}';
            style+='.jq_tips_arrow{display:block;width:0px;height:0px;position:absolute;}';
            style+='.jq_tips_top{border-left:10px solid transparent;left:20px;bottom:0px;}';
            style+='.jq_tips_left{border-top:10px solid transparent;right:0px;top:18px;}';
            style+='.jq_tips_bottom{border-left:10px solid transparent;left:20px;top:0px;}';
            style+='.jq_tips_right{border-top:10px solid transparent;left:0px;top:18px;}';
            style+='.jq_tips_info{word-wrap: break-word;word-break:normal;border-radius:4px;padding:5px 8px;max-width:130px;overflow:hidden;box-shadow:1px 1px 1px #999;font-size:12px;cursor:pointer;}';
            style+='</style>';
            $(document.body).append(style);
        }
        this.each(function(){
            var element=$(this);
            var element_top=element.offset().top,element_left=element.offset().left,element_height=element.outerHeight(),element_width=element.outerWidth();
            options.side=options.side<1?1:options.side>4?4:Math.round(options.side);
            var sideName=options.side==1?'top':options.side==2?'right':options.side==3?'bottom':options.side==4?'left':'top';
            var tips=$('<div class="jq_tips_box"><i class="jq_tips_arrow jq_tips_'+sideName+'"></i><div class="jq_tips_info">'+options.msg+'</div></div>').appendTo(document.body);
            tips.find('.jq_tips_arrow').css('border-'+sideName,'10px solid '+options.bg);
            tips.find('.jq_tips_info').css({
                color:options.color,
                backgroundColor:options.bg
            });
            switch(options.side){
                case 1:
                    tips.css({
                        top:element_top-tips.outerHeight()+options.x,
                        left:element_left-10+options.y
                    });
                    break;
                case 2:
                    tips.css({
                        top:element_top-20+options.x,
                        left:element_left+element_width+options.y
                    });
                    break;
                case 3:
                    tips.css({
                        top:element_top+element_height+options.x,
                        left:element_left-10+options.y
                    });
                    break;
                case 4:
                    tips.css({
                        top:element_top-20+options.x,
                        left:element_left-tips.outerWidth()+options.y
                    });
                    break;
                default:
            }
            var closeTime;
            tips.fadeIn('fast').click(function(){
                clearTimeout(closeTime);
                tips.fadeOut('fast',function(){
                    tips.remove();
                })
            })
            if(options.time){
                closeTime=setTimeout(function(){
                    tips.click();
                },options.time*1000);
                tips.hover(function(){
                    clearTimeout(closeTime);
                },function(){
                    closeTime=setTimeout(function(){
                        tips.click();
                    },options.time*1000);
                })
            }
        });
        return this;
    };
})(jQuery);

插件分解：

1.   ;(function ($) {})(jQuery);

通用的jQuery插件格式。

2.  $.fn.tips = function(options){}

这个tips就是自定义的API函数：

如果函数基于jQuery原型那么API将会挂载于jQuery上，例如：$.tips    $.extend(object)  

如果基于jQuery对象，那么API将会作用于jQuery对象上，如$(selector).tips

3.  上下文context this对象

 返回当前jQuery selector对象或者是调用当前API的对象

4.  $.extend()

这是jQuery对象的深拷贝实现函数，可以扩展提取两个对象的并集，使用此函数可以将默认的对象扩展添加修改属性等。 

剩下的就是函数被调用时针对this对象所做的一些逻辑操作了。