美文网首页
js状态模式之我见

js状态模式之我见

作者: Yubble | 来源:发表于2019-03-25 00:06 被阅读0次

        js的设计模式两年前就开始接触了,起初只是跟着张容铭小哥的《JavaScript设计模式》学学js的面向对象,闭包的使用,继承封装这些基础。

        刚开始学设计模式的时候总觉得项目中用不上啊,我直接if else for循环个好几遍写好逻辑就好了呀。然而当我成为一名在互联网公司混迹多年的老菜鸟,我发现同样是一段业务,有的人就能把它写成诗,有些人就会把它写成屎。

        说的有点多了,还是回到主题吧,这一篇好好分享一下我对状态模式的理解。

        我对他的第一感觉是,当一个对象内充满了对各种不同状态而做出的不同逻辑变化,避免堆砌逻辑判断,说的直接点就是少写if else。

                                                                                            ——高级装逼工程师Yubble

        书中给到的实例是这样的:

        可以看到这就是在下还是一只小菜鸡时候的编码风格,当我的状态码越来越多,我这个ShowResult方法会越来越长,照这个路子写我else if就得这么一直加下去。我的业务倒也没什么毛病,功能也能实现,照样儿跟老板交差领工资。

        但是!如果等到这个项目业务够大了。ShowResult这个方法变得特别庞大,其中光一个else if (result == 1) {} 的代码块就十好几行,这个时候我们增删改查一块状态逻辑的成本可就上去了,这个时候如果项目中来个新同学绝对看哭啊。

        所以书中给到的解决方案是这样的:

        作者用了个自执行的函数做了个闭包,返回了一个对象,这个对象有一个show方法...算了太简单了,自行体会吧~

        但是有一个地方在下一定要多嘴一句,很多客爷分不清状态模式和策略模式,因为这两种设计模式都是在减少if else的编写量,可以说核心思想是一致的。不过如果要仔细分辨还是有几点区别的,不过在下这节不讲~🤖🤖🤖🤖🤖

        不过状态模式的特点还是一定要提:

            1,一定存在状态对象和环境方法

            2,是针对一个对象的状态做的方法处理,所以方法只对当前对象有用,不可复用

      虽说是我这个老菜鸡自己意会总结的两点,但还是经过我一次次与面试官吹牛逼的淬炼过的。

      我们还是结合上面这个例子来做个深入理解吧。

        首先这部分就是我们保存的状态对象,如果在实际项目中可以把它单独写在一个js文件中,是不是形成分离了。

        光有状态我们也要有方法去调用啊,这就是调用不同状态的环境方法。

        不论哪个使用状态模式的对象,其内部一定至少包含这两个部分。       

        然后就是它的调用,因为这种设计模式对应解决的业务核心还是对象的状态,所以他也只是给对象自己用的,无法复用。


        在网上呢看到了一些实例,但是不论哪些都离不开状态与环境这两大特点。

        让我们通过两个可爱的习题来巩固一下设计思维吧~

        首先是经典的红绿灯案例。

        我的菜鸡思维:

        首先这么写肯定也没错,项目中这么用也没有毛病,但是我就是固执的想嘚瑟一下~

        上面这个红绿灯实例我把灯的三种状态单独提了出来作为status对象,将调用状态的环境方法写成了change方法,这样一个健康的状态模式思维算是出现了,但是如果真的是项目中某一个对象只有三种状态,其实没必要弄这么嘚瑟一下,工作中还是低调一点比较好...

                                        ———————————手动分割线———————————

        其次是《JS设计模式》中提到的超级玛丽

        这个案例在小可脑中可以说是刻画的入木三分,因为它也是解决了在下一段时间写h5活动页时混乱的思路和方式。

        当我们玩超级玛丽时控制的玛丽就是一个对象,如果客爷是游戏圈的应该是叫一个精灵对吧,那么我们可以通过控制玛丽的各种‘状态’:跑,跳,蹲,来过关游戏。

        身为菜鸡的我就会这么写:

        写过游戏的客爷都会深有体会,一个精灵如果就这么几个状态一点都不好玩,游戏想要好玩操作就一定要多变。所以玛丽就应该会加速,会跑跳,会变走边开枪,此时玛丽应该会很多复合状态。

        这样一条一条写下去别想找朋友结婚生孩子了,稍微有一点需求变动加班就不是一时半会儿的。

        所以可以根据刚才小可总结的状态模式两大特点来判断这个需求是否适合状态模式,首先他是一个对象且有多种私有状态,其次这个对象需要一个环境方法来对自己的状态做出变化。

        整理好了思路我们来撸个代码试试吧✍️

        首先玛丽是一个对象,他有一个私有的状态对象。

        然后为了能让玛丽改变状态,需要一个环境方法,这个方法写在原型上吧

        这个方法我写的和作者原著上不太一样,作者是通过changeStatus方法去收集精灵的状态变化,然后再通过别的方法来释放所有状态对应的方法。而在下认为,在我们按下手柄的瞬间其实就应该立刻去更改精灵状态变化。所以我将状态收集与状态执行写成了一个方法。

        所以现在通过这种状态模式的设计,我们的小玛丽(mmm)不光能在我们的命令下开枪,还能在我们同时按下方向键的时候大跳!是不是很开心啊


        状态模式就这么介绍完毕了,为什么要第一个说它呢,因为也算是用的比较广泛,同时也为了下一个备受欢迎的策略模式埋下伏笔,很多和在下一样的客爷分不清策略和状态,其实~无所谓,只要记住大体的设计思维,工作中能做到代码优化避免无效加班,管他叫什么模式呢。

        终于到了废话时间,经过在下的努力,终于找到了一家在业内还比较健康的互联网公司。在这个公司都在优化裁员的时期还在招聘的一定都是牛逼的公司,在这个狼多肉少的时期还敢裸辞的人也一定有点本事。明天就要去新公司报道了,期待能在这个地方大干一场。🤣

相关文章

  • js状态模式之我见

    js的设计模式两年前就开始接触了,起初只是跟着张容铭小哥的《JavaScript设计模式》学学js的面向对...

  • js状态模式

    介绍 状态模式定义一个对象,这个对象可以通过管理其状态从而使得应用程序作出相应的变化。状态模式是一个非常常用的设计...

  • JS设计模式-状态模式

    介绍 一个对象有状态变化 每次状态变化都会触发一个逻辑 不能总是使用if...else来控制eg: 红绿灯 收藏...

  • JS设计模式之状态模式

    # 什么是“状态模式”? 状态模式:对象行为是根据状态改变,而改变的。特点:正是由于内部状态的变化,导致对外的行为...

  • 2018-04-01

    什么是vuex? Vuex 是一个专为Vue.js用程序开发的状态管理模式。 状态管理模式中的状态是指什么状态?为...

  • Vuex - 1 - 敲门

    1.Vuex的意义 为Vue.js应用开发的状态管理模式以一个全局单例模式管理组件共享的状态 2.状态管理模式 2...

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • 关于vuex

    1、vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 什么是“状态管理模式”? ...

  • vuex

    vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式也是为 Vue.js 设计的状态管理...

  • Vuex知识整理

    Vuex是什么? Vuex是为了Vue.js应用程序开发的状态管理模式。那什么是“状态管理模式”呢?通俗来讲,它就...

网友评论

      本文标题:js状态模式之我见

      本文链接:https://www.haomeiwen.com/subject/chyevqtx.html