行为模式:观察者模式

简介观察者模式:指多个对象间存在一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。这种模式有时又称作发布-订阅模式、模型-视图模式。而我们前端vue的响应式原理其实就是观察者模式的实现,只不过他是完全解耦的发布订阅者模式;和基础的观察者模式实现上会有不同,原理都是一样的。观察者模式是为了将重要的部分与辅助部分进行解耦,我们举个例子:在前端中,我们的滚动条距离就可以理解为一个重要部分,我们监听了scroll事件,并在回调函数中处理了一条特殊操作,比如根据滚动的距离操作header元素显隐。此时这个代码量很少,我们知道scroll事件是不建议监听太多的,...

75 0 0

行为模式:迭代器模式

简介迭代器模式:提供一个对象来顺序访问聚合对象中的一系列数据,而不暴露聚合对象的内部表示。简单来说就是再程序设计中,对于一些自定义的数据结构对象,比如链表啊,或者系统提供的数据结构对象,他们的遍历方法通常会写在数据结构的类中,也就是说数据和遍历的方法是写在同一个类里面。这种方式不利于程序的扩展,因为如果要改动遍历的方法,就必须改动源数据,这违背了开闭原则。既然遍历的方法不能写在数据类中,那么将遍历的方法让客户实现不就好了,但是同样也是不可取的,如果交由客户去写,第一是会暴露很多不必要的属性给客户,第二是增加了客户端的使用负担。而迭代器模式很好的解决了这个问题,在迭代器模式中有以下几个角色...

90 0 0

行为模式:访问者模式

简介访问者模式:将作用于某种数据结构中的各元素的操作分离出来封装成独立的类,使其在不改变数据结构的前提下可以添加作用于这些元素的新的操作,为数据结构中的每个元素提供多种访问方式。它将对数据的操作与数据结构进行分离,是行为类模式中最复杂的一种模式。有一点点抽象,前一句话的意思是指在写好一个类之后,这个类就基本上不需要改动了(只要需求不改),这其实就是为了解决类结构不变但操作处理逻辑易变的问题,把对数据的操作都封装到访问者类中,我们只需要调用不同的访问者,而无需改变改变结构类,实现了。简单来说就是将一些操作作为扩展分离出去, 这些扩展的功能可能现在没有,以后会有,我们无法知道以后的情况,于是...

86 0 0

解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译

问题起源可能Cocos Creator软件的开发人员认为每个开发者都是有两个电脑屏幕的(苦笑);它的脚本检测逻辑是:当你改动完脚本文件后,切换到Cocos Creator面板,此时才会触发预览更新,如果你是双屏的话,就不用切换,一个屏幕打开Cocos Creator,一个屏幕打开vscode,然后vscode保存后就会自动更新,此时切换到浏览器预览,一切都是那么的正常,前提你得有两块屏幕。非常蛋疼!!!这真是一个糟糕的体验!如果我们是单屏,你vscode改动脚本保存后,还得切换到Cocos Creator软件上,然后再切到浏览器去查看,超恶心有没有,怎么会有这种体验,都2022年了,文件...

110 0 0
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译

行为模式:命令模式

简介命令模式是将一个请求封装为一个对象,使发出请求的责任和执行请求的责任分割开。这样两者之间通过命令对象进行沟通,这样方便将命令对象进行储存、传递、调用、增加与管理。举个简单的例子:我有一个饭店,共有五个厨师:A,B,C,D,E;每个厨师都会做不同的菜,但是我没有菜单,于是客人就必须知道我有几个厨师,他们分别会做什么菜,于是就会产生下面这些情况:客人1想吃青椒炒蛋,于是问了好几个厨师才知道C厨师会做,于是它通知C厨师做青椒炒蛋客人2想吃冒菜,于是他也问了好几个厨师,找到E厨师制作...更多你会发现客人与厨师耦合度非常之高,这显然不利于饭店的发展,然后我们想一下生活中的真实情况:每个饭店都...

79 0 0

行为模式:模板方法模式

简介模板方法模式:定义一个操作中的算法骨骼,而将算法的一些步骤延迟到子类中去,使得子类可以不改变整体算法结构的情况下重新定义该算法的某些特定步骤。简单点来说就是将重要的步骤顺序的处理交由父类来做,然后父类是一个抽象的类,它申明了每个步骤的抽象,由子类去进行每个步骤的具体实现。这样父类定好了一个整体的骨骼,具体步骤实现交给子类,每当需要改动时只需要更换不同的子类就可以了,符合开闭原则。代码实现//抽象父类 abstract class A { //抽象方法 public abstract step1(): void; //抽象方法 public abstract step...

