当JS面向对象之后续(JS在设计级联菜单时)

我们在使用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;

    }

}