本文共 1983 字，大约阅读时间需要 6 分钟。
我们在使用JS制作控件时,经常使用的方法就是建立一个function对象,然后对function的原型对象进行扩展对象的建立,这样在建立function对象的实例后,就可以访问到prototype原型所指定的新对象了.例如:
定义一个function对象
function zzl(){…}
为zzl对象建立一个原型扩展对象
zzl.prototype = { display: function () { alert("欢迎您"); },
property: { name: "zzlController",
version: "1.1.0",
Isregister: true
},
showinfo: function (version) { alert("版本：" + version); }
}
zzl = new zzl();
zzl.showinfo(zzl.property.version);
有了上面的概念基础之后,再看我们设计的菜单
代码结构:
源代码如下:
// 菜单添加到容器中
var zzlMenuBlock = { list: new Array(),
add: function(component) { this.list.push(component);
},
print: function(container) { var str = "
for (var i = 0, len = this.list.length; i < len; i++) { str += this.list[i].getValue();
}
document.getElementById(container).innerHTML = str + "";
}
}
// 主菜单，必须有子菜单的菜单项
function zzlMenu(text, title, href) { this.menuComponents = new Array();
this.text = text;
this.title = title;
this.href = href;
}
// 主菜单的扩展方法
zzlMenu.prototype = { getValue: function() { if (this.menuComponents.length == 0) { throw new Error(this.text + "菜单下没有子菜单");
}
var str = "
" + this.text + "";
str += "
for (var i = 0, len = this.menuComponents.length; i < len; i++) { str += this.menuComponents[i].getValue();
}
str += "";
return str;
},
add: function(component) { this.menuComponents.push(component);
},
remove: function(component) { for (var i = 0, len = this.menuComponents.length; i < len; i++) { if (this.menuComponents[i] == component) { this.menuComponents.splice(i, 1);
break;
}
}
},
removeAt: function(index) { if (this.menuComponents.length <= index) { this.menuComponents.splice(index, 1);
}
else { throw new Error("索引操作数组超过上限"); }
}
}
// 子菜单，一定没有下级菜单
function zzlItem(text, title, href) { this.text = text;
this.title = title;
this.href = href;
}
// 子菜单的扩展方法
zzlItem.prototype = { getValue: function() { var str = "<li class=\"Menu-Leaf\" title=\"" + this.title + "\">
<a href=\"" + this.href + "\">" + this.text + "</a></li>";
return str;
}
}
，如需转载请自行联系原博主。