YYJ.js 工具库源码解析:Ajax、DOM操作与性能计时
作者:极速慢跑时间:2026-10-26 17:59:04浏览:258
本文介绍了YYJ.js工具库的核心功能,包括Ajax异步请求封装、页面加载事件绑定、批量删除交互逻辑、基于类的DOM元素查找以及CSS样式读写方法。此外,还解析了YYJ.tick实例化对象用于计算脚本运行时间的实现原理,适用于后台应用开发场景。
代码示例如下:
/*
YYJ.js 核心功能概述*YYJ.js 核心功能涵盖后端应用逻辑处理
*当前实现包括Ajax、addLoadEvent、deleteAll、getByClass、$C(即getByClass)、$、yyjtable、setCss、getCss、iaArray等工具方法。末尾额外封装了
*一个可实例化的计时器方法YYJ.tick,用于测算脚本执行耗时
*版本标识0.1 --作者tianyi yyj
*/
var YYJ=function(){
var UniqueInstance;
function constrotor(){
return {
//ajax网络请求方法
Ajax 异步请求封装Ajax:function(method,url,data,success,fail){
var isget=method.toLowerCase()=="get";
var xmlhttp=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open(method,url,true);
if(!isget)xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
if(success)success(xmlhttp);
}else{
if(fail)fail(xmlhttp);
}
}
};
xmlhttp.send(isget?null:data);
},//Ajax
页面加载事件绑定addLoadEvent:function(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
},//addLoadEvent
批量删除交互逻辑deleteAll:function(checkallbtn,checksomebtn,submitbtn){
var checkall=YYJ.$(checkallbtn);
var checksome=YYJ.$(checksomebtn);
var submit1=YYJ.$(submitbtn);
var checkboxs=(function(){
var arr=[];
var check=document.getElementsByTagName("input");
for(i=0;i<check.length;i++){
if(check[i].getAttribute("type")!="checkbox")
continue;
arr.push(check[i]);
}
return arr;
})();
checkall.onclick=function(){
checkall.clicked=true;
for(var i=0;i<checkboxs.length;i++){
if(!checkboxs[i].checked){
checkall.clicked=false;
break;
}
}
if(!checkall.clicked){
for(var i=0;i<checkboxs.length;i++){
checkboxs[i].checked=true;
}
}else{
for(var i=0;i<checkboxs.length;i++){
checkboxs[i].checked=false;
}
}
}
checksome.onclick=function(){
for(var x in checkboxs){
checkboxs[x].checked=!checkboxs[x].checked;
}
}
submit1.onclick=function(){
var haschecked=false;
var beSureDel=false;
for(var i=0;i<checkboxs.length;i++){
if(checkboxs[i].checked){
haschecked=true;
break;
}
}
haschecked?function(){
beSureDel=confirm("确定要删除选中项吗?");
}():function(){
alert("没有选中项!");
beSureDel=false;
}();
return beSureDel;
}
},//deleteall
DOM元素查找与样式操作getByClass:function(classname,parent,nodename){
var s=(parent||document).getElementsByTagName(nodename||"*");
return function(){
var a=[];
for(var i=0,j=s.length;i<j;i++){
if(!s[i].className) continue;
var name=" "+s[i].className+" ";
if(name.indexOf(" "+classname+" ")!=-1){
a.push(s[i]);
}
}
return a;
}();
},
$C:function(classname,parent,nodename){
return YYJ.getByClass(classname,parent,nodename);
},//getByClass
$:function(str){
return document.getElementById(str);
},//getById
yyjtable:function(tableId){
var tbl=YYJ.$(tableId);
var trs=tbl.getElementsByTagName("tr");
for(var i=1;i<trs.length;i++){
if(i%2!=0){
trs[i].style.backgroundColor="#FFFFF0";
}else{
trs[i].style.backgroundColor="white";
}
trs[i].onmouseover=function(){
this.col1=this.style.backgroundColor;
this.style.backgroundColor="#FFFACD";
}
trs[i].onmouseout=function(){
this.style.backgroundColor=this.col1;
}
}
},//yyjtable
/*使用方法
YYJ.setCss([YYJ.$("table1")],{
color:"red",
backgroundColor:"silver"
});*/
setCss:function(eles,opt){
if(!eles||!opt)return;
if(!eles.length){
throw new Error("setCss的第一个参数要求为数组!");
}
for(var i=0;j=eles[i];i++){
try{
for(var x in opt){
j.style[x]=opt[x];
}
}catch(ex){}
}
},//setCss
/*使用方法
var css=YYJ.getCss(YYJ.$("table1"),["backgroundColor"]);
alert(css["backgroundColor"]);*/
getCss:function(ele,opt){
if(!this.isArray(opt)){
throw new Error("getCss的第二个参数要求为string数组!");
}
var css={};
for(var i=0,j=opt.length;i<j;i++){
try{
css[opt[i]]=ele.style[opt[i]];
}catch(ex){}
}
return css;
},//getCss
isArray:function(opt){
return Object.prototype.toString.call(opt)=="[object Array]"
}
};
}
function getUniqueInstance(){
if(UniqueInstance){
return UniqueInstance;
}
UniqueInstance=constrotor();
return UniqueInstance;
}
return getUniqueInstance();
}();
//脚本执行时间
/*使用方法
var ti=new YYJ.ticks();
ti.begin();
代码段
ti.end();
alert(ti.tick);*/
脚本运行时间计时器YYJ.ticks=function(){
var starttick,stoptick;
return function(){
this.begin=function(){
starttick=new Date();
}
this.end=function(){
stoptick=new Date();
this.tick=stoptick-starttick;
}
}
}();作者最新文章
JS处理特殊字符时怎么安全生成JSON
2026-11-05 15:44:51
内部脚本与外部js文件的区别及优缺点对比
2026-11-05 14:42:19
JavaScript前端性能优化指南:提升页面加载速度与渲染效率
2026-11-05 13:48:26
主流JS反混淆工具对比:de4js、unminify与AST还原方案评测
2026-11-05 12:00:56
Nuxt.js 性能优化技巧:代码分割与组件懒加载
2026-11-03 23:32:56
