如何实施“四人帮”的莱克西作曲家作文？

Question

我正在学习设计模式书，并且我试图理解Composition 原则，如图2.5所示，以及实现的<#>how。

图2.6中显示了预期的行为：

经过一些研究，我找不到任何与同一个用例相关的东西。

我唯一能做到的方法，就是试图实现自己，但我不知道自己犯了什么错误，我想知道这种方法是否可行。

type Point = {
  // Unimplemented
}

abstract class Glyph {
    public readonly name: string
    constructor(
        name: string
    ) {
        this.name = name
    }
    abstract parent(): Glyph
    abstract child(index: number): Glyph
    abstract intersects(point: Point): boolean
    abstract remove(glyph: Glyph): void
    abstract insert(glyph: Glyph, index: number): void
}

class UnimplemenmtedGlyph extends Glyph {
    parent(): Glyph {
        throw('Not implemented')
    }
    child(index: number): Glyph {
        throw('Not implemented')
    }
    intersects(point: Point): boolean {
        throw('Not implemented')
    }
    remove(glyph: Glyph): void {
        throw('Not implemented')
    }
    insert(glyph: Glyph, index: number): void {
        throw('Not implemented')
    }
}


type GlyphChild = {
    index: number
    glyph: Glyph
}

class Composition extends Glyph {
    public childs: GlyphChild[] = []
    protected compositor?: Compositor
    insert(glyph: Glyph, index: number): void {
        const glyphChild = {
            index: index,
            glyph: glyph
        }
        this.childs.push(glyphChild)
    }
    remove(glyph: Glyph) {
        throw('Not implemented')
    }
    parent(): Glyph {
        throw('Not Implemented')
    }
    child(index: number): Glyph {
        return this.childs[index].glyph
    }
    intersects(point: Point): boolean {
        throw('Not implemented')
    }
    setComposition(compositor: Compositor) : void {
        this.compositor = compositor
    }
    onChangeEvent(): void {
        console.log('called onChangeEvent')
        console.log(this.compositor)
        this.compositor?.compose()
    }
}

abstract class Compositor {
    abstract compose(): void 
    abstract setComposition(composition: Composition): void
}

class SimpleCompositor extends Compositor {
    private composition?: Composition
    compose(): void {
        if(this.composition){
            console.log(`composing simple format with received composition ${this.composition.name}`)
            console.log(`containing ${this.composition.childs.length} childs:`)
            for (const childitem of this.composition.childs) {
                console.log(childitem.glyph.name)
            }
        }
    }
    setComposition(composition: Composition): void {
        this.composition = composition
    }
}



const test = () => {
    console.log('entered test')
    
    const rowComposite = new Composition('rowComposite', )
    const smallG = new UnimplemenmtedGlyph('smallG')
    const bigG = new UnimplemenmtedGlyph('bigG')
    const space = new UnimplemenmtedGlyph('space')
    const image = new  UnimplemenmtedGlyph('image')

    rowComposite.insert(smallG, 1)
    rowComposite.insert(bigG, 2)
    rowComposite.insert(space, 3)
    rowComposite.insert(image, 4)

    const simpleCompositor = new SimpleCompositor()
    simpleCompositor.setComposition(rowComposite)
    rowComposite.setComposition(simpleCompositor) // as explained in the end of the section

    // something changed!!!!
    rowComposite.onChangeEvent() // calls simpleCompositor.compose()


}

test()

// Output:
//
// composing simple format with received composition rowComposite
// containing 4 childs
// smallG
// bigG
// space
// image

即使我没有处理column，这个示例是否是实现组合器-组合的一种可接受的方法？

Answer 1

Lexi的复合/组合背后的思想是，一个空文档以一个没有子元素的组合开始，而一个具体的组合器决定文档的格式将是什么样子。

例如，Compositor负责确定放行间隔的位置，这样文本就不会超出屏幕或页面的宽度。

一旦您有了一个组合对象，应用程序就会将字形元素插入到它中，这些元素对应于用户插入到文档中的可视项(G、g、图像)。组合器根据需要将Row和Column元素添加到对象树中，以获得文档的正确外观，例如，在汽车图像之后中断行。

组合/组合器本身并不是一个设计模式，但它是在实际应用程序中使用两种设计模式(组合模式和策略模式)的示例。