1、处理数字变化方法,_change_num:变化数, _operate:数学运算符,加:'+',减:'-',乘:'*',除:'/':
domNumChange: function(dom, _change_num, _operate) {
var _dom = this.__getDom(dom),
_current_num = _dom.innerHTML,
_operate_str = _current_num + _operate + _change_num;
_dom.innerHTML = eval(_operate_str);
}
应用场景,如图:
在Team任务模块中,改变任务的状态的时候需要修改头部相应的数据统计,一个是任务数,一个是故事点统计;由于没有使用AngularJS这类的JS 框架,所以只能使用JS手动去修改了,这是个十分恼人的操作;
2、延时删除DOM内容,一般在提交数据显示提示的时候经常用到,比较简单,只是对setTimeout的简单处理,_time:时间,毫秒:
domContentDelete:function(dom,_time){
var _dom=this.__getDom(dom);
setTimeout(function(dom){
_dom.innerHTML="";
}, _time);
}
3、获取元素所有的属性值,返回JSON对象,直接通过属性名访问;
(使用'_'替换'-'),attributeValue=domAttributeValues(dom).attributeName
domAttributeValues:function(dom){
var _dom=this.__getDom(dom),
_attributes=_dom.attributes,
_length=_attributes.length,
_json='';
for(var i=0;i<_length;i++){
_json+='\''+_attributes[i].nodeName.replace(/-/g,'_')+'\':\''+_attributes[i].nodeValue+'\',';
}
_json='({'+_json+'})';
_json=_json.replace(/,}/,'}');
return eval(_json);
}
4、domToggle:显示隐藏,event:绑定事件,zone:事件触发区域,target:显示隐藏区域:
domToggle:function(event,zone,target){
var _zone = this.__getDom(zone),
_target= this.__getDom(target);
if(_zone){
_zone.style.cursor='pointer';
_zone.addEventListener(event,function(evt){
var _display=_target.style.display;
if(_display=='none'){
_target.style.display='block';
}
else if(_display=='block'){
_target.style.display='none';
}
});
}
else{
console.error('HTMLUtils domToggle ERROR,zone:'+zone+' can not found!');
}
}
5、domAutoBindEvent:DOM自动绑定同一个事件,event:事件,callback:事件处理函数:
domAutoBindEvent:function(dom,event,callback){
var _doms=this.__getDoms(dom),_length=_doms.length;
if(_doms){
for(var i=0;i<_length;i++){
var _dom=_doms[i];
_dom.addEventListener(event,callback,false);
}
}
}
工具测试,一些测试的HTML:
<span id='num-1'>2</span>
<span id='num-2'>2</span>
<span id='num-3'>2</span>
<span id='num-4'>2</span>
<span id='num-5'>21</span>
<span id='delete-1'>我要被删除啦~</span>
<span id='attr-1' value-1='value-1 value' value-2='value-2 value' value-3='value-3 value' value-4='value-4 value' value-5 value-6='' value-7-8='value-7-8 9'></span>
<div id='click-zone'><span>点击区域</span></div>
<div id='target-zone' style='display:none'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div auto-event>
<span>相同事件1-1</span>
<span>相同事件1-2</span>
<span>相同事件1-3</span>
</div>
<div auto-event>
<span>相同事件2-1</span>
<span>相同事件2-2</span>
<span>相同事件3-3</span>
</div>
如图:
JS方法使用:
(function(dom,_change_num,_operate){
HTMLUtils.domNumChange(dom,_change_num,_operate);
})('#num-1',2,"+");
(function(dom,_change_num,_operate){
HTMLUtils.domNumChange(dom,_change_num,_operate);
})('#num-2',1,"-");
(function(dom,_change_num,_operate){
HTMLUtils.domNumChange(dom,_change_num,_operate);
})('#num-3',6,"*");
(function(dom,_change_num,_operate){
HTMLUtils.domNumChange(dom,_change_num,_operate);
})('#num-4',-1,"+");
(function(dom,_change_num,_operate){
HTMLUtils.domNumChange(dom,_change_num,_operate);
})('#num-5',3,"/");
(function(dom,_time){
HTMLUtils.domContentDelete(dom,_time);
})('#delete-1',3000);
(function(dom){
var _dom_attrs=HTMLUtils.domAttributeValues(dom);
console.log(_dom_attrs.id);
console.log(_dom_attrs.value_1);
})('#attr-1');
(function(event,zone,target){
HTMLUtils.domToggle(event,zone,target);
})('click','#click-zone','#target-zone');
(function(dom,event,callback){
HTMLUtils.domAutoBindEvent(dom,event,callback);
})('[auto-event]','click',function(e){
var target = e.target;
console.log(target.tagName);
if (target.tagName === 'SPAN'){
alert(e.target.innerHTML);
}
});
完整的JS,Git@OSC地址:https://git.oschina.net/tanweijie/HTMLUtils.js
/**
* HTML操作工具(HTMLUtils)
*
* { 方法参数,dom:选择元素字符,如:id:'#id',class:'.class',attribute:'[attribute]|[attribute=attributeValue]' }
*
* { domNumChange:DOM数字变化,_change_num:变化数, _operate:数学运算符,加:'+',减:'-',乘:'*',除:'/' }
*
* { domContentDelete:延时删除DOM内容,_time:时间,毫秒 }
*
* { domAttributeValues:获取元素所有的属性值,返回JSON对象,直接通过属性名访问(使用'_'替换'-'),
* attributeValue=domAttributeValues(dom).attributeName }
*
* { domToggle:显示隐藏,event:绑定事件,zone:事件触发区域,target:显示隐藏区域 }
*
* { domAutoBindEvent:DOM自动绑定同一个事件,event:事件,callback:事件处理函数 }
*
*
*/
var HTMLUtils = {
__getType: function(_obj) {
return typeof(_obj);
},
__getDom:function(_dom){
return document.querySelector(_dom);
},
__getDoms:function(_dom){
return document.querySelectorAll(_dom);
},
domNumChange: function(dom, _change_num, _operate) {
var _dom = this.__getDom(dom),
_current_num = _dom.innerHTML,
_operate_str = _current_num + _operate + _change_num;
_dom.innerHTML = eval(_operate_str);
},
domContentDelete:function(dom,_time){
var _dom=this.__getDom(dom);
setTimeout(function(dom){
_dom.innerHTML="";
}, _time);
},
domAttributeValues:function(dom){
var _dom=this.__getDom(dom),
_attributes=_dom.attributes,
_length=_attributes.length,
_json='';
for(var i=0;i<_length;i++){
_json+='\''+_attributes[i].nodeName.replace(/-/g,'_')+'\':\''+_attributes[i].nodeValue+'\',';
}
_json='({'+_json+'})';
_json=_json.replace(/,}/,'}');
return eval(_json);
},
domToggle:function(event,zone,target){
var _zone = this.__getDom(zone),
_target= this.__getDom(target);
if(_zone){
_zone.style.cursor='pointer';
_zone.addEventListener(event,function(evt){
var _display=_target.style.display;
if(_display=='none'){
_target.style.display='block';
}
else if(_display=='block'){
_target.style.display='none';
}
});
}
else{
console.error('HTMLUtils domToggle ERROR,zone:'+zone+' can not found!');
}
},
domAutoBindEvent:function(dom,event,callback){
var _doms=this.__getDoms(dom),_length=_doms.length;
if(_doms){
for(var i=0;i<_length;i++){
var _dom=_doms[i];
_dom.addEventListener(event,callback,false);
}
}
}
};