js 面向对象设计--组合模式

最新推荐文章于 2021-09-08 15:16:03 发布

weixin_42975115

最新推荐文章于 2021-09-08 15:16:03 发布

阅读量178

点赞数

分类专栏： js 面向对象设计模式

本文链接：https://blog.csdn.net/weixin_42975115/article/details/90646394

版权

js 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

面向对象

24 篇文章 0 订阅

订阅专栏

设计模式

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合模式</title>
</head>
<body>
<!--组合模式：整体模式,将对象树形结构来表示部分整体的层次结构-->
<!--组合模式使得用户对当个对象和组合对象具有一致性-->
<script>
    function inhre(o) {
        let F = function () {

        }
        F.prototype = o;
        return new F();

    }
    function inhertiPrototype(child,farther) {
        let p = inhre(farther.prototype);
        p.constructor = child;
        child.prototype = p;
    }
   let New =  function () {
       //子组件容器
       this.children =[];
       //当前组件元素
       this.element = null;
   }
   New.prototype ={
       init:function () {
           throw  new Error('re_write');
       },
       add:function () {
           throw  new Error('re_write');
       },
       getElement:function () {
           throw  new Error('re_write');
       }
   }
   //容器类构造器
   let Container = function (id,parent) {
       //构造器函数继承New
       New.call(this);
       this.id = id;
       this.parent = parent;
       this.init();
   }
   inhertiPrototype(Container,New);//container继承New原型
   Container.prototype.init = function () {
       this.element = document.createElement('ul');
       this.element.id = this.id;
       this.element.className = 'new_container';
   }
   Container.prototype.add = function (child) {
       //在子元素容器中插入子元素
       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);
   }
   //下一级元素类
    let Item = function (className,txt) {
        New.call(this);
        this.className = className || '';
        this.txt = txt;
        this.init();
    }
    inhertiPrototype(Item,New);
   Item.prototype.init = function () {
       this.element = document.createElement('li');
       this.element.className = this.className;
       this.element.innerHTML = this.txt;
   }
    Item.prototype.add = function (child) {
        //在子元素容器中插入子元素
        this.children.push(child);
        //插入插入当前组件元素树中
        this.element.appendChild(child.getElement());
        return this;
    }
    Item.prototype.getElement = function () {
        return this.element;
    }
    //创建新闻模块
    let new1 = new Container('news',document.body);
    new1.add(new Item('no1','hello')).show();

</script>
</body>
</html>