第三周 - 作业 - 设计模式，单例模式与组合模式

关注
发布于: 2020 年 06 月 24 日
Sorry ！上一周的作业，我后来越想越不对，然后就发现我用java语法写的有点错误，因为我没有用java写过代码,上次也没有从编译器尝试运行，直接在文稿写，但是后来又修改了错误的地方，用了抽象工厂方式去实现了Cache的单一职责。 但是最近作业一直用java语言，其实觉得java太贴合业务驱动开发，更容易抽象，实现面向对象了, 真的比其他语言方便许多。
 
1. 请在草稿纸上手写一个单例模式的实现代码，拍照提交作业。
﻿
单例模式比较适合于，全局共享一个对象的时候做使用。比如说全局共享数据，这时候需要使用到单例模式了。
﻿
﻿
2. 请用组合设计模式编写程序，打印输出图 1 的窗口，窗口组件的树结构如图 2 所示，打印输出示例参考图 3。
 
﻿
组合模式应该包含: 划分为安全式和透明式
组合模式比较适合用于有树结构的
 
1、 抽象构件： -- 根据题目 , ， 抽象构件可以抽象一个show()
理解：
1、安全式， 不声明管理子类的方法，该工作交给，单独由树枝构件完成
2、透明式, 声明管理子类的方法，只要实现了这个接口，不管树叶构件还是树枝构件都需要实现方法，但是一般树叶构件是没有子类的，所以不需要实现管理子类的方法，如果这样暴露实现，会造成安全问题。
2、 树枝构件: -- 根据题目 , 可以定义为一个容器container ，包括IFrame, Window Form
理解： 有子类的，可以管理子类的
3、 树叶构件: -- 根据题目 , 可以为各种节点如 Button 、 Lable 、 Picture 、等等等, 我觉得他们只是类型不一样，所以我统称 ， 方便简化代码，展示组合设计模式，所以我统称控件 Controls
理解： 无子节点
 
综合以上的划分，我大致需要实现，三个部分
1 、 抽象构件 开发 抽象show方法
2、 树枝构件, 定义各种管理容器Container
3、 树叶构件，定义各种Controls
﻿
使用JAVA实现组合模式案例 备注： 以下代码，那些各种控件， 各种窗口，我就用文字模拟了。。。暂时不用代码实现了，需要写太多Class了，篇幅有限。主要是自己体现组合模式这个思想得了。
package CompositePattern;
import java.util.ArrayList;
// 抽象构件
interface IFromItem {
	void show();
}
// 树叶构件
class Controls implements IFromItem {
	private String controlsName;
	public Controls(String name) {
		this.controlsName = name;
	}
	public void show() {
		System.out.println("这是" + this.controlsName);
	}
}
// 树枝构件
class Container implements IFromItem {
	private String containerName;
    private ArrayList<IFromItem> controlsList = new ArrayList<IFromItem>();   
    public Container(String name) {
    	this.containerName = name;
    }
	public void show () {
		for( IFromItem controlsItem : this.controlsList ) {
			controlsItem.show();
	    }
	};
	public void add(IFromItem item) {
		this.controlsList.add(item);
	};
	public void remove(IFromItem item) {
		this.controlsList.remove(item);
	};
	public IFromItem getChild(int item) {
        return this.controlsList.get(item);
    }
}
// 入口测试类
public class WindowFormDemo {
	public static void main(String[] args) {
//		根据题目上的图片树结构，创建结构
		Container windowForm = new Container("windowForm");
		Container iframe = new Container("IFrame");
		windowForm.add(new Controls("Picture LOGO图片"));
		windowForm.add(new Controls("Button 注册按钮"));
		windowForm.add(new Controls("Button 登录按钮"));
		windowForm.add(iframe);
		iframe.add(new Controls("Label 用户名"));
		iframe.add(new Controls("TextBox 文本框"));
		iframe.add(new Controls("Label 密码"));
		iframe.add(new Controls("PasswordBox 密码框"));
		iframe.add(new Controls("CheckBox 复选框"));
		iframe.add(new Controls("TextBox 记住用户名"));
		iframe.add(new Controls("LinkLable 忘记密码"));
		windowForm.show();
	}
}
	
