封装一个简单的插件

最近面试，遇到求职者建立上写道熟练掌握jQuery。然后我就问了，知道怎么封装插件吗？然后就没有然后了。

写一个简单的插件，就是一个提示弹框：

(function($){

$.fn.tips =function(options){

var opts =null;

        var defaults = {

text:"一个提示",

            color:"#f7f7f7",

            padding:"18px",

            background:"#000",

            cover:"rgba(0,0,0,.4)"

        };

        opts =$.extend({}, defaults, options);

        var _obj = {

data: {

txt:opts.text,

                col:opts.color,

                pad:opts.padding,

                bac:opts.background,

                cov:opts.cover

            },

            _init:function(){

this.add();

                this.hid();

            },

            add:function(){

var _inner =$("<div>");

                _inner.addClass("tips-center");

                $("body").append(_inner);

                _inner.text(this.data.txt);

                _inner.css({

"padding" :this.data.pad,

                    "background" :this.data.bac,

                    "color" :this.data.col,

                    "position" :"fixed",

                    "zIndex":"10",

                    "top" :"50%",

                    "left" :"50%",

                    "border-radius" :"5px",

                    "-webkit-transform" :"translate(-50%,-50%)",

                    "-moz-transform" :"translate(-50%,-50%)",

                    "transform" :"translate(-50%,-50%)"

                });

                $("html").height("100%");

                $("body").height("100%");

                var _back =$("<div>");

                _back.addClass("tips-back");

                $("body").append(_back);

                _back.css({

"background" :this.data.cov,

                    "position" :"fixed",

                    "zIndex":"9",

                    "height":"100%",

                    "width":"100%",

                    "top":"0",

                    "left":"0"

                });

            },

            hid:function(){

if($(".tips-back")&&$(".tips-center")){

$(".tips-back").click(function(){

$(".tips-center").remove();

                        $(".tips-back").remove();

                    })

}

}

}

return function(){

_obj._init();

        }();

    };

})(jQuery);

使用：

$("body").tips({

text:"only you"

});

简单聊一聊插件封装的原理：

只有对于jQuery的插件封装有两种方式：一种是$.fn.xxx=function(){]，另一种是$.fn.extend({xxx})。

只有一点你要注意的就是，在插件的范围内，this代表将要执行的插件内容的DOM对象。

一般，都会将你要写的插件包含在一个封闭程序中，防止发生冲突，也为了防止$被覆盖掉：

;(function($){

$.fn.xxx = function (){

// 执行的插件代码

}

})(jQuery);