把jQuery的类、插件封装成seajs的模块的方法

这篇文章主要介绍了把jQuery的类、插件封装成seajs的模块的方法,需要的朋友可以参考下

注：本文使用的seajs版本是2.1.1

一、把Jquery封装成seajs的模块

define(function () {
//这里放置jquery代码 把你喜欢的jquery版本放进来就好了
 
return $.noConflict();
});

调用方法：
这样引进就可以像以前一样使用jquery

define(function (require, exports, module) {
var $ = require('./js/jquery');
 
// $(document).ready(function () {
// $("tr").wyhinterlaced({ "odd": "red", "even": "blue" });
// $("tr").wyhhover();
// })
});

二、把jquery的类封装成seajs模块

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

define(function (require, exports, module) {
var $ = require("../js/jquery");
 
var weekday = new Array(7)
weekday[0] = "星期一";
weekday[1] = "星期二";
weekday[2] = "星期三";
weekday[3] = "星期四";
weekday[4] = "星期五";
weekday[5] = "星期六";
weekday[6] = "星期日";
function GetType(arg) {
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var td = today.getDate();
var d = weekday[today.getDay() - 1];
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
switch (arg) {
case 1: //2013-09-09 09:31:56
return year + "-" + month + "-" + td + " " + h + ":" + m + ":" + s; break;
case 2: //2013-09-09 (星期一) 09:31:56
return year + "-" + month + "-" + td + " (" + d + ") " + h + ":" + m + ":" + s; break;
case 3: //09-09-2013 09:31:56
return month + "-" + td + "-" + year + " " + h + ":" + m + ":" + s; break;
case 4: //09-09-2013 星期一 09:31:56
return month + "-" + td + "-" + year + " (" + d + ") " + h + ":" + m + ":" + s; break;
case 5: //2013年09月09日 09时31分秒56
return year + "年" + month + "月" + td + "日 " + h + "时" + m + "分" + s + "秒"; break;
case 6: //2013年09月09日 星期一 09时31分秒56
return year + "年" + month + "月" + td + "日 (" + d + ") " + h + "时" + m + "分" + s + "秒"; break;
}
};
/*******************************************************
/*函数名：GetTime
/*参数：数值（包括整形浮点型都可以，浮点型会做四舍五入处理，如果不是数字，
函数将采用默认的时间格式返回！时间样式有15【1-15是有效的时间样式
超出或小于都将采用默认的样式 样式1】中）
/*功能 获取当前的系统时间 可定制格式
*******************************************************/
function GetTime(arg) {
if (!isNaN(arg)) {
var num = Math.round(arg);
if (num < 7 && num > 0) {
return GetType(num);
}
else {
var str;
var str2;
switch (num) {
case 0: return GetType(1); break;
case 7: str = GetType(2); return str.replace(/星期/, ""); break;
case 8: str = GetType(1); return str.replace(/-/, "/").replace(/-/, "/"); break;
case 9: str = GetType(2); return str.replace(/-/, "/").replace(/-/, "/");
case 10: str = GetType(2); str2 = str.replace(/-/, "/").replace(/-/, "/"); return str2.replace(/星期/, ""); break;
case 11: str = GetType(4); return str.replace(/星期/, ""); break;
case 12: str = GetType(3); return str.replace(/-/, "/").replace(/-/, "/"); break;
case 13: str = GetType(4); return str.replace(/-/, "/").replace(/-/, "/");
case 14: str = GetType(4); str2 = str.replace(/-/, "/").replace(/-/, "/"); return str2.replace(/星期/, ""); break;
case 15: str = GetType(6); return str.replace(/星期/, "");
default: return GetType(1); break;
}
}
}
else {
return GetType(1);
}
};
 
/* 获取系统的当前年数*/
function GetYear() {
var today = new Date();
return today.getFullYear();
};
 
/*获取系统的当前的月数*/
function GetMonth() {
var today = new Date();
return today.getMonth() + 1; ;
};
/*获取系统的当前的天数*/
function GetDay() {
var today = new Date();
return today.getDate(); ;
};
/*获取系统的当前的小时*/
function GetHours() {
var today = new Date();
return today.getHours();
};
/*获取系统的当前的分钟*/
function GetMinute() {
var today = new Date();
return today.getMinutes();
};
/*获取系统的当前的秒数*/
function GetSecond() {
var today = new Date();
return today.getSeconds();
};
 
/************************************************************
*函数名：TimeSubMillisecond
*参数：endtime(结束时间) starttime(起始时间)
*功能：获取两个时间的毫秒级的差值，必须写一个参数 第二个参数（起始时间）可以
*不写默认是系统当前时间
************************************************************/
function TimeSubMillisecond(endtime, starttime) {
var end = new Date(endtime).getTime();
if (!endtime) {
return -1;
}
if (!starttime) {
start = new Date().getTime();
}
else {
start = new Date(starttime).getTime();
}
if (start > end) {
return -1;
}
else {
return end - start;
}
};
/************************************************************
*函数名：TimeSubNormal
*参数：endtime(结束时间) starttime(起始时间)
*功能：获取两个时间的差值，必须写一个参数 第二个参数（起始时间）可以
*不写默认是系统当前时间
************************************************************/
function TimeSubNormal(endtime, starttime) {
var end = new Date(endtime).getTime();
var start;
if (!starttime) {
start = new Date().getTime();
}
else {
start = new Date(starttime).getTime();
}
if (start > end) {
return -1;
}
else {
var alltime = end - start;
var seconds = alltime / 1000;
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
var CDay = days;
var CHour = hours % 24;
var CMinute = minutes % 60;
var CSecond = Math.floor(seconds % 60);
var str = "";
if (CDay > 0) {
str += CDay + "天";
}
if (CHour > 0) {
str += CHour + "小时";
}
if (CMinute > 0) {
str += CMinute + "分钟";
}
if (CSecond > 0) {
str += CSecond + "秒";
}
return str;
}
};
 
exports.GetTime = GetTime;
exports.GetYear = GetYear;
exports.GetMonth = GetMonth;
exports.GetDay = GetDay;
exports.GetHours = GetHours;
exports.GetMinute = GetMinute;
exports.GetSecond = GetSecond;
exports.TimeSubMillisecond = TimeSubMillisecond;
exports.TimeSubNormal = TimeSubNormal;
})