72 0 0

结构型模式:代理模式

简介代理模式指:由于某些原因需要给某对象提供一个代理以控制对该对象的访问。这时,访问对象不适合或者不能直接引用目标对象,代理对象作为访问对象和目标对象之间的中介。更直白的说,代理模式更注重的是对源对象的控制访问(中介和保护),虽然我们可以在代理对象上扩展源对象没有的属性,但是如果要增强原有的功能其实还需要和其他模式进行组合使用,比如装饰器模式。角色:抽象角色:用于源对象与代理对象的依赖抽象源对象:真实的业务对象,是代理类所要代表的真实对象代理类:通过抽象角色规范,提供与源对象相同的接口,内部含有对源对象的引用,通过它可以进行扩展和控制代码实现//抽象 interface AInterfa...

105 0 0

centos 安装最新版 node.js

[hide]先用yum 安装一次node先升级yum update 提示下载程序,回复y安装nodeyum install nodejsyum安装的node一般都不是最新的,所以我们还需要升级node的版本npm i n -g全局安装一个n插件n lts表示安装最新的稳定版!一些常用命令n ls查看已安装的node版本n rm 16.0.3删除16.0.3版本更多功能阅读插件文档:n等待安装完毕后,此时其实版本已经安装好了,但是输入node -v还是低版本,是因为centos的用户缓存问题。我们退出登录再登录就会刷新缓存了,此时的node -v输出的就是最新版本exit 退...

babel转换node_modules中的插件

