其他
设计模式最佳套路4 —— 愉快地使用模板模式
什么是模板模式
何时使用模板模式
愉快地使用模板模式
▐ 背景
public class FormItemConverter {
/** * 将输入的配置转变为表单项 * * @param config 前端输入的配置 * @return 表单项 */ public FormItem convert(FormItemConfig config) { FormItem formItem = new FormItem();
// 公共的表单项属性 formItem.setTitle(config.getTitle()); formItem.setCode(config.getCode()); formItem.setComponent(config.getComponent());
// 创建表单组件的属性 FormComponentProps props = new FormComponentProps(); formItem.setComponentProps(props); // 公共的组件属性 if (config.isReadOnly()) { props.setReadOnly(true); }
FormItemTypeEnum type = config.getType();
// 下拉选择框的特殊属性处理 if (type == ComponentTypeEnum.DROPDOWN_SELECT) { props.setAutoWidth(false);
if (config.isMultiple()) { props.setMode("multiple"); } }
// 模糊搜索框的特殊属性处理 if (type == ComponentTypeEnum.FUZZY_SEARCH) { formItem.setFuzzySearch(true); props.setAutoWidth(false); }
// ... 其他组件的特殊处理
// 创建约束规则 List<FormItemRule> rules = new ArrayList<>(2); formItem.setRules(rules);
// 每个表单项都可有的约束规则 if (config.isRequired()) { FormItemRule requiredRule = new FormItemRule(); requiredRule.setRequired(true); requiredRule.setMessage("请输入" + config.getTitle());
rules.add(requiredRule); }
// 文本输入框才有的规则 if (type == ComponentTypeEnum.TEXT_INPUT || type == ComponentTypeEnum.TEXT_AREA) { Integer minLength = config.getMinLength();
if (minLength != null && minLength > 0) { FormItemRule minRule = new FormItemRule(); minRule.setMin(minLength); minRule.setMessage("请至少输入 " + minLength + " 个字");
rules.add(minRule); }
Integer maxLength = config.getMaxLength();
if (maxLength != null && maxLength > 0) { FormItemRule maxRule = new FormItemRule(); maxRule.setMax(maxLength); maxRule.setMessage("请最多输入 " + maxLength + " 个字");
rules.add(maxRule); } }
// ... 其他约束规则
return formItem; }}很明显，这份代码违反了 开闭原则（对扩展开放，对修改关闭）：如果此时需要添加一种新的表单项（包含特殊的组件属性），那么不可避免的要修改 convert 方法来进行新表单项的特殊处理。观察上面的代码，将配置转变为表单项 这个操作，满足以下流程：
创建表单项，并设置通用的表单项属性，然后再对不同表单项的特殊属性进行处理 创建组件属性，处理通用的组件属性，然后再对不同组件的特殊属性进行处理 创建约束规则，处理通用的约束规则，然后再对不同表单项的特性约束规则进行处理
▐ 方案
定义出模板
public abstract class FormItemConverter {
/** * 子类可处理的表单项类型 */ public abstract FormItemTypeEnum getType();
/** * 将输入的配置转变为表单项的操作流程 * * @param config 前端输入的配置 * @return 表单项 */ public final FormItem convert(FormItemConfig config) { FormItem item = createItem(config); // 表单项创建完成之后，子类如果需要特殊处理，可覆写该方法 afterItemCreate(item, config);
FormComponentProps props = createComponentProps(config); item.setComponentProps(props); // 组件属性创建完成之后，子类如果需要特殊处理，可覆写该方法 afterPropsCreate(props, config);
List<FormItemRule> rules = createRules(config); item.setRules(rules); // 约束规则创建完成之后，子类如果需要特殊处理，可覆写该方法 afterRulesCreate(rules, config);
return item; }
/** * 共用逻辑：创建表单项、设置通用的表单项属性 */ private FormItem createItem(FormItemConfig config) { FormItem formItem = new FormItem();
formItem.setCode(config.getCode()); formItem.setTitle(config.getTitle()); formItem.setComponent(config.getComponent());
return formItem; }
/** * 表单项创建完成之后，子类如果需要特殊处理，可覆写该方法 */ protected void afterItemCreate(FormItem item, FormItemConfig config) { }
/** * 共用逻辑：创建组件属性、设置通用的组件属性 */ private FormComponentProps createComponentProps(FormItemConfig config) { FormComponentProps props = new FormComponentProps();
if (config.isReadOnly()) { props.setReadOnly(true); }
if (StringUtils.isNotBlank(config.getPlaceholder())) { props.setPlaceholder(config.getPlaceholder()); }
return props; }
/** * 组件属性创建完成之后，子类如果需要特殊处理，可覆写该方法 */ protected void afterPropsCreate(FormComponentProps props, FormItemConfig config) { }
/** * 共用逻辑：创建约束规则、设置通用的约束规则 */ private List<FormItemRule> createRules(FormItemConfig config) { List<FormItemRule> rules = new ArrayList<>(4);
if (config.isRequired()) { FormItemRule requiredRule = new FormItemRule(); requiredRule.setRequired(true); requiredRule.setMessage("请输入" + config.getTitle());
rules.add(requiredRule); }
return rules; }
/** * 约束规则创建完成之后，子类如果需要特殊处理，可覆写该方法 */ protected void afterRulesCreate(List<FormItemRule> rules, FormItemConfig config) { }}模板的实现
/** * 下拉选择框的转换器 */@Componentpublic class DropdownSelectConverter extends FormItemConverter {
@Override public FormItemTypeEnum getType() { return FormItemTypeEnum.DROPDOWN_SELECT; }
@Override protected void afterPropsCreate(FormComponentProps props, FormItemConfig config) { props.setAutoWidth(false);
if (config.isMultiple()) { props.setMode("multiple"); } }}
/** * 模糊搜索框的转换器 */@Componentpublic class FuzzySearchConverter extends FormItemConverter {
@Override public FormItemTypeEnum getType() { return FormItemTypeEnum.FUZZY_SEARCH; }
@Override protected void afterItemCreate(FormItem item, FormItemConfig config) { item.setFuzzySearch(true); }
@Override protected void afterPropsCreate(FormComponentProps props, FormItemConfig config) { props.setAutoWidth(false); }}
/** * 通用文本类转换器 */public abstract class CommonTextConverter extends FormItemConverter {
@Override protected void afterRulesCreate(List<FormItemRule> rules, FormItemConfig config) { Integer minLength = config.getMinLength();
if (minLength != null && minLength > 0) { FormItemRule minRule = new FormItemRule(); minRule.setMin(minLength); minRule.setMessage("请至少输入 " + minLength + " 个字");
rules.add(minRule); }
Integer maxLength = config.getMaxLength();
if (maxLength != null && maxLength > 0) { FormItemRule maxRule = new FormItemRule(); maxRule.setMax(maxLength); maxRule.setMessage("请最多输入 " + maxLength + " 个字");
rules.add(maxRule); } }}
/** * 单行文本框的转换器 */@Componentpublic class TextInputConverter extends CommonTextConverter {
@Override public FormItemTypeEnum getType() { return FormItemTypeEnum.TEXT_INPUT; }}
/** * 多行文本框的转换器 */@Componentpublic class TextAreaConvertor extends FormItemConverter {
@Override public FormItemTypeEnum getType() { return FormItemTypeEnum.TEXT_AREA; }}制作简单工厂
@Componentpublic class FormItemConverterFactory {
private static final EnumMap<FormItemTypeEnum, FormItemConverter> CONVERTER_MAP = new EnumMap<>(FormItemTypeEnum.class);
/** * 根据表单项类型获得对应的转换器 * * @param type 表单项类型 * @return 表单项转换器 */ public FormItemConverter getConverter(FormItemTypeEnum type) { return CONVERTER_MAP.get(type); }
@Autowired public void setConverters(List<FormItemConverter> converters) { for (final FormItemConverter converter : converters) { CONVERTER_MAP.put(converter.getType(), converter); } }}投入使用
@Componentpublic class FormItemManagerImpl implements FormItemManager {
@Autowired private FormItemConverterFactory converterFactory;
@Override public List<FormItem> convertFormItems(JSONArray inputConfigs) { return IntStream.range(0, inputConfigs.size()) .mapToObj(inputConfigs::getJSONObject) .map(this::convertFormItem) .collect(Collectors.toList()); }
private FormItem convertFormItem(JSONObject inputConfig) { FormItemConfig itemConfig = inputConfig.toJavaObject(FormItemConfig.class); FormItemConverter converter = converterFactory.getConverter(itemConfig.getType());
if (converter == null) { throw new IllegalArgumentException("不存在转换器：" + itemConfig.getType()); }
return converter.convert(itemConfig); }}Factory 只负责获取 Converter，每个 Converter 只负责对应表单项的转换功能，Manager 只负责逻辑编排，从而达到功能上的 “低耦合高内聚”。
设想一次扩展
@Componentpublic class NumberPickerConverter extends FormItemConverter {
@Override public FormItemTypeEnum getType() { return FormItemTypeEnum.NUMBER_PICKER; }
@Override protected void afterRulesCreate(List<FormItemRule> rules, FormItemConfig config) { Integer minNumber = config.getMinNumber(); // 处理最小值 if (minNumber != null) { FormItemRule minNumRule = new FormItemRule();
minNumRule.setMinimum(minNumber); minNumRule.setMessage("输入数字不能小于 " + minNumber);
rules.add(minNumRule); }
Integer maxNumber = config.getMaxNumber(); // 处理最大值 if (maxNumber != null) { FormItemRule maxNumRule = new FormItemRule();
maxNumRule.setMaximum(maxNumber); maxNumRule.setMessage("输入数字不能大于 " + maxNumber);
rules.add(maxNumRule); } }}战斗在阿里电商的核心地带，负责连接供需两端，支持电商营销领域的各类产品、平台和解决方案，其中包括聚划算、百亿补贴、天猫U先、天猫小黑盒、天猫新品孵化、品牌号等重量级业务。我们深度参与双11、618、99划算节等年度大促，不断挑战技术的极限！ 团队成员背景多样，有深耕电商精研技术的老司机，也有朝气蓬勃的小萌新，更有可颜可甜的小姐姐，期待具有好奇心和思考力的你的加入！
【招聘岗位】Java 工程师 、数据工程师
如果您有兴趣可将简历发至 michaelchow.zm@alibaba-inc.com
或者添加作者微信 wx_zhou_mi 进行详细咨询，欢迎来撩~
作者|之叶
编辑|橙子君
出品|阿里巴巴新零售淘系技术