jq插件封装，面向对象插件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="clickBtn">click me</div>
</body>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<script>
    /**
     *number:向后推算月份
     */
    $.extend({
        month:function(startY,startM,startD,number){
            var mydate=new Date(parseInt(startY),parseInt(startM)+parseInt(number),parseInt(startD));
            var endY=mydate.getFullYear();
            var endM=mydate.getMonth().toString();
            var endD=mydate.getDate().toString();
            if(endM.length<=1){
                endM="0"+endM;
            }
            if(endD.length<=1){
                endD="0"+endD;
            }
            return{
               year:endY,
                month:endM,
                day:endD
            }
        },
        trigger:function(data1,data2,data3,number,callback){
            callback.call(this,$.month(data1,data2,data3,number))
        }
    });
    $.fn.fun=function(options){
        //注意到上面代码调用extend时会将defaults的值改变，这样不好，因为它作为插件因有的一些东西应该维持原样，另外就是如果你在后续代码中还要使用这些默认值的话，当你再次访问它时它已经被用户传进来的参数更改了。
        var defaults = {
            'color': 'red'
        };
        //一个好的做法是将一个新的空对象做为$.extend的第一个参数，defaults和用户传递的参数对象紧随其后，这样做的好处是所有值被合并到这个空对象上，保护了插件里面的默认值。
        //{}将一个空对象做为第一个参数
        var settings = $.extend({},defaults,options);
        //options对象和defaults对象如果有冲突就覆盖defaults的值
        return this.css({
            'color': settings.color,
            'fontSize': settings.fontSize,
            'backgroundColor': settings.backgroundColor
        });
    }
</script>
<script>

    $(function(){
//http://www.cnblogs.com/wayou/p/jquery_plugin_tutorial.html
        ;(function($, window, document,undefined) {
            //定义Beautifier的构造函数
            var Beautifier = function(ele, opt) {
                this.$element = ele,
                        this.defaults = {
                            'color': 'red',
                            'fontSize': '12px',
                            'textDecoration': 'none'
                        },
                        this.options = $.extend({}, this.defaults, opt)
            };
            //定义Beautifier的方法
            Beautifier.prototype = {
                beautify: function() {
                    return this.$element.css({
                        'color': this.options.color,
                        'fontSize': this.options.fontSize,
                        'textDecoration': this.options.textDecoration
                    });
                }
            };
            //在插件中使用Beautifier对象
            $.fn.myPlugin = function(options) {
                //创建Beautifier的实体
                var beautifier = new Beautifier(this, options);
                //调用其方法
                return beautifier.beautify();
            }
        })(jQuery, window, document);

        $.trigger("2016","9","14","1",function(e){
            console.log(e);
        });
//        $("#clickBtn").fun({
//            'color': '#2C9929',
//            'fontSize':'20px',
//            'backgroundColor':'red'
//        });
        $('#clickBtn').myPlugin({
            'color': '#2C9929',
            'fontSize': '20px'
        });
    })
</script>
</html>
posted @ 2016-09-14 15:59  小贱贱！  阅读(331)  评论(0)    收藏  举报