调用方法：

define(function (require, exports, module) {
var $ = require('./js/jquery');
var a=require('./js/time');
alert(a.GetTime(3));
});

三、把jquery 插件的封装成seajs模块
下面是把jquery的一个插件封装成模块的例子

define(function (require, exports, moudles) {
return function (jquery) {
(function ($) {
//给当前行高亮
$.fn.wyhhover = function (options) {//options 经常用这个表示有许多个参数。
var defaultVal = {
BackColor: '#ccc',
};
 
var obj = $.extend(defaultVal, options);
 
return this.each(function () {
var tabObject = $(this); //获取当前对象
var oldBgColor = tabObject.css("background-color"); //获取当前对象的背景色
tabObject.hover(//定义一个hover方法。
function (){tabObject.css("background-color", obj.BackColor);},
function () {tabObject.css("background-color", oldBgColor);});
});
}
//使奇偶行不同的颜色
$.fn.wyhinterlaced = function (options) {//options 经常用这个表示有许多个参数。
var defaultVal = {
odd: '#DDEDFB',
even: '#fff',
};
var obj = $.extend(defaultVal, options);
return this.each(function () {
var tabObject = $(this); //获取当前对象
if(tabObject.index()%2==0)
{
tabObject.css("background-color", obj.odd);
}else
{
tabObject.css("background-color", obj.even);
}
});
}
})(jquery);
}
})

调用方法：
使用共享的方式调用插件

define(function (require, exports, module) {
var $ = require('./js/jquery');
require('./js/jquery_tr')($);//共享给jquery
$(document).ready(function () {
$("tr").wyhinterlaced({ "odd": "red", "even": "blue" });
$("tr").wyhhover();
})
});