vue cli中的处理vue cli有一个transpileDependencies配置项,在里面添加的路径,将会被babel转义。vue.config.jsmodule.exports = { transpileDependencies: [ /[/\\]node_modules[/\\](.+?)?vue-i18n(.*)[/\\]dist/, ] }官方文档:transpileDependencies[](https://cli.vuejs.org/zh/config/#transpiledependencies)webpack的配置webpack直接找到babel...

106 0 0

结构型模式:享元模式

简介享元模式是运用共享技术来有效地支持大量细粒度对象的复用。它通过共享已经存在的对象来大幅度减少需要创建的对象数量、避免大量相似类的开销,从而提高系统资源的利用率。举个例子:我们有一个服装工厂,它有男装和女装衣服各100套,为了销售,需要模特来帮忙拍照做成广告照片,正常情况下我们可能会这么写。class Model { private gender: string; //性别 private clothes: number; //衣服 constructor(gender: string, clothes: number) { this.gender = gende...

101 0 0

结构型模式:外观模式

简介外观模式:是一种通过为多个复杂的子系统提供一个一致的接口,而使这些子系统更加容易被访问的模式。该模式对外有一个统一接口,外部应用程序不用关心内部子系统的具体细节,这样会大大降低应用程序的复杂度,提高了程序的可维护性。其实就是一种封装,把一系列的操作封装成简单的接口供客户端去调用。但是不能滥用,因为本身就是为了减少客户端与各个依赖的耦合性,将一堆依赖改为依赖一个外观类。外观模式遵循的是迪米特法则,也就是最少知道原则,但是如果新增新的功能,可能会改动到外观类,所以它违背了开闭原则。它常常应用于SKD,开源类库这些,用于给外部提供精简的接口。而我们js,可能并不需要去创建一个类,直接整个函...

118 0 0
结构型模式:外观模式

结构型模式:组合模式

简介组合模式它本身是一种树形结构模式,可以将其理解为一棵树,其中树为根节点,然后有树枝和树叶,树枝不断的分叉,树枝上也会有树叶。我们看个图:它是一种将对象组合成树状的层次结构的模式,用来表示“整体-部分”的关系,使用户对单个对象和组合对象具有一致的访问性。其实说人话就是,我定义了一个接口,它有一个show方法,然后所有的对象都得实现,然后对象之间可以嵌套,因为嵌套了,所以当我调用show方法的时候,这个对象必须去遍历自己的子级嵌套对象的show方法,不断的重复,最终得到结果之和。类似于一个递归函数,只不过具体的处理都在每个对象自身show方法中去实现。组合模式常常用在:购物车、节点统计购...

88 0 0
结构型模式:组合模式

结构型模式:装饰器模式

简介在软件开发过程中,有时想用一些现存的组件。这些组件可能只是完成了一些核心功能。但在不改变其结构的情况下,可以动态地扩展其功能。所有这些都可以釆用装饰器模式来实现。装饰器模式指:在不改变现有对象结构的情况下,动态的给对象增加一些职责(功能)的一种模式。这种模式也是防止滥用继承,相对于桥接模式只能桥接两个维度,装饰器模式是可以对接多个维度的,因为他可以嵌套使用。我们举个例子:我有一个食物类:class 煎饼我单点煎饼这个食物是可以的,我也可以加不同的配料:鸡蛋、火腿、豆皮于是乎我们通过继承得到:class 鸡蛋煎饼 extends 煎饼class 火腿煎饼 extends 煎饼class...

155 11 0

结构型模式:桥接模式

简介桥接模式是指:将抽象与实现分离,使它们可以独立变化。它使用组合关系来代替继承关系来实现,从而降低了抽象和实现这两个可变维度的耦合度。简单点来说,桥接模式用就是用于连接两个独立变化维度的一种方式(组合),而为什么要连接,我们需要先了解到类继承带来的复杂性。先看一张图:我们可以看到,从最顶层的电脑类延伸了三个子类,子类又延伸出不同的品牌类,如果我们又新增了一个新的电脑子类,比如二合一电脑,又不得不重复实现一下对应的品牌子类;如果是新增新的品牌,也是同理,也得产生很多新的子类。这就导致类的不断产生,从而有了类爆炸这一说。而桥接模式,就是用于解决这个问题的,我们将他们进行抽象,你会发现有两个...

153 0 0
结构型模式:桥接模式

结构型模式:适配器模式

简介适配器模式是将某个类的接口转换成客户端期望的另一个接口表示,主要目的是兼容性,让原本因接口不匹配不能一起工作的两个类可以协同工作。举个简单的例子:我们的插排提供的是220v的电压,而我们的手机能支持的是5v电压,此时它们之间是无法协同工作的,所以我们出现了电源适配器(手机充电器),电源适配器将220v转为了5v电压供手机使用。而适配器模式有三类:类适配器模式、对象适配器模式、接口适配器模式。类适配器模式适配器模式中有三种主要角色:被适配者(src),适配器(adapter),目标的实现接口(dst);目标的实现接口,以上面电源适配器的例子来说,手机要求的是一个5v的电压,这个要求就可...

121 0 0
结构型模式:适配器模式

创建型模式:建造者模式

简介建造者模式指将一个复杂对象的构造过程与表示分离,使同样的构建过程可以创建不同的表示。它将变与不变相分离,即产品的整体组成不变,但是每一个部分是可以灵活变动的。“表示”指的就是实际生成的实例对象,相同的构造过程可以创建不同的表示,这里我们需要先了解一下构造者模式中的3个角色。角色:指挥者:调用具体建造者来创建复杂对象的各个部分,它只处理创建的过程建造者:提供各个部件的具体创建方法,在完成后提供产品的实例。产品:要创建的复杂对象指挥者指挥建造者去建造产品,同一个指挥者指挥不同的建造者,可以产生不同的产品,而指挥者也是可以替换的,不同的指挥者指挥同一个建造者,也可以产生不同的产品。但是最终...

140 0 0
创建型模式:建造者模式

字体精简-字蛛font-spider

简介记录一个精简字符的方式。利用字蛛做一些字体精简,本方式是针对英文精简,中文字体可以自行延展处理。字蛛是一个智能 WebFont 压缩工具,它能自动分析出页面使用的 WebFont 并进行按需压缩。安装字蛛github:font-spidernpm install font-spider -g注意全局安装,省事,当然也可以局部,个人选择。配置安装完毕后我们需要新建一个html文件,这个文件里面需要配置一个自定义字体css,一个div,用于显示你需要精简的字体。注意,被精简的字体文件必须是ttf格式。创建一个index.html文件<!DOCTYPE html> <ht...

148 0 0

创建型模式:原型模式

简介原型模式指的是:用一个已经创建的实例作为原型,通过复制该原型对象来创建一个和原型相同或者相似的新对象。这个原型不同于js中的prototype,它指的是被克隆的对象。在java中克隆可以通过Object父类中的clone方法实现,但是在前端中,是没有这种方式的,我们需要通过其他方法实现克隆。克隆又分浅克隆和深克隆,因为引用类型的存在,浅克隆对引用类型只会克隆该类型的内存地址,而深克隆则会完全复制一份引用类型对象,达到完全克隆。原型模式也是用于创建一个对象,而这个对象可能非常复杂,为了减少消耗的资源,更高效的生成对象。反例假设我们现在有这么一段代码:const run = { a:...

132 0 0

创建型模式:工厂模式(包含抽象工厂)

简介工厂模式是讲需要实例化的代码提取出来,放到一个专门的类中去做管理和维护,达到和主体代码的解耦,从而提高项目的扩展性和维护性。将创建实例与调用实例进行解耦!简单来说就是把new操作(创建实例)放到一个专门的地方统一管理,而不是在代码中耦合使用,方便管理和扩展。工厂模式有三种用法:简单工厂模式、工厂方法模式、抽象工厂模式简单工厂模式简单工厂模式是指由一个工厂对象决定创建出哪一种产品类的实例。比如我们需要建一个饭店,这个饭店需要招三名厨师,他们要有各自的拿手菜:水煮牛肉、青椒炒蛋、炒米粉。为了能方便的招聘厨师,我定了一个要求,厨师必须会:开火、颠勺、关火、出菜于是我写了一个接口来要求这些厨...

132 1 0

创建型模式:单例模式

简介所谓的的单例设计模式,就是采取一定的方法保证整个软件系统中,对某个类只能存在一个对象实例,并且该类只提供一个取得其对象实例的方法(静态方法)。以前端中vuex为例,它在整个vue的系统中,获取到的就是一个全局唯一的对象实例。由于vuex本身就是一个重量级的功能,且一个项目通常只需要一个vuex状态管理就够了,所以采用的单例模式。单例模式在java中有八种方法:饿汉式(静态常量)饿汉式(静态代码块)懒汉式 (线程不安全)懒汉式 (线程安全,同步方法)懒汉式 (线程安全,同步代码块)双重检查静态内部类枚举但是前端中其实好多方法就做不到,因为js是单线程的,且并不是强类型语言,所以其中:双...

157 0 0

设计模式概述与分类

概述设计模式是程序员在面对同类软件工程所遇到的问题总结出来的有用的经验,模式不是代码,而是某类问题的通用解决方案,设计模式代表了最佳的实践。这些解决方案是众多开发人员经过相当长的一段时间的试验和错误总结出来的。设计模式本质是为了提供:软件的维护性,通用性和扩展性,并降低软件的复杂度设计模式参考书:《Design Patterns - Elements of Reusable Object-Oriented Software》(设计模式 - 可复用的面向对象软件元素),书中共总结了23种设计模式,被广泛的认同。设计模式是针对面向对象语言的,但不局限与某一种面向对象的语言。分类设计模式可以分...

169 0 0

vue-i18n 的使用方式

安装vue2版需要安装8.x版本的,9.x的是vue3版本使用上大同小异。vue2安装:yarn add vue-i18n@8vue3安装:yarn add vue-i18n封装官方虽然支持很不错的用法,但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...

243 9 0

设计模式的7个设计原则

设计原则在软件开发中,为了提供软件系统的:可维护性、可复用性、增加软件的可扩展性和灵活性,程序员尽量根据7条原则来开发程序,从而提高软件开发效率、节约软件开发成本和维护成本。设计原则最初只有5条,单一功能、开闭原则、里氏替换、接口隔离以及依赖反转,后来又进行了增强,目前详细版的有7个原则,很多书都只有6个原则。目前共有23种设计模式。设计模式最初都是应用于强类型语言,所有很多例子都是java这种例子,所以,类,抽象,这些在后面的文章中会频繁出现。希望你有一些心理准备。开闭原则开闭原则是设计中最为重要的一个设计原则,它是所有原则的基础,所有的设计原则全部都是围绕着开闭思想延展的。正所谓原则...

223 1 0
设计模式的7个设计原则

第六章 设计模式

本章比较水,就写一个js实现的单例模式吧单例模式function Test() { //有缓存了直接抛出缓存 if (typeof Test.instance === "object") { return Test.instance; } //其他逻辑代码 ... //缓存并抛出 Test.instance = this; return this; } var a = new Test(); var b = new Test(); console.log(a === b); //t...

279 13 0

第五章 代码复用模式

代码复用是一个既重要又有趣的话题。如果你面对自己或者别人已经写好的代码,而这些代码又是经过测试的、可维护的、可扩展的、有文档的,这时候你只想写尽量少且可以被复用的代码就是一个再自然不过的想法。当我们说代码复用的时候,第一件想到方式就是继承,为此你可能看到JavaScript很多方式用于实现“继承”。什么是类?如果有一个过程,这个过程能产生一个实例,实例是对象,那这个过程就是类。JavaScript是基于原型面向对象程序设计的,那么它的继承方式也是基于原型实现的,而JavaScript是没有类的,只有构造函数,且支持new用法,所以看上去就和类的用法相似,但是本质还是一个函数,而继承也是一...

248 0 0