定义
- 是能够高效，便捷的根据不同条件，从而去执行对应策略的一种模式
- 官方定义：定义一系列算法，把它们一个个封装起来，并且使它们可相互替换。
核心点
- 通俗的拆解一下，遇到多策略，多条件情况，比如你发现了大量的多条件，且多重嵌套的if else 逻辑
- 之后，将当前所有的if else 逻辑全部进行封装成表映射逻辑
具体案例展示
本案例截取于之前做可视化圈选项目的核心代码
initActions() {
this.actions = [
{
topic: TOPIC.CIRCLE_SELECT, status: TOPIC_STATUS.ON, function: (topic, controlData) => {
// @ts-ignore
window.Is_Circle_Mark = true;
this.topic = topic;
this.bindCircleCollection(true);
this.appendWLSStyle(WLS_CIRCLE_SELECT_ID, wlsCircleSelectText);
}
},
{
topic: TOPIC.CIRCLE_SELECT, status: TOPIC_STATUS.OFF, function: (topic, controlData) => {
// @ts-ignore
window.Is_Circle_Mark = false;
this.topic = null;
this.bindCircleCollection(false);
this.removeWLSStyle(WLS_CIRCLE_SELECT_ID);
}
},
{
topic: TOPIC.CIRCLE_HIGHLIGHT, status: TOPIC_STATUS.ON, function: (topic, controlData) => {
this.topic = topic;
this.appendWLSStyle(WLS_CIRCLE_HIGHLIGHT_ID, wlsCircleHighLightText);
this.highLightElements(true, controlData);
}
},
{
topic: TOPIC.CIRCLE_HIGHLIGHT, status: TOPIC_STATUS.OFF, function: (topic, controlData) => {
this.topic = null;
this.removeWLSStyle(WLS_CIRCLE_HIGHLIGHT_ID);
this.highLightElements(false, controlData);
}
},
{
topic: TOPIC.CIRCLE_MARKLIGHT, status: TOPIC_STATUS.ON, function: (topic, controlData) => {
this.topic = topic;
this.appendWLSStyle(WLS_CIRCLE_MARKLIGHT_ID, wlsCircleMarkLightText);
this.highLightMarkElements(true, controlData);
}
},
{
topic: TOPIC.CIRCLE_MARKLIGHT, status: TOPIC_STATUS.OFF, function: (topic, controlData) => {
this.topic = null;
this.removeWLSStyle(WLS_CIRCLE_MARKLIGHT_ID);
this.highLightMarkElements(false, controlData);
}
}
];
}
可以通过表映射来通过匹配到目标策略然后去执行对应的function
if else 版本
initActions() {
this.actions = [];
if (topic === TOPIC.CIRCLE_SELECT) {
if (status === TOPIC_STATUS.ON) {
this.actions.push({
function: (topic, controlData) => {
// @ts-ignore
window.Is_Circle_Mark = true;
this.topic = topic;
this.bindCircleCollection(true);
this.appendWLSStyle(WLS_CIRCLE_SELECT_ID, wlsCircleSelectText);
}
});
} else if (status === TOPIC_STATUS.OFF) {
this.actions.push({
function: (topic, controlData) => {
// @ts-ignore
window.Is_Circle_Mark = false;
this.topic = null;
this.bindCircleCollection(false);
this.removeWLSStyle(WLS_CIRCLE_SELECT_ID);
}
});
}
} else if (topic === TOPIC.CIRCLE_HIGHLIGHT) {
if (status === TOPIC_STATUS.ON) {
this.actions.push({
function: (topic, controlData) => {
this.topic = topic;
this.appendWLSStyle(WLS_CIRCLE_HIGHLIGHT_ID, wlsCircleHighLightText);
this.highLightElements(true, controlData);
}
});
} else if (status === TOPIC_STATUS.OFF) {
this.actions.push({
function: (topic, controlData) => {
this.topic = null;
this.removeWLSStyle(WLS_CIRCLE_HIGHLIGHT_ID);
this.highLightElements(false, controlData);
}
});
}
} else if (topic === TOPIC.CIRCLE_MARKLIGHT) {
if (status === TOPIC_STATUS.ON) {
this.actions.push({
function: (topic, controlData) => {
this.topic = topic;
this.appendWLSStyle(WLS_CIRCLE_MARKLIGHT_ID, wlsCircleMarkLightText);
this.highLightMarkElements(true, controlData);
}
});
} else if (status === TOPIC_STATUS.OFF) {
this.actions.push({
function: (topic, controlData) => {
this.topic = null;
this.removeWLSStyle(WLS_CIRCLE_MARKLIGHT_ID);
this.highLightMarkElements(false, controlData);
}
});
}
}
}
//针对不同控件来执行不同的策略绑定对应的controlID。
let map = ({
JSXText: () => {
const text = childrenNode.find(x => x.type == 'JSXText');
if (text) {
const name = text.value.replace(/( |\n)/g, '');
controlId = `${fileName}_${controlType}_${name}`.toLocaleLowerCase();
}
},
defaultStrategy: () => {
controlidResult()
},
defaultValueControl: () => {
controlidResult()
},
'button': () => {
const text = childrenNode?.find(x => x.type === 'JSXText');
if (text) {
const name = text.value.replace(/( |\n)/g, '');
controlId = `${fileName}_${controlType}_${name}`.toLocaleLowerCase();
}
const texts = childrenNode.filter(x => x.type === 'JSXExpressionContainer');
texts.forEach(text => {
if (text.expression.type == "CallExpression") {
const name = text.expression.arguments[0].value;
controlId = `${fileName}_${controlType}_${name}`.toLocaleLowerCase();
}
});
}
});
try {
const strategy = (controlType) => {
JSXText.find(element => element === controlType) && (map.JSXText)();
defaultValueControl.find(element => element === controlType) && (map.defaultValueControl)();
defaultStrategy.find(element => element === controlType) && (map.defaultStrategy)();
map[controlType] && map[controlType]();
}
strategy(controlType)
} catch (error) {
console.log('error', error)
}
其实一个系统，完善的产品就是从这些不起眼的点一个个构建起来，之前接触过一些业务开发人员，觉得业务就是ifelse ,但是就算是ifelse 也要看是哪一种，精益求精的态度，是你做成事情的基础，所以之后专栏会更多偏向于着眼于可落地的场景去实践设计模式
之前系统学过一遍设计模式，时隔半年回顾复盘，本设计模式专栏，区别于那些过于理论，或者偏向后端同学，本专栏专门面向于前端人员，同时更加关注与实际日常开发，及一些常用工具涉及的最佳design mod 实践
