UI 行为取决于类型 - 背后的模式是什么？答案

【问题标题】：UI behavior depending on type - what's the pattern behind?UI 行为取决于类型 - 背后的模式是什么？
【发布时间】：2014-04-04 05:09:01
【问题描述】：

我有一个用于编辑产品的网页，并且 UI 具有不同的行为，具体取决于产品类型。

它包含一些小的变化，例如：特定字段仅对一种产品类型是强制性的，下拉列表中对 2 种产品类型的选项较少，ajax 调用不同的 URL 等等。

1/ 如何在 JavaScript 中编写“优雅”的代码，所以我想尊重开闭原则并避免出现以下情况：

var idType = $('#idtype').val();
if (idType == 3)

...

2/ 有没有办法在 JavaScript 中使用"enums"？

3/ 是否有涉及这种情况的设计模式？我知道的最接近的是Strategy 模式。

4/ 就我而言，这些更改可以在JavaScript 代码中处理。但是当客户端和服务器端的行为不同时，我应该如何建模？

【问题讨论】：

标签： javascript asp.net design-patterns

【解决方案1】：

你可以使用 switch，看下面的例子。

不是在原生模式下，但你可以模拟一个，例如：

var MyEnum = {
    LittleBall: 1,
    MediumBall: 2,
    BigBall: 3
};

var idType = parseInt($("#idtype").val(), 10);

switch(idType) {
    case MyEnum.LittleBall:
        // do stuff here
        break;
    case MyEnum.MediumBall:
        // do stuff here
        break;
    case MyEnum.BigBall:
        // do stuff here
        break;
    default:
        break;
}

模式是什么意思？
您的客户端行为不应与服务器端行为不同。

【讨论】：

开闭原则呢？

【解决方案2】：

这就是继承存在的原因。将“正常”场景放入Product。使其成为ThatProductWithFewerOptions、ThatProductWithMandatoryField 等的原型。覆盖不同于一般Product 的函数。进行从 ID 映射到产品构造函数的查找；如果不是特别的，你可以使用Product。然后只需拨打product.checkMandatoryFields()、product.ajaxURL 等即可。不要再拨打ifs。

或者，在服务器端处理所有差异（同样，类可以创造奇迹）。这样您就不需要两次实现所有内容。或者如果你有 Node.js 服务器端，同样的代码可以在两端运行。

如果我真的需要命名它，我想这就是工厂模式 (Product.getInstanceFor(idType))。

【讨论】：