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

用户头像
JI
关注
发布于: 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...



发布于: 2020 年 06 月 24 日 阅读数: 51
用户头像

JI

关注

还未添加个人签名 2019.07.19 加入

还未添加个人简介

评论

发布
暂无评论
第三周-作业-设计模式,单例模式与组合模式