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>