jquery的封装与对象学习

1、封装学习

/// <reference path="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" />

//简单的函数封装
$.extend({
    sayHello: function (name) {
        $("body").html('Hello,' + (name ? name : 'Dude') + '!');
    }
})

//使用$.fn方式  其中this = $('a'),代表jquery选择器选中的元素
$.fn.Test = function () {
    return this.html("$.fn.zsw.Test");
}

//使用$.fn方式,带参数
$.fn.ParasTest = function (options) {
    var defaults = {
        name: "zsw"
    };

    //$.extend 第一个参数代表合并到一个新的空对象上，以保护原始数据
    var setOptions = $.extend({}, defaults, options);

    return this.html("$.fn.zsw.Test 参数：" + setOptions.name);

};

/*
复杂点的
1、构造函数
2、方法
3、注入jquery
***************************************/
//创建构造函数
var InitName = function (ele, opt) {
    this.$ele = ele,
    this.defaults = {
        name: "zsw"
    },
    this.options = $.extend({}, this.defaults, opt);
}

//增加方法
InitName.prototype = {
    AddHtml: function () {
        return this.$ele.html(this.options.name);
    }
}

//注入
$.fn.MyName = function (options) {
    var initName = new InitName(this, options);
    return initName.AddHtml();
}

//将插件内容包含在命名空间中,前面加分号是因为如果前面的内容没有加分号会影响插件
; (function () {
    var InitName = function (ele, opt) {
        this.$ele = ele,
        this.defaults = {
            name: "zsw02"
        },
        this.options = $.extend({}, this.defaults, opt);
    }

    //增加方法
    InitName.prototype = {
        AddHtml: function () {
            return this.$ele.html(this.options.name);
        }
    }

    //注入
    $.fn.MyName02 = function (options) {
        var initName = new InitName(this, options);
        return initName.AddHtml();
    }
})();

//将系统变量以参数的形式传入，可以稍微提升速度
; (function ($, window, docment, undefined) {
    //注入
    $.fn.MyName03 = function (options) {
        var InitName = function (ele, opt) {
            this.$ele = ele,
            this.defaults = {
                name: "zsw03"
            },
            this.options = $.extend({}, this.defaults, opt);
        }

        //增加方法
        InitName.prototype = {
            AddHtml: function () {
                return this.$ele.html(this.options.name);
            }
        }

        var initName = new InitName(this, options);
        return initName.AddHtml();
    }
})($, window, document)


//匿名对象方式
; (function ($, window, docment, undefined) {
    $.fn.MyName04 = function (options) {
        var Name = {
            Init: function (ele, opt) {
                this.$ele = ele,
                this.defaults = {
                    name: "zsw04"
                },
                this.options = $.extend({}, this.defaults, opt);
            },
            Addhtml: function () {
                return this.$ele.html(this.options.name);
            }
        }
        Name.Init(this, options);

        return Name.Addhtml();
    }
})($, window, document)
//匿名函数封装2
; (function ($, window, docment, undefined) {
    $.fn.Zsw = function (options) {
        var t = this;
        var Name = {
            Init: function (ele, opt) {
                this.$ele = ele,
                this.defaults = {
                    name: "zsw05"
                },
                this.options = $.extend({}, this.defaults, opt);
            },
            Addhtml: function () {
                return this.$ele.html(this.options.name);
            },
            ShowHtml: function () {
                Name.Init(t, options);
                Name.Addhtml();
            }
        }
        return Name.ShowHtml();
    };
})($, window, document)

//调用

/$.sayHello();
    //$("body").Test();
    //$("body").ParasTest();
    //$("body").ParasTest({ name: "aaa" });
    //$("body").MyName();
    //$("body").MyName02();
    //$("body").MyName03();
    //$("body").MyName04();
    $("body").Zsw();

2、对象的封装——日历(没有任何功能，纯输出格式)

<script>
    var Canledar = {
        IsRunN: function (year) {
            if (year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)) {
                return true;
            }
            else {
                return false;
            }
        },
        GetWeek: function (date) {
            var week = date.getDay();
            return week;
        },
        GetMonthDay: function (date) {
            var monthDay = 0;
            switch (date.getMonth() + 1) {
                case 1: monthDay = 31; break;
                case 2:
                    if (Canledar.IsRunN(date.getFullYear())) { monthDay = 29; }
                    else { monthDay = 28; }
                    break;
                case 3: monthDay = 31; break;
                case 4: monthDay = 30; break;
                case 5: monthDay = 31; break;
                case 6: monthDay = 30; break;
                case 7: monthDay = 31; break;
                case 8: monthDay = 31; break;
                case 9: monthDay = 30; break;
                case 10: monthDay = 31; break;
                case 11: monthDay = 30; break;
                case 12: monthDay = 31; break;
            }
            return monthDay;
        },
        ToFormat: function (date) {
            return new SimpleDateFormat(Canledar.Format).format(date)
        },
        Week: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
        DateNote: ["年", "月", "日"],
        FormatDate: "yyyy-MM-dd",
        FormatTime: "HH:mm:ss",
        CreateHtml: function (date, options) {
            var opt = $.extend({},Canledar,options)

            var strDate = "<div><span><</span><em>" + date.getFullYear() + opt.DateNote[0] + (date.getMonth() + 1) + opt.DateNote[1] + date.getDate() + opt.DateNote[2] + "</em><span>></span></div>";
            strDate += "<table>";
            strDate += "<tr><th>" + opt.Week[0] + "</th><th>" + opt.Week[1] + "</th><th>" + opt.Week[2] + "</th><th>" + opt.Week[3] + "</th><th>" + opt.Week[4] + "</th><th>" + opt.Week[5] + "</th><th>" + opt.Week[6] + "</th></tr>";
            strDate += "<tr>";
            for (var i = 1; i <= Canledar.GetWeek(date) ; i++) {
                strDate += "<td></td>";
            }

            for (var i = 0 ; i < Canledar.GetMonthDay(date) ; i++) {
                //alert((i + Canledar.GetWeek(date)) % 7)
                if (((i + Canledar.GetWeek(date)) % 7) == 0) {
                    strDate += "</tr><tr>"
                }
                strDate += "<td>" + (i + 1) + "</td>";
            }

            var lastDayWeek = Canledar.GetWeek(new Date(date, Canledar.GetMonthDay(date) * (1000 * 60 * 60 * 24)));
            for (var i = 7; i > lastDayWeek ; i--) {
                strDate += "<td></td>";
            }

            strDate += "</tr>";

            strDate += "</table>";
            console.log(strDate);
            return strDate;
        }
    };

    $(function () {
        $("#can").html(Canledar.CreateHtml(new Date(), {Week:["日","一","二","三","四","五","六"]}));
    })
</script>