设计模式优雅设计：UI 一套，接口两套

前端

2023-10-20 22:07:38

对我们开发者来说，需求总是变化多端，写好的代码经常被推翻重来。如何在需求变动大的情况下，优雅且快速的应对？这正是设计模式能帮我们解决的问题。

设计模式简介

设计模式是一套可重复使用的解决方案，旨在解决软件设计中的常见问题。它们提供了经过验证的方法来组织和结构代码，从而提高代码的可读性、可维护性和可扩展性。

UI 一套，接口两套难题

最近在做项目时，遇到了这样一个难题：前端需要一套 UI，但后端要提供两套不同的接口。一套用于 web 端，一套用于移动端。如何优雅地解决这个问题？

单一职责原则

根据单一职责原则，一个类或模块应该只负责一项任务。在我们的案例中，UI 应该只负责展示内容，而接口应该只负责提供数据。

开闭原则

开闭原则指出，软件应该对扩展开放，对修改关闭。换句话说，我们应该能够在不修改现有代码的情况下添加新功能或修改现有功能。

应用设计模式

为了解决 UI 一套，接口两套的问题，我们可以应用以下设计模式：

抽象工厂模式： 将具体接口的创建与使用分离。这允许我们在不修改 UI 代码的情况下切换不同的接口。

桥接模式： 将抽象层与实现层分离。这允许我们独立修改 UI 和接口代码，而不会影响对方。

适配器模式： 将一个接口转换成另一个接口，使得原本不兼容的接口可以协同工作。

优雅实现

通过应用这些设计模式，我们可以优雅地实现一套 UI 两套接口的要求。如下代码所示：

// 抽象工厂类
interface IFactory {
    IProductA createProductA();
    IProductB createProductB();
}

// 具体工厂类（Web 端）
class WebFactory implements IFactory {
    @Override
    public IProductA createProductA() {
        return new WebProductA();
    }

    @Override
    public IProductB createProductB() {
        return new WebProductB();
    }
}

// 具体工厂类（移动端）
class MobileFactory implements IFactory {
    @Override
    public IProductA createProductA() {
        return new MobileProductA();
    }

    @Override
    public IProductB createProductB() {
        return new MobileProductB();
    }
}

// 抽象产品类
interface IProductA {
    void doSomething();
}

// 具体产品类（Web 端）
class WebProductA implements IProductA {
    @Override
    public void doSomething() {
        // Web 端的具体实现
    }
}

// 具体产品类（移动端）
class MobileProductA implements IProductA {
    @Override
    public void doSomething() {
        // 移动端的具体实现
    }
}

// 抽象产品类
interface IProductB {
    void doSomethingElse();
}

// 具体产品类（Web 端）
class WebProductB implements IProductB {
    @Override
    public void doSomethingElse() {
        // Web 端的具体实现
    }
}

// 具体产品类（移动端）
class MobileProductB implements IProductB {
    @Override
    public void doSomethingElse() {
        // 移动端的具体实现
    }
}

// UI 类
class UI {
    private IProductA productA;
    private IProductB productB;

    public UI(IFactory factory) {
        productA = factory.createProductA();
        productB = factory.createProductB();
    }

    public void show() {
        // UI 的具体实现，使用 productA 和 productB 进行渲染
    }
}

// 使用
public class Main {
    public static void main(String[] args) {
        IFactory factory = new WebFactory();
        UI ui = new UI(factory);
        ui.show();

        factory = new MobileFactory();
        ui = new UI(factory);
        ui.show();
    }
}