JavaScript设计模式(十二)【组合模式】

最新推荐文章于 2025-02-12 16:34:33 发布
.NET跨平台
最新推荐文章于 2025-02-12 16:34:33 发布
阅读量133
点赞数
分类专栏： Javascript设计模式
原文链接：https://blog.youkuaiyun.com/WuLex
版权
Javascript设计模式专栏收录该内容
37 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合模式解决新闻模块问题</title>
</head>
<body>
<script>

    var News = function() {
        //子组件容器
        this.children = [];
        //当前组件元素
        this.element = null;
    }
    News.prototype = {
        init: function() {
            throw new Error("请重写你的方法！");
        },
        add: function() {
            throw new Error("请重写你的方法！");
        },
        getElement: function() {
            throw new Error("请重写你的方法！");
        }
    }

    //原型继承
    function inheritObject(o) {
        //声明一个过渡函数对象
        function F() {
        }

        //过渡对象的原型继承父对象
        F.prototype = o;
        //返回过渡对象的一个实例，该实例的原型继承了父对象
        return F;
    }

    //寄生式继承
    function inheritPrototype(subClass, superClass) {
        //复制一份父类的原型副本保存在变量中
        var p = inheritObject(superClass.prototype);
        //修正因为重写子类原型导致子类的constructor属性被修改
        p.constructor = subClass;
        //设置子类的原型
        subClass.prototype = p;
    }


    //容器类构造函数
    var Container = function(id, parent) {
        //构造函数继承父类
        News.call(this);
        //模块id
        this.id = id;
        //模块的父容器
        this.parent = parent;
        //构建方法
        this.init();
    }
    //寄生式继承父类原型方法
    inheritPrototype(Container, News);
    //构建方法
    Container.prototype.init = function() {
        this.element = document.createElement('ul');
        this.element.id = this.id;
        this.element.className = 'new-container';
    };
    //添加子元素方法
    Container.prototype.add = function(child) {
        console.log(this);
        console.log(this.children)
        //在子元素容器中插入子元素
        this.children.push(child);
        //插入当前组件元素树中
        this.element.appendChild(child.getElement());
        return this;
    }
    //获取当前元素方法
    Container.prototype.getElement = function() {
        return this.element;
    }
    //显示方法
    Container.prototype.show = function() {
        this.parent.appendChild(this.element);
    }

    var Item = function(classname) {
        News.call(this);
        this.classname = classname || '';
        this.init();
    }
    inheritPrototype(Item, News);
    Item.prototype.init = function() {
        this.element = document.createElement('li');
        this.element.className = this.classname;
    }
    Item.prototype.add = function(child) {
        console.log(this.children);
        console.log(this.children.size);
        console.log(child)
        //在子元素容器中插入子元素
        this.children.push(child);
        //插入当前组件元素树中
        this.element.appendChild(child.getElement());
        return this;
    }
    Item.prototype.getElement = function() {
        return this.element;
    }

    var NewsGroup = function(classname) {
        News.call(this);
        this.classname = classname || '';
        this.init();
    }
    inheritPrototype(NewsGroup, News);
    NewsGroup.prototype.init = function() {
        this.element = document.createElement('div');
        this.element.className = this.classname;
    }
    NewsGroup.prototype.add = function(child) {
        //在子元素容器中插入子元素
        this.children.push(child);
        //插入当前组件元素树种
        this.element.appendChild(child.getElement());
        return this;
    }
    NewsGroup.prototype.getElement = function() {
        return this.element;
    }


    var ImageNews = function(url, href, classname) {
        News.call(this);
        this.url = url || '';
        this.href = href || '';
        this.classname = classname || 'normal';
        this.init();
    }
    inheritPrototype(ImageNews, News);
    ImageNews.prototype.init = function() {
        this.element = document.createElement('a');
        var img = new Image();
        img.src = this.url;
        img.height = 100;
        img.width = 100;
        this.element.appendChild(img);
        this.element.className = 'image-news ' + this.classname;
        this.element.href = this.href;
    }
    ImageNews.prototype.add = function() {
    }
    ImageNews.prototype.getElement = function() {
        return this.element;
    }

    var IconNews = function(text, href, type) {
        News.call(this);
        this.text = text || '';
        this.href = href || '';
        this.type = type || 'video';
        this.init();
    }
    inheritPrototype(IconNews, News);
    IconNews.prototype.init = function() {
        this.element = document.createElement('a');
        this.element.innerHTML = this.text;
        this.element.href = this.href;
        this.element.className = 'icon ' + this.type;
    }

    IconNews.prototype.add = function() {
    }
    IconNews.prototype.getElement = function() {
        return this.element;
    }

    var EasyNews = function(text, href) {
        News.call(this);
        this.text = text || '';
        this.href = href || '#';
        this.init();
    }
    inheritPrototype(EasyNews, News);
    EasyNews.prototype.init = function() {
        this.element = document.createElement('a');
        this.element.innerHTML = this.text;
        this.element.href = this.href;
        this.element.className = 'text';
    }
    EasyNews.prototype.add = function() {
    }
    EasyNews.prototype.getElement = function() {
        return this.element;
    }

    var TypeNews = function(text, href, type, pos) {
        News.call(this);
        this.text = text || '';
        this.href = href || '';
        this.type = type || '';
        this.pos = pos || 'left';
        this.init();
    }
    inheritPrototype(TypeNews, News);
    TypeNews.prototype.init = function() {
        this.element = document.createElement('a');
        if (this.pos === 'left') {
            this.element.innerHTML = '[' + this.type + ']' + this.text;
        } else {
            this.element.innerHTML = this.text + '[' + this.type + ']';
        }
        this.element.href = this.href;
        this.element.className = 'text';
    }
    TypeNews.prototype.add = function() {
    }
    TypeNews.prototype.getElement = function() {
        return this.element;
    }


    window.onload = function() {

        var news1 = new Container('news', document.body);

        console.log(news1)
        news1.add(
            new Item('normal').add(
                new IconNews('梅西不拿进球也为大', '#', 'small')
            )
        ).add(new Item('normal').add(
            new NewsGroup('hasImg').add(
                new ImageNews('../image/1.png', '#', 'small')
            ).add(
                new EasyNews('cccccc', '#')
            ).add(
                new EasyNews('ccsdsfdfd', '#')
            ))).show();
    }
</script>
</body>
</html>