前端设计模式详解(实践)|青训营

87 阅读3分钟

本篇包含浏览器两种常用的设计模式的详解,及其他几种设计模式的优势分析。

浏览器中常用的两种模式:

单例模式:

保证一个类只有一个实例。其关键是将类的构造方法设置为private权限。并提供一个访问它的全局访问点。模式的结构中只包括一个角色:单件类(uml类图如下) 单件uml类图.png 优点:单件类的唯一实例由单件类本身来控制。所以可以很好的控制用户何时访问它。

案例:制作一个巧克力锅炉控制器。锅炉内为空时才允许加入原料、锅炉内存在原料并且尚未煮沸时才允许进行煮沸、排出巧克力时要求炉内的存在原料并且已经被煮沸。

Uml类图分析:

 

anli1UML.png

代码如下:首先是巧克力单例类:

public class SingleChocolate {

//两类成员变量(单件类实例的成员变量(私有静态权限);类本身需要的成员变量)

private static SingleChocolate uniqueChocolate;

boolean empty;

boolean boiled;

//构造方法(权限必须是私有的)

private SingleChocolate() {

empty=true;

boiled=false;

}

//返回单件实例的方法,返回类型类

public static synchronized SingleChocolate getChocolate() {

if(uniqueChocolate == null) {

uniqueChocolate = new SingleChocolate();

}

return uniqueChocolate;

}

//类本身的方法

public void fill() {

if(isempty()) {

empty = false;

boiled = false;

System.out.println("加入巧克力原料");

}

}

public void boil() {

if(!isempty() && !isboiled()) {

boiled = true;

System.out.println("将原料煮沸");

}

}

public void drain() {

if(!isempty() && isboiled()) {

empty = true;

System.out.println("将巧克力排出");

}

}

public boolean isempty() {

return empty;

}

public boolean isboiled() {

return boiled;

}

}

其次是Application类:

public class Application {

public static void main(String args[]) {

SingleChocolate singleChocolate = SingleChocolate.getChocolate();

singleChocolate.fill();

singleChocolate.boil();

singleChocolate.drain();

}

}

 结果展示:

anli1.png

 

观察者模式:

对象间的一种一对多的依赖关系,当一个对象的状态发生变化时,所有依赖于他的对象都获得通知,并被自动更新。

guanchazhemoshi.png

优点:具体主题和具体观察者是松耦合关系;观察者模式满足“开-闭原则”;创建具体观察者的类仅仅依赖于主题(Observer)接口,如果增加新的实现主题(Subject)接口的类,也不必修改创建具体观察者类的代码。

案例:新闻杂志订阅。

anli2UML.png

代码:

RSS接口


public interface Rss {

public void subScribeRss(Reader reader);

public void unsubScribeRss(Reader reader);

public void notifyReader();

}

Reader接口:

public interface Reader {

public void update();
}

RSS 的相关方法:


import java.util.ArrayList;

 

public class RssDate implements Rss{

String news,name,title;

ArrayList<Reader>readerList;

int year;

 

RssDate(){

readerList=new ArrayList<Reader>();

news="";

}

@Override

public void subScribeRss(Reader reader) {

// TODO Auto-generated method stub

if(!(readerList.contains(reader)))

readerList.add(reader);

}

 

@Override

public void unsubScribeRss(Reader reader) {

// TODO Auto-generated method stub

if(readerList.contains(reader))

readerList.remove(reader);

}

 

@Override

public void notifyReader() {

// TODO Auto-generated method stub

for(int i = 0;i<readerList.size();i++) {

Reader reader = readerList.get(i);

reader.update();

}

}

public void setNews(String name, int year, String title) {

// TODO Auto-generated method stub

this.name = name;

this.year=year;

this.title=title;

notifyReader();

}

public String getname() {

return name;

}

public int getyear() {

return year;

}

public String gettitle() {

return title;

}}

 

Reader对象;

public class ReaderOne implements Reader{

Rss rss;

String title,personName;

int year;

 

public ReaderOne(Rss rss1, String personName) {

// TODO Auto-generated constructor stub

this.rss = rss1;

this.personName=personName;

rss.subScribeRss(this);

}

 

@Override

public void update() {

// TODO Auto-generated method stub

if(rss instanceof RssDate) {

year = ((RssDate)rss).getyear();

title = ((RssDate)rss).gettitle();

System.out.println(personName+"关注的年份是"+year);

System.out.println(personName+"获取的信息是"+title);

}

}

}

结果展示:

anl2.png  

 

JS常用的几种模式:

原型模式:

复制已有对象来创建新对象

优点:提高创建实例的效率

动态保存当前对象的状态,动态的添加删除原型的复制品。

代理模式:

可自定义控制对原对象的访问方式,并且允许在更新前后做一些额外处理

优点:可以屏蔽用户真正请求的对象,使得用户程序和真正的对象之间解耦

使用代理来担当那些创建耗时的对象的替代品。

迭代器模式:

在不暴露数据类型的情况下,访问集合中的数据。

优点:可以直接使用迭代器访问集合中的对象;并可以使用多个迭代器遍历一个集合。

 

前端框架中常用的设计模式:

代理模式:同上

组合模式:

可多个对象组使用

优点:方便处理个体对象和组合对象;增加新的Composite节点和Leaf节点时,用户的重要代码不需要发生修改