设计模式知识连载（24）---组合模式:

最新推荐文章于 2020-06-09 20:50:32 发布

宇智波幽助

最新推荐文章于 2020-06-09 20:50:32 发布

阅读量110

点赞数

分类专栏：设计模式文章标签：设计模式组合模式

本文链接：https://blog.csdn.net/yuzhiboyouzhu/article/details/78853888

版权

设计模式专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<body>


<h3>设计模式知识连载（24）---组合模式:</h3>
<p>
    又称部分-整体模式，将对象组合成树形结构以表示“部分整体”的层次结构。
    该模式使得用户对单个对象和组合对象的使用具有一致性
</p>

<script type="text/javascript">

    /**
    *   案例一：新闻模块，方式一：
    */

    /*****
    *   寄生组合式继承
    ****/
    function inheritObject(o) {
        function F() {} ;
        F.prototype = o ;
        return new F() ;
    } ;
    function inheritPrototype(subClass, superClass) {
        var p = inheritObject(superClass.prototype) ;
        p.constructor = subClass ;
        subClass.prototype = p ;
    };

    // 虚拟父类News
    var News = function () {
        // 子组件容器
        this.children = [] ;
        // 当前组件元素
        this.element = [] ;
    } ;

    News.prototype = {
        init : function() {
            throw new Error('请重写你的方法') ;
        },
        add : function() {
            throw new Error('请重写你的方法') ;
        },
        getElement : function() {
            throw new Error('请重写你的方法') ;
        }
    } ;

    // 容器类构造函数---第一层级
    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) {
        // 在子容器中插入子元素
        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) {
        // 在子元素容器中插入子元素
        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 ;
        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 ;
    } ;

    // 测试用例：
    var news1 = new Container('news', document.body) ;

    news1.add(
        new Item('normal').add(
            new IconNews('梅西不拿金球也伟大', '#', 'video')
        )
    ).add(
        new Item('normal').add(
            new IconNews('保护强国强队用意明显', '#', 'live')
        )
    ).add(
        new Item('normal').add(
            new NewsGroup('has-img').add(
                new ImageNews('icon/1.png', '#', 'small')
            ).add(
                new EasyNews('从240斤胖子成功变型男', '#')
            ).add(
                new EasyNews('五大雷人跑步机', '#')
            )
        ).add(
            new Item('normal').add(
                new TypeNews('AK47不愿为费城打球', '#', 'NBA', 'left')
            )
        ).add(
            new Item('normal').add(
                new TypeNews('火炮飚6三分钟创新高', '#', 'CBA', 'right')
            )
        )
    ).show() ;



    /**
    *   案例二：表单中的应用，方式一：
    *   【后续实现】
    */

</script>   

</body>

宇智波幽助

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
设计模式知识连载（24）---组合模式:

<body><h3>设计模式知识连载（24）---组合模式:</h3><p> 又称部分-整体模式，将对象组合成树形结构以表示“部分整体”的层次结构。该模式使得用户对单个对象和组合对象的使用具有一致性</p><script type="text/javascript"> /** * 案例一：新闻模块，方式一： */ /***** *
复制链接

扫一扫

专栏目录