木灵鱼儿

木灵鱼儿 3年前 vue 项目实战

完善版对象扁平化和反扁平化

对象扁平化其中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) => { ...

2721 0 0

对象扁平化对象反扁平化

Cocos Creator 事件穿透

木灵鱼儿 3年前 Cocos Creator

Cocos Creator 事件穿透

前言Cocos Creator 中可以通过挂载 BlockInputEvents组件来防止事件穿透，但是如果我们想让它能够事件穿透，官方的文档只字不提。这个需求也是有场景的，比如我们有两个元素，A和B，B会浮动到A上，从而导致click被B给挡住了，从而A事件无法触发了，这种场景在打地鼠游戏中是常见的。解决办法我们需要给挡住的那个元素添加允许事件穿透，用上面的例子，那就是需要给B节点添加一个事件穿透。import { _decorator, Component, Node } from "cc"; const { ccclass, property } = _deco...

6006 6 2

Cocos Creator 事件穿透

关于给css自动添加浏览器前缀

木灵鱼儿 3年前 vue 项目实战

关于给css自动添加浏览器前缀

前言为了兼容之前的旧浏览器版本，特别是安卓4.4这种低版本，transform是一定得增加浏览器前缀的，但是我在项目中遇到了设置无效的问题，极度蛋疼，下面是我的解决教程，当然没这个问题，看这篇文章，相信你对如果给项目增加浏览器前缀，会有很充分的认识。教程给css增加浏览器前缀，业界的做法就是使用postcss，目前webpack与vue cli他们需要安装的依赖略有不同：webpack：pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...

4992 0 0

css vue webpack

vscode 隐藏.meta文件

木灵鱼儿 3年前 Cocos Creator

vscode 隐藏.meta文件

前言.meta文件是cocos自己的配置文件，用于标识每个文件的，在开发过程中不用关心这个文件，但是通过vscode打开cocos项目会将.meta和ts这些文件全部显示在一起，非常影响开发，得想办法忽略显示这个文件。教程在vscode设置里搜索：files，找到Files:Exclude，添加一个新的规则：**/*.meta保存即可。如果不想可视化，可以打开vscode的json配置文件，填入以下内容：{ "files.exclude": { "**/*.meta": true } }保存也是一样的。

3902 0 0

vscode cocos .meta

github重新设置ssh rsa key

木灵鱼儿 3年前 Git 笔记

github重新设置ssh rsa key

前言最近遇到这么一个问题，我之前在搞ssh远程的时候，把之前生成的rsa令牌全给删除了，这就导致之前在github上绑定的key无法继续使用了，我无法再推送数据到github仓库了。解决办法就是重新生成一个令牌并绑定，期间还需要在首次的时候使用命令拉取一下，并输入yes才行。教程生成rsassh-keygen -t ed25519 -C "your_email@example.com"照着官方的教程就行了，此时window用户，他会在：本地c盘 -> 用户 -> 你的用户名 -> .ssh目录下，生成名为ed25519的令牌，它有两个文件：id_ed...

3231 0 0

git github rsa

行为模式：职责链模式

木灵鱼儿 3年前设计模式

行为模式：职责链模式

简介责任链模式：为了避免请求发送者与多个请求处理者耦合在一起，于是将所有请求的处理者通过前一对象记住其下一个对象的引用而连成一条链；当有请求发生时，可将请求沿着这条链传递，直到有对象处理它为止。举个例子，小明因为感冒需要请假，此时它的需要请3天，但是他的小组长只有1天的允许权限，小组长的领导项目经理有2天的权限，而能允许3天的只有老板，但是小明是新员工，所以它只能一步步的问，直到问到老板才成功请到了假期。但是如果小明的公司更大，那么它的审批流程就可能会更加复杂，如果人事流通了，说不定还得重新问一遍，有没有什么办法能方便一点呢？于是就有了职责链模式，它可以理解为一个申请表单，只要有领导在职...

3584 0 0

设计模式职责链模式链表

行为模式：策略模式

木灵鱼儿 3年前设计模式

行为模式：策略模式

简介策略模式：该模式定义了一系列算法，并将每个算法封装起来，使它们可以相互替换，且算法的变化不会影响使用算法的客户。策略模式属于对象行为模式，它通过对算法进行封装，把使用算法的责任和算法的实现分割开来，并委派给不同的对象对这些算法进行管理。简单点来说就是，我现在有10个算法，可能会根据不同的状态使用不同的算法，一般的做法就是if else或者switch这种判断方式，这样的话就跟状态模式一样，后续新增的算法和状态判断又得套一层if判断，这样的话代码的可读性就下降，且维护起来比较麻烦。我们来看个代码例子：function calc(type: number, a: number, b: ...

3544 0 0

设计模式行为模式策略模式

行为模式：状态模式

木灵鱼儿 3年前设计模式

行为模式：状态模式

简介状态模式：对有状态的对象，把复杂的“判断逻辑”提取到不同的状态对象中，允许状态对象在其内部状态发生改变时改变其行为。简单点来说，我们在平时开发的过程中，会遇到一个对象中会判断一个“状态”的不同，从而会使用不同的行为（函数之类的调用），常见的做法就是if else或者switch这种判断方式，当我们一个状态有多种形式时，可能会产生大量的if else语句，这就不好维护了，如果每次新增一种状态，就得改动一次该对象，显然不符合我们的开闭原则。而状态模式是将每种状态的处理都单独提取出来，然后通过源对象进行组合使用，状态对象会持有源对象，当状态A发生改变时，会调用持有的源对象的设置状态方法，将...

3316 0 0

设计模式状态模式

行为模式：解释器模式（太难了，不一定正确）

木灵鱼儿 3年前设计模式

行为模式：解释器模式（太难了，不一定正确）

简介解释器模式：给分析对象定义一个语言，并定义该语言的文法表示，再设计一个解析器来解释语言中的句子。因为是自定义的语言，所以它的语法表示肯定是有一些相似的地方，比如必须使用空格分割这种要求，或者使用其他特殊的字符。在这个基础上我们才能进行下一步，而不是说随便写个句子就可以的。举个简单的例子：我们博客编辑文章语言是markdown，而文法就是md中的各种语法，比如## 我是2级标题；这个就表示h2标签，这个规则就是文法，我们需要创建一个解释器来解释语法，说白了就是我们需要将各种文法组成的句子转换成html标签。文法：用于描述语言的语法结构的形式规则解释器会将解释的语言生成一个抽象的语法树，...

4130 0 1

设计模式行为模式解释器模式

行为模式：备忘录模式

木灵鱼儿 3年前设计模式

行为模式：备忘录模式

简介备忘录模式：在不破坏封装性的前提下，捕获一个对象的内部状态，并在该对象之外保存这个状态，以便以后当需要时能将该对象恢复到原先保存的状态。该模式又叫快照模式。其实就是一种设计历史记录的方式，在ps中，每次操作的记录都会进行一次记录，用户可以自己选择需要回退到哪条记录，而备忘录模式，是一种能记录一个对象的内部状态，可以通过方法获取到之前保存的内部状态数据，从而进行恢复。这里面最复杂的就是需要设计好需要记录的状态数据，然后通过谁去保存，谁去控制保存的数据，谁去主动进行创建备忘录数据和读取备忘录数据。所以他会有三个角色：备忘录角色：专门存储内部状态数据的类，这个类的实例被管理者管理，被发起者...

5646 0 3

还原设计模式备忘录模式

vuex 动态注册和卸载模块

木灵鱼儿 3年前 vue 项目实战

vuex 动态注册和卸载模块

概述一般情况下，我们的vuex数据都是静态的，store在首次初始化后数据的格式就定好了，在日常使用中也确实应该这么做。但是，随着业务的发展，vuex可能会变得非常的大，或者在多页面打包的时候，每个页面都需要vuex，但是如果把每个页面的vuex都写在一起，你会发现，原来我a页面可能只需要30个vuex的数据监听，但是会多出来其他页面的数据，这显然不应该的。所以，我们需要一个能够动态加载模块的方法，每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api：registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...

5296 0 0

vue vuex 动态注册vuex

行为模式：中介者模式

木灵鱼儿 3年前设计模式

行为模式：中介者模式

简介中介者模式：定义一个中介对象来封装一系列对象之间的交互，使原有对象之间的耦合松散，且可以独立地改变它们之间的交互。中介者模式又叫调停模式，它是迪米特法则的典型应用。我们来举个例子：机场的飞机降落起飞，都是需要通过塔台进行调度的，如果没有塔台的调度，5架飞机之间需要相互通信确认，以免出现问题，但是如果这么做，一定会出现问题，我们可以看下他们此时的关系网络。每一架飞机都要和其他4架飞机进行沟通通讯，如果这个关系网放在代码上去实现，这是非常难看的，这代码神仙看了都得摇头。而中介者就是为了解决这种网状的关系，通过增加一个中介对象，大家都通过中介对象进行通信，从而将飞机1对4的情况转为1对1的...

3325 0 0

设计模式行为模式解耦

行为模式：观察者模式

木灵鱼儿 3年前设计模式

行为模式：观察者模式

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

3716 0 0

设计模式行为模式观察者模式

行为模式：迭代器模式

木灵鱼儿 3年前设计模式

行为模式：迭代器模式

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

3456 0 0

Iterator 设计模式行为模式

行为模式：访问者模式

木灵鱼儿 3年前设计模式

行为模式：访问者模式

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

3417 0 0

设计模式行为模式访问者模式

行为模式：命令模式

木灵鱼儿 3年前设计模式

行为模式：命令模式

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

3421 0 0

菜单设计模式行为模式

行为模式：模板方法模式

木灵鱼儿 3年前设计模式

行为模式：模板方法模式

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

3111 0 0

设计模式行为模式模板方法模式

结构型模式：代理模式

木灵鱼儿 3年前设计模式

结构型模式：代理模式

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

2979 0 0

设计模式代理模式结构型模式

centos 安装最新版 node.js

木灵鱼儿 3年前教程

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 退...

8068 0 5

node centos

babel转换node_modules中的插件

木灵鱼儿 3年前教程

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...

4451 1 0

babel node_modules

结构型模式：享元模式

木灵鱼儿 3年前设计模式

结构型模式：享元模式

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

3409 0 0

设计模式单例模式结构型模式

结构型模式：外观模式

木灵鱼儿 3年前设计模式

结构型模式：外观模式

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

3085 0 0

设计模式结构型模式外观模式

结构型模式：组合模式

木灵鱼儿 3年前设计模式

结构型模式：组合模式

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

3178 0 0

设计模式结构型模式组合模式

结构型模式：装饰器模式

木灵鱼儿 3年前设计模式

结构型模式：装饰器模式

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

3088 0 0

设计模式结构型模式装饰器模式

结构型模式：桥接模式

木灵鱼儿 3年前设计模式

结构型模式：桥接模式

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

3099 0 0

设计模式结构型模式桥接模式

木灵鱼儿

完善版对象扁平化和反扁平化

Cocos Creator 事件穿透

关于给css自动添加浏览器前缀

vscode 隐藏.meta文件

github重新设置ssh rsa key

行为模式：职责链模式

行为模式：策略模式

行为模式：状态模式

行为模式：解释器模式（太难了，不一定正确）

行为模式：备忘录模式

vuex 动态注册和卸载模块

行为模式：中介者模式

行为模式：观察者模式

行为模式：迭代器模式

行为模式：访问者模式

行为模式：命令模式

行为模式：模板方法模式

结构型模式：代理模式

centos 安装最新版 node.js

babel转换node_modules中的插件

结构型模式：享元模式

结构型模式：外观模式

结构型模式：组合模式

结构型模式：装饰器模式

结构型模式：桥接模式

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

完善版 对象扁平化和反扁平化

Cocos Creator 事件穿透

关于给css自动添加浏览器前缀

vscode 隐藏.meta文件

github重新设置ssh rsa key

行为模式：职责链模式

行为模式：策略模式

行为模式：状态模式

行为模式：解释器模式（太难了，不一定正确）

行为模式：备忘录模式

vuex 动态注册和卸载模块

行为模式：中介者模式

行为模式：观察者模式

行为模式：迭代器模式

行为模式：访问者模式

行为模式：命令模式

行为模式：模板方法模式

结构型模式：代理模式

centos 安装最新版 node.js

babel转换node_modules中的插件

结构型模式：享元模式

结构型模式：外观模式

结构型模式：组合模式

结构型模式：装饰器模式

结构型模式：桥接模式

最近评论

博客文章RSS订阅

博客评论RSS订阅

完善版对象扁平化和反扁平化