把jQuery的類、插件封裝成seajs的模塊的方法
注：本文使用的seajs版本是2.1.1
一、把Jquery封裝成seajs的模塊
//這里放置jquery代碼 把你喜歡的jquery版本放進(jìn)來就好了
return $.noConflict();
});
調(diào)用方法：
這樣引進(jìn)就可以像以前一樣使用jquery
var $ = require('./js/jquery');
// $(document).ready(function () {
// $("tr").wyhinterlaced({ "odd": "red", "even": "blue" });
// $("tr").wyhhover();
// })
});
二、把jquery的類封裝成seajs模塊
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時(shí)31分秒56
return year + "年" + month + "月" + td + "日 " + h + "時(shí)" + m + "分" + s + "秒"; break;
case 6: //2013年09月09日 星期一 09時(shí)31分秒56
return year + "年" + month + "月" + td + "日 (" + d + ") " + h + "時(shí)" + m + "分" + s + "秒"; break;
}
};
/*******************************************************
/*函數(shù)名：GetTime
/*參數(shù)：數(shù)值（包括整形浮點(diǎn)型都可以，浮點(diǎn)型會做四舍五入處理，如果不是數(shù)字，
函數(shù)將采用默認(rèn)的時(shí)間格式返回！時(shí)間樣式有15【1-15是有效的時(shí)間樣式
超出或小于都將采用默認(rèn)的樣式 樣式1】中）
/*功能 獲取當(dāng)前的系統(tǒng)時(shí)間 可定制格式
*******************************************************/
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);
}
};
/* 獲取系統(tǒng)的當(dāng)前年數(shù)*/
function GetYear() {
var today = new Date();
return today.getFullYear();
};
/*獲取系統(tǒng)的當(dāng)前的月數(shù)*/
function GetMonth() {
var today = new Date();
return today.getMonth() + 1; ;
};
/*獲取系統(tǒng)的當(dāng)前的天數(shù)*/
function GetDay() {
var today = new Date();
return today.getDate(); ;
};
/*獲取系統(tǒng)的當(dāng)前的小時(shí)*/
function GetHours() {
var today = new Date();
return today.getHours();
};
/*獲取系統(tǒng)的當(dāng)前的分鐘*/
function GetMinute() {
var today = new Date();
return today.getMinutes();
};
/*獲取系統(tǒng)的當(dāng)前的秒數(shù)*/
function GetSecond() {
var today = new Date();
return today.getSeconds();
};
/************************************************************
*函數(shù)名：TimeSubMillisecond
*參數(shù)：endtime(結(jié)束時(shí)間) starttime(起始時(shí)間)
*功能：獲取兩個(gè)時(shí)間的毫秒級的差值，必須寫一個(gè)參數(shù) 第二個(gè)參數(shù)（起始時(shí)間）可以
*不寫默認(rèn)是系統(tǒng)當(dāng)前時(shí)間
************************************************************/
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;
}
};
/************************************************************
*函數(shù)名：TimeSubNormal
*參數(shù)：endtime(結(jié)束時(shí)間) starttime(起始時(shí)間)
*功能：獲取兩個(gè)時(shí)間的差值，必須寫一個(gè)參數(shù) 第二個(gè)參數(shù)（起始時(shí)間）可以
*不寫默認(rèn)是系統(tǒng)當(dāng)前時(shí)間
************************************************************/
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 + "小時(shí)";
}
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;
})
調(diào)用方法：
var $ = require('./js/jquery');
var a=require('./js/time');
alert(a.GetTime(3));
});
三、把jquery 插件的封裝成seajs模塊
下面是把jquery的一個(gè)插件封裝成模塊的例子
return function (jquery) {
(function ($) {
//給當(dāng)前行高亮
$.fn.wyhhover = function (options) {//options 經(jīng)常用這個(gè)表示有許多個(gè)參數(shù)。
var defaultVal = {
BackColor: '#ccc',
};
var obj = $.extend(defaultVal, options);
return this.each(function () {
var tabObject = $(this); //獲取當(dāng)前對象
var oldBgColor = tabObject.css("background-color"); //獲取當(dāng)前對象的背景色
tabObject.hover(//定義一個(gè)hover方法。
function (){tabObject.css("background-color", obj.BackColor);},
function () {tabObject.css("background-color", oldBgColor);});
});
}
//使奇偶行不同的顏色
$.fn.wyhinterlaced = function (options) {//options 經(jīng)常用這個(gè)表示有許多個(gè)參數(shù)。
var defaultVal = {
odd: '#DDEDFB',
even: '#fff',
};
var obj = $.extend(defaultVal, options);
return this.each(function () {
var tabObject = $(this); //獲取當(dāng)前對象
if(tabObject.index()%2==0)
{
tabObject.css("background-color", obj.odd);
}else
{
tabObject.css("background-color", obj.even);
}
});
}
})(jquery);
}
})
調(diào)用方法：
使用共享的方式調(diào)用插件
var $ = require('./js/jquery');
require('./js/jquery_tr')($);//共享給jquery
$(document).ready(function () {
$("tr").wyhinterlaced({ "odd": "red", "even": "blue" });
$("tr").wyhhover();
})
});
相關(guān)文章
Seajs 簡易文檔 提供簡單、極致的模塊化開發(fā)體驗(yàn)
這篇文章主要介紹了Seajs 簡易文檔 提供簡單、極致的模塊化開發(fā)體驗(yàn),非官方文檔，整理來自己官方文檔的文字與實(shí)例，方便速查。需要的朋友可以參考下2016-04-04
這篇文章主要介紹了SeaJS入門教程系列之完整示例,演示了一個(gè)完整的SeaJS開發(fā)例子,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了LABjs、RequireJS、SeaJS的區(qū)別、JS文件加載器、JS塊加載器等知識,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了seajs模塊壓縮問題與解決方法,結(jié)合實(shí)例形式分析了seajs模塊壓縮過程中出現(xiàn)的問題及相應(yīng)的解決方法,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了SeaJS入門教程,講述了SeaJS的由來,JavaScript傳統(tǒng)開發(fā)模式和模塊化開發(fā)的對比,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了seajs中最常用的7個(gè)功能、配置,結(jié)合實(shí)例形式簡單分析了seajs中常用的項(xiàng)目配置、模塊加載、定義、獲取等操作技巧,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了seajs中模塊依賴的加載處理,結(jié)合實(shí)例形式分析了seajs模塊依賴與加載的原理、相關(guān)注意事項(xiàng)與使用方法,需要的朋友可以參考下2017-10-10
Seajs是一個(gè)Web模塊加載框架，追求簡單、自然的代碼書寫和組織方式，Sea.js 遵循 CMD 規(guī)范，模塊化JS代碼。依賴的自動加載、配置的簡潔清晰，可以讓程序員更多地專注編碼。這篇文章為seajs深入學(xué)習(xí)的第一篇，主要介紹的基礎(chǔ)性的內(nèi)容，感興趣的朋友們可以參考學(xué)習(xí)。2016-10-10
圖片懶加載是前端開發(fā)中一項(xiàng)重要的性能優(yōu)化策略,它能夠明顯縮短頁面加載時(shí)間,提升用戶的瀏覽體驗(yàn),在本文中,我們將深入探討在Vue開發(fā)時(shí)候如何實(shí)現(xiàn)圖片懶加載,同時(shí)探討多種實(shí)現(xiàn)途徑,需要的朋友可以參考下2023-08-08
Seajs是什么及sea.js 由來，特點(diǎn)以及優(yōu)勢
這篇文章主要介紹了Seajs的相關(guān)知識和和學(xué)習(xí)心得,適合剛接觸SeaJS的同學(xué),需要的朋友可以參考下，有更好的新手教程或文檔，歡迎推薦、分享2016-10-10