﻿
使用前端typescript， 实现单例模式+组合模式案例， 最终效果DEMO:总览地址： https://codesandbox.io/s/zuhemoshi-etjv4?file=/index.html
(demo地址加载可能过慢~多刷新几次)
生成结构： 
﻿
部分代码展示：
index.ts 入口
import { Img, Button, Text, Input } from "./control";
import { Container, RootInstance } from "./container";
import "./index.css";
class Main {
  run() {
    const WinForm = new Container("WinForm");
    const Frame = new Container("Frame");
    WinForm.add(
      new Container("logoBox")
        .add(
          new Img(
            "logo",
            "http://img5.imgtn.bdimg.com/it/u=3743746220,1119505903&fm=26&gp=0.jpg"
          ).getElement()
        )
        .getElement()
    );
    WinForm.add(Frame.getElement());
    WinForm.add(
      new Container("winButton clearFix")
        .add(new Button("registerButton btn btn-success", "注册").getElement())
        .add(new Button("loginButton btn btn-success", "登录").getElement())
        .getElement()
    );
    Frame.add(
      new Container("UserNameLable")
        .add(new Text("label", "用户名").getElement())
        .add(new Input("input labelInput form-control").getElement())
        .getElement()
    )
      .add(
        new Container("passWordLable")
          .add(new Text("label", "密码").getElement())
          .add(
            new Input("input paddwordInput form-control", {
              type: "password",
              maxLength: 18
            }).getElement()
          )
          .getElement()
      )
      .add(
        new Container("footerBox clearFix")
          .add(
            new Input("checkbox", {
              type: "checkbox"
            }).getElement()
          )
          .add(new Text("label", "记住用户名").getElement())
          .add(new Text("forget", "忘记密码").getElement())
          .getElement()
      );
    // 根容器-单独一个，用单例模式
    console.log(WinForm);
    RootInstance.getInstance("#app").add(WinForm.getElement());
  }
}
﻿
const main = new Main();
main.run();
﻿
type.ts [抽象接口构件]
// 抽象构件
export interface IFromItem {
  getElement(): void;
}
﻿
﻿
container.ts [树枝构件]
import { ContainerBuilder, EContainer } from "./builder";
import { IFromItem } from "./types";
export class RootContainer {
  rootElement: HTMLElement | null;
  constructor(id: string) {
    this.rootElement = document.querySelector(id);
  }
  getElement() {
    return this.rootElement;
  }
﻿
  add(element: HTMLElement) {
    if (this.rootElement) {
      this.rootElement.appendChild(element);
      return this;
    } else {
      return null;
    }
  }
}
﻿
export class RootInstance {
  static instance: RootContainer;
  public static getInstance(id: string): RootContainer {
    if (RootInstance.instance) {
      return RootInstance.instance;
    } else {
      return new RootContainer(id);
    }
  }
}
﻿
// 树枝构建
export class Container implements IFromItem {
  // private elementList: Array<HTMLElement> = [];
  private element: HTMLElement = new ContainerBuilder(
    EContainer.Div
  ) as HTMLElement;
﻿
  constructor(className: string) {
    this.element.className = className;
  }
  add(element: HTMLElement) {
    this.element.appendChild(element);
    return this;
  }
﻿
  remove(element: HTMLElement) {
    this.element.removeChild(element);
    // this.element.style.display = "none";
    return this;
  }
﻿
  getElement() {
    return this.element;
  }
}
﻿
﻿
control.ts [树叶构件]
import { ControlBuilder, EControl } from "./builder";
import { IFromItem } from "./types";
import {
  ImgHTMLAttributes,
  InputHTMLAttributes,
  ButtonHTMLAttributes,
  HTMLAttributes
} from "react";
interface IControlBuilder {
  builder(): void;
}
// 树叶构件
export abstract class Control implements IFromItem {
  show() {
    this.element.style.display = "block";
  }
  hide() {
    this.element.style.display = "none";
  }
﻿
  getElement() {
    return this.element;
  }
﻿
  setAttribute(attrs: HTMLAttributes) {
    for (const attr in attrs) {
      this.element.setAttribute(attr, attrs[attr]);
    }
  }
}
﻿
export class Img<T> extends Control {
  private element: HTMLImageElement;
  constructor(
    className: string,
    src: string,
    otherAttr?: ImgHTMLAttributes<T>
  ) {
    super();
    this.element = new ControlBuilder(EControl.Img) as HTMLImageElement;
    this.element.src = src;
    this.element.className = className;
    if (otherAttr) {
      this.setAttribute(otherAttr);
    }
  }
}
﻿
// export
export class Input<T> extends Control {
  element: HTMLInputElement;
  constructor(className: string, otherAttr?: InputHTMLAttributes<T>) {
    super();
    this.element = new ControlBuilder(EControl.Input) as HTMLInputElement;
    this.element.className = className;
    if (otherAttr) {
      this.setAttribute(otherAttr);
    }
  }
}
﻿
export class Text extends Control {
  element: HTMLElement;
  constructor(className: string, text: string) {
    super();
    this.element = new ControlBuilder(EControl.Text) as HTMLElement;
    this.element.className = className;
    this.element.innerText = text;
  }
}
﻿
export class Button<T> extends Control {
  element: HTMLButtonElement;
  constructor(
    className: string,
    text: string,
    otherAttr?: ButtonHTMLAttributes<T>
  ) {
    super();
    this.element = new ControlBuilder(EControl.Button) as HTMLButtonElement;
    this.element.className = className;
    this.element.innerText = text;
    if (otherAttr) {
      this.setAttribute(otherAttr);
    }
  }
}
﻿
﻿
以上只供参考，不供抄袭~J...
﻿