YYJ.js 工具库源码解析:Ajax、DOM操作与性能计时

作者:极速慢跑

时间:2026-10-26

浏览:257

本文介绍了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;
         }
     }
 }();

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章