我们在使用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 = "<ul class=\"Menu\">"; for (var i = 0, len = this.list.length; i < len; i++) {
str += this.list[i].getValue(); }
document.getElementById(container).innerHTML = str + "</ul>"; }
}
// 主菜单，必须有子菜单的菜单项 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 = "<li class=\"Menu-WithChildren\" title=\"" + this.title + "\">
<a class=\"Menu-Link\" href=\"" + this.href + "\">" + this.text + "</a>";
str += "<ul>"; for (var i = 0, len = this.menuComponents.length; i < len; i++) {
str += this.menuComponents[i].getValue(); }
str += "</ul>"; 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; }
}