当前位置: 首页 > Web前端 > vue.js

react-vue中的设计模式

时间:2023-04-01 00:37:15 vue.js

前言程序员内外兼修。他们用一生中的大部分时间,用头发和健康换取自由的钥匙。和武术一样,程序员也分内功和外功。内功主要是提升武道修为,包括一些经文和心法,比如小无相功法、呼吸法等等,这些应该算是武道中最高的内功和心法了。外功就是一些武功招式,比如“降龙十八掌”等等。现在的程序员特别注重外功的培养,会把所有的技能点加在不同的武学上。殊不知,只有内功,才能使你的修行更加有效。内在力量方法确保代码让您比来之前更健康。(Refactoring)自律去理解各种编程方法,知道什么时候使用(架构)一些原则功能模块相对独立别抱怨CompositeReusePrinciple尽量使用synthesis/aggregation的方法,而不是使用继承的内功-onCapabilities,productcapabilities等外技秘籍必备知识树通用业务解决方案前端工具的开发与使用我们通常99%的时间都在积累外技秘籍,毕竟前端太多了-端工具,毕竟常用的只有一种状态关系,用4、5种,而且大部分都是通过业务功能积累的,如果y想要修炼绝世武功,不仅需要天赋、勤奋、方法、师徒,更需要花时间去积累自己的方法论。设计模式首先需要花功夫学习设计模式。设计模式不受语言限制。它是一种具有可迁移性的知识,学习后可以受益于整个职业生涯。语言和框架是不可迁移的,很多前端同学把精力花在学习框架的特性上,遇到前端技术的迭代期就尴尬了。这也是为什么在大公司面试问框架的原理,就是看你能不能把握住一些不变的东西,所以也需要滔滔不绝的讲讲上下文相关的细节。不是面试官要的,我真正想听的是你抽象之后对框架的总体原理的总结。GOF共有23种设计模式,先通过我们最熟悉的react||vue来了解一下GOF。GOF是设计??模式的经典巨著《设计模式——可复用面向对象软件的基础》,书中总结了23种设计模式。让我列出我们见过的设计模式。单例(Singleton)模式定义:一个类只能产生一个实例,这个类提供了一个全局访问点,供外部获取实例,它的扩展就是有限多实例模式。例子:Vuex保证了唯一的Store,单例组件工厂(FactoryMethod)模式的定义:一个创建产品的接口,子类决定生产什么产品。示例:单独封装新的操作。遇到new,就要考虑是否使用工厂模式。在组件中传入实际参数,返回不同的组件**抽象工厂(AbstractFactory)模式定义:提供一个创建产品族的接口,它的每个子类都可以生产一系列相关的产品。示例:比如有一种情况,不同的订单状态对应不同的动作按钮。我们是不是一般会这样写代码switch(status){case'pendingpayment':setState({status:1})break;}如果把订单状态的一些判断和业务代码混在一起,不利于我们扩展并重复使用。然后比较下面的代码case'待发货':obj=newStatusWaitToShip()break;...}returnobj}//获取数据使用letorderStatusFactory=newOrderStatusFactory()letstatus=orderStatusFactory.createStatusObjWith(data.status)this.setState({status:status})复合模式定义:将对象组合成一棵树-like层次结构,使用户能够一致地访问单个和复合对象。例子:从组件组合模型中得到的启发,组件界面设计的三原则界面要小,props的数量要少按照数据边界划分组件,尽可能使用组合将状态提取到上层组件在同时,我们也接触到了其中的一些Bestpractice:避免使用renderXXXX函数,直接使用独立的纯函数组件,给回调函数类型的props加上统一的前缀,比如on或者handle,使用propTypes来定义组件的props观察者(Observer)模式定义当一个变量值被修改时,可以自动通知所有其他关注这个变量的对象,并自动重新更新获取这个变量的新值例子:Vue的双向监控是基于观察者模式实现的GOF的23种设计模式