简单谈谈我对策略模式的理解

策略模式在React中的应用

最新推荐文章于 2024-12-04 21:00:39 发布

转载最新推荐文章于 2024-12-04 21:00:39 发布 · 363 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangrenjian/p/8807249.html

文章标签：

#javascript #设计模式 #ViewUI

本文介绍了策略模式的概念及其在React项目中的实际应用案例。通过将不同场景下的组件渲染逻辑抽象为策略对象，实现了组件复用性和扩展性的提升。文章还提到了策略模式在动画控制等其他场景的应用。

模式应用场景

一个方法内的某个行为，在不同的场景中，该行为可以有不同的实现方案，策略模式就是把这些算法从该方法内分离开来单独一个个实现，该方法只管根据场景使用对的某个算法就好

个人近些日子来项目中的运用

react中的render方法中的一个应用
看下面这段代码，这边若不用策略模式，我以往的代码方式可能就会再render方法的jsx中增加一堆if、else的分支判断来判断要渲染哪个组件，现在把它集中提取到了一个对象中类，以后若需求变了，就改这对象就好，而不用动用组件内部的代码

// 哪个tab对应哪个组件的一个conf
const TAB_PANE_CONF = {
    [onekey] : (<BasicSet/>),
    [otherkey] : (<RemindSet/>),
    [anotherkey]] : (null),
};
// 某组件的render方法中
render() {
        const {router} = this.context;
        // 会根据viewcondition来切换tabPane
        const {viewcondition} = this.props;


        return (
            <div style={{height:"100%"}} className={'sms-bs'}>
                        <Tab />
                        {
                            TAB_PANE_CONF[viewcondition]
                        }
                        {/*some other view here*/}
            </div>
        )
    }

其他运用
其实我很早就运用过策略模式了，只是我自己不知道而已，之前做过js动画，用到过tween算法，doAnimate(animateForm)方法中接收不同的参数来表示想要进行的动画形式，最后具体怎么进行动画统一由tween算法对象来控制，这其实也是个策略模式的例子
详细可参见《JavaScript设计模式与开发实践》中的策略模式一章

转载于:https://www.cnblogs.com/zhangrenjian/p/8807249.html