刚接触js的OO编程,做了一个js无限级下拉,感觉还是像过程化编程,还有内存泄漏问题,请指点
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
/**
* @description js与DOM结合的无限级下拉
* @Copy-Right: All Free
* @author zjstandup@126.com
* @version beta 1
* 全国省市两级数据在IE6中测试内存消耗不断增长,火狐下不会
* 有优化方式麻烦联系作者,谢谢
*/
function infinity(){
this.selectWidth = '100px'; //下拉表的宽度
this.selectSize = 0; //下拉表显示的行数
//初始化
this.init = function( objDiv, objTarget, id){
this.objDiv = objDiv; //要挂载SELECT元素的对象
this.objTarget = objTarget; //分类数组,格式为: target[id] = [parent_id, 'cate_name']; 顶级分类的parent_id为0
this.recursion( id); //向上递归,选中默认的值
this.next( id); //如果还有子类
}
this.recursion = function ( id){
var select = this.mkselect(); //创建一个SELECT元素
select.options.add( this.mkoption()); //附加一个'请选择'下拉
//如果是上一级,则要附加在最前边,与next想反
this.objDiv.lastChild ? this.objDiv.insertBefore(select, this.objDiv.firstChild) : this.objDiv.appendChild( select);
for(var i in this.objTarget){
//如果没有默认值则选中顶级分类
if( (id&&this.objTarget[i][0] == this.objTarget[id][0])||(!id&&this.objTarget[i][0]==0)){
var option = this.mkoption(i, this.objTarget[i][1])
select.options.add( option);
option.selected = (i==id) ? 'selected' : '';
}
}
//如果上级分类不为0,向上递归
if( id && this.objTarget[id][0] !=0 ){
this.recursion( this.objTarget[id][0])
}
}
this.mkselect = function (){
var objThis = this;
var obj = document.createElement('select');
obj.size = this.selectSize;
obj.style.width = this.selectWidth;
//CHANGE事件,改变下拉表,则清除子分类下拉,闭包?内存泄漏?
function change(){
while( obj.nextSibling)
{
typeof(obj.nextSibling.detachEvent)!='undefined' ? obj.nextSibling.detachEvent('onchange', change) : obj.nextSibling.removeEventListener('change', change, false);
obj.nextSibling.parentNode.removeChild( obj.nextSibling);
}
objThis.next( obj.value);
}
typeof(obj.attachEvent)!='undefined' ? obj.attachEvent("onchange", change) : obj.addEventListener('change', change, false);
return obj;
}
this.mkoption = function (value, text)
{
var obj = document.createElement('option');
obj.text = text ? text : '--请选择--';
obj.value = value ? value : '';
return obj;
}
this.next = function ( id){
if( ! this.objTarget[id]) return;
//查找是否有子类
var select;
for( var i in this.objTarget){
if ( this.objTarget[i][0] == id)
{
if( ! select )
{
select = this.mkselect();
select.options.add( this.mkoption());
}
select.options.add( this.mkoption(i, this.objTarget[i][1]));
}
}
select ? this.objDiv.appendChild( select) : '';
}
this.getvalue = function (){
var obj = this.objDiv.lastChild;
while( obj && !obj.value ){
obj = obj.previousSibling;
}
if( ! obj){
alert('请选择一项!');
}else{
alert( obj.value);
}
}
}
</script>
<script>
var wuji1 = new Array();
wuji1[1] = [0, '1级'];
wuji1[2] = [1, '2级'];
wuji1[3] = [2, '3级'];
wuji1[4] = [3, '4级'];
var wuji2 = new Array();
wuji2[1] = [0, '1级'];
wuji2[2] = [1, '2级'];
wuji2[3] = [2, '3级'];
wuji2[4] = [3, '4级'];
window.onload = function (){
inf1 = new infinity();
inf1.init( document.getElementById('wuji1'), wuji1);
inf2 = new infinity();
//初始化:要挂载的点,数据源,初始数值
inf2.init( document.getElementById('wuji2'), wuji2, 4);
}
</script>
<div id='wuji1'> </div> <input type='button' onclick='inf1.getvalue()' value='查看第一个' />
<p>
<div id='wuji2'> </div> <input type='button' onclick='inf2.getvalue()' value='查看第二个' />
}
typeof(obj.attachEvent)!='undefined' ? obj.attachEvent("onchange", change) : obj.addEventListener('change', change, false);
问题该是在这里了.
