官方文档：Teleport该组件可以将插槽接收的内容渲染到指定的dom位置，常见的一个业务需求就是model弹窗了，我们有时候会在子组件里面去书写一个弹窗，但是这个弹窗是全局性的，为了防止被定位元素影响，我们vue2时会在mounted生命钩子里手动将model的dom传入body里面，而且还得在销毁时从body移除。vue3提供了teleport组件，它和react的传送门组件其实效果相同，它有两个props属性：toto支持字符串和html元素，如果是字符串，指的是css选择器，而html元素则是dom。disabled接收一个布尔值，表示是否禁用传送门，通过这个属性我们可以很方便的...
前言使用了ts最头疼的是什么，除了类型声明应该没有第二家了，那么在vue3中如何正确的声明ts类型，代表着我们踏出了认识vue3的第一步，这非常重要，所以为此水个文章，分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要，因为一直使用的Vetur，而且这个插件刚出来时并不完善，各种视频up讲的那个一键分屏功能其实也并不好用，虽然是个很有意思的东西，但是没有那种非要使用它的点，所以当时的我怀着这么一个疑问？为什么要用Volar ？现在我就通过两张图告诉你，它有多香！我们在template里面写代码，绑定变量最烦的是什么，就是我们写了个对象，但是忘了它的属性有哪些啊，使用...
前言看本文章前建议先看上一篇《Cocos Creator 制作仿DNF血条》，这样就会明白优化的处理有哪些了。上一章中，我们的血条它的逻辑是两条血条来回切换，包括颜色，宽度，层级，控制起来其实是非常不方便的， 逻辑也变得复杂了，而且没有考虑到秒杀的情况下血条的处理，所以这次根据同事提供的好主意我重新写了一版。教程原理我们可以将第二条血条作为一个固定的底色来控制，只有当第二条血没有的时候，我们将其设置白色的，这样每次血条width控制其实都在第一条上面。也就是说，血条的宽度控制其实一直是第一条在循环控制，扣完了马上切换成第二条的颜色，然后宽度设满，第二条的颜色变成第三条，直到没有血条了，第...
前言最近在想boss的血条制作，比较简单的就是单条血条，但是我想弄个想类似dnf那种，血条减完一条还有一条的那种，于是有了本篇文章预览图教程节点结构由于cocos原生没有这种血条，我们需要手动创建，我先通过两个单色精灵模拟血条的框架，大概就是一个大的节点里面包含一个小的节点，两个节点颜色不一致，里面的节点宽高都小4px，这样就模拟出边框的效果了。然后就是血条了，我的原理是通过两个血条节点进行来回替换实现的，当血量有两管血的时候，一开始就扣除时控制第一条血条的width，然后这是这个计算非常重要，它需要return出余值，当它存在余值的时候，说明还能扣血， 此时一瞬间将第一条置于第二条的底...
对象扁平化其中objectDit表示的是对象的分割符/** * @description: 对象扁平化 * @param {object} data * @Date: 2022-06-01 17:41:13 * @Author: mulingyuer */ export function objectFlat(data: object, options = { objectDit: "." }): object { let newObj = {}; let process = (key: string, value: any) => { ...
前言Cocos Creator 中可以通过挂载 BlockInputEvents组件来防止事件穿透，但是如果我们想让它能够事件穿透，官方的文档只字不提。这个需求也是有场景的，比如我们有两个元素，A和B，B会浮动到A上，从而导致click被B给挡住了，从而A事件无法触发了，这种场景在打地鼠游戏中是常见的。解决办法我们需要给挡住的那个元素添加允许事件穿透，用上面的例子，那就是需要给B节点添加一个事件穿透。import { _decorator, Component, Node } from "cc"; const { ccclass, property } = _deco...
前言为了兼容之前的旧浏览器版本，特别是安卓4.4这种低版本，transform是一定得增加浏览器前缀的，但是我在项目中遇到了设置无效的问题，极度蛋疼，下面是我的解决教程，当然没这个问题，看这篇文章，相信你对如果给项目增加浏览器前缀，会有很充分的认识。教程给css增加浏览器前缀，业界的做法就是使用postcss，目前webpack与vue cli他们需要安装的依赖略有不同：webpack：pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
前言最近遇到这么一个问题，我之前在搞ssh远程的时候，把之前生成的rsa令牌全给删除了，这就导致之前在github上绑定的key无法继续使用了，我无法再推送数据到github仓库了。解决办法就是重新生成一个令牌并绑定，期间还需要在首次的时候使用命令拉取一下，并输入yes才行。教程生成rsassh-keygen -t ed25519 -C "your_email@example.com"照着官方的教程就行了，此时window用户，他会在：本地c盘 -> 用户 -> 你的用户名 -> .ssh目录下，生成名为ed25519的令牌，它有两个文件：id_ed...
简介责任链模式：为了避免请求发送者与多个请求处理者耦合在一起，于是将所有请求的处理者通过前一对象记住其下一个对象的引用而连成一条链；当有请求发生时，可将请求沿着这条链传递，直到有对象处理它为止。举个例子，小明因为感冒需要请假，此时它的需要请3天，但是他的小组长只有1天的允许权限，小组长的领导项目经理有2天的权限，而能允许3天的只有老板，但是小明是新员工，所以它只能一步步的问，直到问到老板才成功请到了假期。但是如果小明的公司更大，那么它的审批流程就可能会更加复杂，如果人事流通了，说不定还得重新问一遍，有没有什么办法能方便一点呢？于是就有了职责链模式，它可以理解为一个申请表单，只要有领导在职...
简介策略模式： 该模式定义了一系列算法，并将每个算法封装起来，使它们可以相互替换，且算法的变化不会影响使用算法的客户。策略模式属于对象行为模式，它通过对算法进行封装，把使用算法的责任和算法的实现分割开来，并委派给不同的对象对这些算法进行管理。简单点来说就是，我现在有10个算法，可能会根据不同的状态使用不同的算法，一般的做法就是if else或者switch这种判断方式，这样的话就跟状态模式一样，后续新增的算法和状态判断又得套一层if判断，这样的话代码的可读性就下降，且维护起来比较麻烦。我们来看个代码例子：function calc(type: number, a: number, b: ...
简介状态模式：对有状态的对象，把复杂的“判断逻辑”提取到不同的状态对象中，允许状态对象在其内部状态发生改变时改变其行为。简单点来说，我们在平时开发的过程中，会遇到一个对象中会判断一个“状态”的不同，从而会使用不同的行为（函数之类的调用），常见的做法就是if else或者switch这种判断方式，当我们一个状态有多种形式时，可能会产生大量的if else语句，这就不好维护了，如果每次新增一种状态，就得改动一次该对象，显然不符合我们的开闭原则。而状态模式是将每种状态的处理都单独提取出来，然后通过源对象进行组合使用，状态对象会持有源对象，当状态A发生改变时，会调用持有的源对象的设置状态方法，将...
简介解释器模式：给分析对象定义一个语言，并定义该语言的文法表示，再设计一个解析器来解释语言中的句子。因为是自定义的语言，所以它的语法表示肯定是有一些相似的地方，比如必须使用空格分割这种要求，或者使用其他特殊的字符。在这个基础上我们才能进行下一步，而不是说随便写个句子就可以的。举个简单的例子：我们博客编辑文章语言是markdown，而文法就是md中的各种语法，比如## 我是2级标题；这个就表示h2标签，这个规则就是文法，我们需要创建一个解释器来解释语法，说白了就是我们需要将各种文法组成的句子转换成html标签。文法：用于描述语言的语法结构的形式规则解释器会将解释的语言生成一个抽象的语法树，...
简介备忘录模式：在不破坏封装性的前提下，捕获一个对象的内部状态，并在该对象之外保存这个状态，以便以后当需要时能将该对象恢复到原先保存的状态。该模式又叫快照模式。其实就是一种设计历史记录的方式，在ps中，每次操作的记录都会进行一次记录，用户可以自己选择需要回退到哪条记录，而备忘录模式，是一种能记录一个对象的内部状态，可以通过方法获取到之前保存的内部状态数据，从而进行恢复。这里面最复杂的就是需要设计好需要记录的状态数据，然后通过谁去保存，谁去控制保存的数据，谁去主动进行创建备忘录数据和读取备忘录数据。所以他会有三个角色：备忘录角色：专门存储内部状态数据的类，这个类的实例被管理者管理，被发起者...
概述一般情况下，我们的vuex数据都是静态的，store在首次初始化后数据的格式就定好了，在日常使用中也确实应该这么做。但是，随着业务的发展，vuex可能会变得非常的大，或者在多页面打包的时候，每个页面都需要vuex，但是如果把每个页面的vuex都写在一起，你会发现，原来我a页面可能只需要30个vuex的数据监听，但是会多出来其他页面的数据，这显然不应该的。所以，我们需要一个能够动态加载模块的方法，每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api：registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
简介中介者模式：定义一个中介对象来封装一系列对象之间的交互，使原有对象之间的耦合松散，且可以独立地改变它们之间的交互。中介者模式又叫调停模式，它是迪米特法则的典型应用。我们来举个例子：机场的飞机降落起飞，都是需要通过塔台进行调度的，如果没有塔台的调度，5架飞机之间需要相互通信确认，以免出现问题，但是如果这么做，一定会出现问题，我们可以看下他们此时的关系网络。每一架飞机都要和其他4架飞机进行沟通通讯，如果这个关系网放在代码上去实现，这是非常难看的，这代码神仙看了都得摇头。而中介者就是为了解决这种网状的关系，通过增加一个中介对象，大家都通过中介对象进行通信，从而将飞机1对4的情况转为1对1的...
简介观察者模式：指多个对象间存在一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。这种模式有时又称作发布-订阅模式、模型-视图模式。而我们前端vue的响应式原理其实就是观察者模式的实现，只不过他是完全解耦的发布订阅者模式；和基础的观察者模式实现上会有不同，原理都是一样的。观察者模式是为了将重要的部分与辅助部分进行解耦，我们举个例子：在前端中，我们的滚动条距离就可以理解为一个重要部分，我们监听了scroll事件，并在回调函数中处理了一条特殊操作，比如根据滚动的距离操作header元素显隐。此时这个代码量很少，我们知道scroll事件是不建议监听太多的，...
简介迭代器模式：提供一个对象来顺序访问聚合对象中的一系列数据，而不暴露聚合对象的内部表示。简单来说就是再程序设计中，对于一些自定义的数据结构对象，比如链表啊，或者系统提供的数据结构对象，他们的遍历方法通常会写在数据结构的类中，也就是说数据和遍历的方法是写在同一个类里面。这种方式不利于程序的扩展，因为如果要改动遍历的方法，就必须改动源数据，这违背了开闭原则。既然遍历的方法不能写在数据类中，那么将遍历的方法让客户实现不就好了，但是同样也是不可取的，如果交由客户去写，第一是会暴露很多不必要的属性给客户，第二是增加了客户端的使用负担。而迭代器模式很好的解决了这个问题，在迭代器模式中有以下几个角色...
简介访问者模式：将作用于某种数据结构中的各元素的操作分离出来封装成独立的类，使其在不改变数据结构的前提下可以添加作用于这些元素的新的操作，为数据结构中的每个元素提供多种访问方式。它将对数据的操作与数据结构进行分离，是行为类模式中最复杂的一种模式。有一点点抽象，前一句话的意思是指在写好一个类之后，这个类就基本上不需要改动了（只要需求不改），这其实就是为了解决类结构不变但操作处理逻辑易变的问题，把对数据的操作都封装到访问者类中，我们只需要调用不同的访问者，而无需改变改变结构类，实现了。简单来说就是将一些操作作为扩展分离出去， 这些扩展的功能可能现在没有，以后会有，我们无法知道以后的情况，于是...
简介命令模式是将一个请求封装为一个对象，使发出请求的责任和执行请求的责任分割开。这样两者之间通过命令对象进行沟通，这样方便将命令对象进行储存、传递、调用、增加与管理。举个简单的例子：我有一个饭店，共有五个厨师：A,B,C,D,E；每个厨师都会做不同的菜，但是我没有菜单，于是客人就必须知道我有几个厨师，他们分别会做什么菜，于是就会产生下面这些情况：客人1想吃青椒炒蛋，于是问了好几个厨师才知道C厨师会做，于是它通知C厨师做青椒炒蛋客人2想吃冒菜，于是他也问了好几个厨师，找到E厨师制作...更多你会发现客人与厨师耦合度非常之高，这显然不利于饭店的发展，然后我们想一下生活中的真实情况：每个饭店都...
简介模板方法模式：定义一个操作中的算法骨骼，而将算法的一些步骤延迟到子类中去，使得子类可以不改变整体算法结构的情况下重新定义该算法的某些特定步骤。简单点来说就是将重要的步骤顺序的处理交由父类来做，然后父类是一个抽象的类，它申明了每个步骤的抽象，由子类去进行每个步骤的具体实现。这样父类定好了一个整体的骨骼，具体步骤实现交给子类，每当需要改动时只需要更换不同的子类就可以了，符合开闭原则。代码实现//抽象父类 abstract class A { //抽象方法 public abstract step1(): void; //抽象方法 public abstract step...
简介代理模式指：由于某些原因需要给某对象提供一个代理以控制对该对象的访问。这时，访问对象不适合或者不能直接引用目标对象，代理对象作为访问对象和目标对象之间的中介。更直白的说，代理模式更注重的是对源对象的控制访问（中介和保护），虽然我们可以在代理对象上扩展源对象没有的属性，但是如果要增强原有的功能其实还需要和其他模式进行组合使用，比如装饰器模式。角色：抽象角色：用于源对象与代理对象的依赖抽象源对象：真实的业务对象，是代理类所要代表的真实对象代理类：通过抽象角色规范，提供与源对象相同的接口，内部含有对源对象的引用，通过它可以进行扩展和控制代码实现//抽象 interface AInterfa...
[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 退...
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...
简介享元模式是运用共享技术来有效地支持大量细粒度对象的复用。它通过共享已经存在的对象来大幅度减少需要创建的对象数量、避免大量相似类的开销，从而提高系统资源的利用率。举个例子：我们有一个服装工厂，它有男装和女装衣服各100套，为了销售，需要模特来帮忙拍照做成广告照片，正常情况下我们可能会这么写。class Model { private gender: string; //性别 private clothes: number; //衣服 constructor(gender: string, clothes: number) { this.gender = gende...
最近评论