- 博客(65)
- 收藏
- 关注
RSS订阅原创 js基础之-如何理解js中一切皆对象的说法
***如何判断关键点是： prototype 属性只存在于可能作为构造函数的函数上。如果函数不能/不应该使用 new 调用（如箭头函数），就没有 prototype 属性1.在js中只有函数，特别是构造函数会自动获得prototype属性，比如2.不会自动生成的 prototype的情况**
2025-12-26 16:19:06
330
原创 设计模式之-状态模式
但在状态模式正好相反，状态模式是把事物的每种状态都封装成单独的类，跟此种状态有关的行为都被封装在这个类的内部，所以button按钮被按下的时候，只需要在上下文中，把这个请求委托给当前的状态对象即可，该状态对象会负责渲染他自身的行为。这句话第一部分的意思是将状态封装成独立的类，并将请求委托给当前对象，当对象的内部状态改变时，会带来不同的行为变化。第二部分是从客户的角度来啦吗，我们使用的对象，在不同的状态下具有截然不同的行为，这个对象看起来是从不同的类中实例化而来的，实际上这是使用了委托的效果。
2025-12-25 14:11:46
281
原创 设计模式之-中介者模式
中介者模式的作用就是接触对象与对象之间的紧耦合关系。增加一个中介者对象后，所有相关对象都通过中介者对象来通信，而不是相互引用，所以当一个对象发生改变时，只需要通知中介者对象即可。中介者使各对象之间耦合松散，而且可以独立地改变他们之间的交互。中介者模式使网状的多对多关系变成了相对简单的一对多的关系。在上面这段代码中，每个玩家都有两个属性，this.partners和this.enemies，用来保存其他玩家对象的引用，当每个对象的状态发生改变，比如角色移动、吃到道具或者死亡，都必须显式地遍历通知其他对象。
2025-12-24 15:24:26
673
原创 设计模式之-职责链模式
1.场景：有一个售卖手机的电商网站，公司针对缴纳500元定金和200元定金的用户有优惠政策，支付500会收到100元优惠券，支付200元收到50元优惠券，而没有支付定金的用户只能进入普通购买模式，没有优惠券，且在库存有限的情况下不一定保证能买到。orderType表示订单类型，pay表示是否已经支付定金，未支付只能降级进入普通购买模式，stock表示普通购买的手机库存数量。非原创，来源javascript设计模式与开发实践 -曾探。5.用AOP实现职责链。
2025-12-23 17:03:49
172
原创 设计模式之-享元模式
剥离了外部状态的对象成为共享对象，外部状态在必要时被传入共享对象来组装成一个完整的对象，虽然组装外部状态成为一个完整对象的过程需要花费一定事件，但却可以大大减少系统中的对象数量，相比之下，这点时间或许是微不足道的。在上面的例子中，性别是内部状态，内衣是外部状态，通过区分这两种状态，大大减少了系统中的对象数量，通常来讲，内部状态有多少种组合，系统中便最多存在多少个对象，因为性别通常只有男女，所以该内衣厂商最多只需要2个对象。下面来改写下这个代码。可以看到，改进之后的代码，只需要两个对象便完成了同样的功能。
2025-12-23 14:56:24
935
原创 设计模式之-模板模式
我们在父类中容易变化的地方放置钩子，钩子可以有一个默认的实现，究竟要不要“挂钩”,这由子类自行决定。在上面的例子中，到底谁才是所谓的模版方法呢，答案是Beverage类中的init方法，该方法封装了子类算法框架，他作为一个算法模版，指导子类以何种顺序去执行那些方法，在init方法中算法内的每一个步骤都清楚地展示在我们面前。通常在抽象父类中封装了子类的算法框架，包括实现一些公共方法以及封装子类中所有的执行顺序，子类通过继承这个抽象类，也继承了整个算法结构，并且可以选择重写父类的方法。来看一个咖啡与茶的例子。
2025-12-23 09:46:36
192
原创 设计模式之-组合模式
其中，macroCommand被称为组合对象，closeDoorCommand，openDoorCommand，openQQCommand都是叶对象。在macroCommand的execute的方法里，并不执行真正的操作，而是遍历它所包含的叶对象，把真正的execute请求委托给这些叶对象。通过这段代码，很容易发现宏命令中包含一组字命令，他们组成了一个树形结构，这是一颗结构非常简单的树。// 家里的电视和音响是连接在一起的，所以可以用一个宏命令来组合打开电视和打开音响的命令。扫描文件夹的demo。
2025-12-22 18:03:37
711
原创 设计模式之-命令模式
1 .命令模式的用途2.应用场景3.demo1-菜单程序4.命令模式的作用不仅仅是封装运算快，还可以很方便地给命令对象增加撤销操作哦，之前策略模式有写过一个Animal类，这个类是让页面上的div移动到水平方向的某个位置，下面来修改一下这个demo现在页面中有一个input文本框和一个button按钮，文本框可以输入一些数字，表示小球移动后的水平位置，小球在用户点击按钮后立即开始移动，代码如下：现在我们想要加一个撤销按钮，以便小球可以会回到初始状态，我们先把目前代码改成用命令模式实现增加撤销按钮现
2025-12-22 15:50:14
940
原创 设计模式之-策略模式
一个基于策略模式的程序至少由两部分组成，第一部分是一组策略类，策略类封装了具体的算法，并负责具体计算过程，第二个部分是环境类Context,Context接受客户的请求，随后把请求委托给某一个策略类，说明Context中要维护对某个策略对象的引用。策略模式定义了一系列的算法，并且会将每一个算法封装起来，让它们可以相互的替换。这是一种很常见的做法，提交函数比较庞大，缺少弹性，违反开放-封闭原则。下面用策略模式来重构表单校验。'密码长度不能少于6位''手机号码格式不正确'再来看一个表单的例子。
2025-12-19 18:59:27
398
原创 设计模式之-装饰器模式
现在我们看到在showLogin函数里，即要负责打开登陆浮层，又要负责数据上报，这是两个层面的功能，在此处却被耦合在一个函数，使用AOP分离之后代码如下。许多客户端希望通过不同的方式来收到通知，例如通过发送短信、微信、QQ，那么此时我们就会去扩展 Notifier 这个类，创建一些子类。像这种场景下，最佳的解决方案是使用组合而非继承，这也是前面在介绍设计原则的时候，其中就提到了组合优于继承。这是一种结构型设计模式，允许你将对象（A）放入包含行为的特殊对象里面，从而为原来的对象（A）绑定新的行为。
2025-12-19 16:36:44
335
原创 设计模式之-工厂模式
假设有产品 A，B，C，那么在标准的工厂方法模式里面，就有对应的工厂 A，B，C，假设现在需要新增一个产品 D，我们只需要新增一个对应的工厂 D 即可，原来的工厂是不受任何影响的。在抽象工厂模式中，会有一个产品族的概念，一个产品族（一个系列）会对应一组产品，之后一个工厂在生产的时候，是生产这一组产品，而非单个的某个产品。每增加一个产品，就需要增加一个工厂，当我们的产品的数量很多的时候，就会使得工厂的数量也成倍的增加。3.2产品：通过调用工厂给客户端提供的接口，所得到的对象。5.先写一个简单的工厂模式吧。
2025-12-19 14:25:44
354
原创 设计模式之-单例模式
4.虽然现在完成了一个透明的单例类的编写，但是他同样又一些缺点，在这段代码中，CreateDiv的构造器实际上负责了两件事情。6.通过引入代理类的方式，我们同样完成了一个单例模式的编写，跟之前不同的是，现在我们把负责管理单例的逻辑转移到了代理类ProxySingletonCreateDiv中，这样一来，CreateDiv就变成了一个普通的类，他跟ProxySingletonCreateDiv组合起来就可以达到单例类的效果，这个例子也是缓存代理的应用之一。5.用代理实现单例模式。
2025-12-18 17:20:46
365
原创 设计模式之-代理模式
1.代理实现懒加载1代理实现懒加载2,class的写法代理引发的思考：也许有人会有疑惑，不过是实现一个小小的图片懒加载，即使不引用任何模式也能办到，那么引入代理模式的好处究竟在哪里呢？
2025-12-18 16:05:25
1015
原创 设计模式之-发布订阅者模式
那么我们需要解藕，那么怎么做呢，那就是加中间层，我们先把他叫事件中心，一个模块发生了一件事，我不知道干嘛，比如发生了401了，你不知道干嘛也不要自作主张，这个事发生了，就抛出事件，让其别的模块监听事件，别的模块监听到事件就该干嘛干嘛，该是路由做的事情，就由路由去做，该是界面做的事就由界面去做，这样就解藕了，然后我们定义一个公共模块，即事件中心。将来有一天路由要处理的话，那就导入事件中心，自己去处理自己该干的事，比如跳转路由，界面也是一样的，各自模块各自处理自己的事情。它们只需要知道相关的消息或事件类型。
2025-12-17 18:27:52
459
原创 设计模式之-观察者模式
3.2MutationObserver,这是一个WebApi,它允许开发者监听DOM树的变化，包括元素的添加，删除，属性变化之类的，监听到变化之后，可以做出一些响应的行为。// 注册事件实际上就可以看作是发布者对观察者进行登记，或者说添加观察者的行为。// 后期当用户真实的触发点击事件的时候，对应类型的所有的事件处理器都会被触发。// 该方法接收两个参数，第一个是要观察的DOM元素，第二个是一个配置对象。// 相当于就是发布者通知所有的观察者，观察者进行自身的一些行为。
2025-12-16 17:08:49
577
原创 Object.defineProperty和Proxy实现拦截的区别
2.使用proxy,可以定义空对象，里面不写属性值，他不会报栈溢出的原因也是因为没有递归调用，根本原因是因为拦截器返回的不是它本身，而是obj的属性值。1.Object.definedProperty的实现拦截必须得声明一个额外的变量，例如下面这样。6.但是，这种写法，也是必须的在obj中写上所有的key,才可以拦截到，如果你不写的话就拦截不到。7.如果使用proxy的话，就可以不用定义key,写一个空的对象就可以。但是如果你这么写，就会报错，栈溢出,因为递归调用了。3.如果你这么写，同样会报栈溢出。
2025-12-15 18:00:31
236
原创 grid布局之-子项放置4
* 统一控制子项格子横向的排列方式 */非原创，来自渡一袁老师，简单记录下。/* 控制子项的排列 */这个可以用做表格布局。
2025-12-12 09:15:16
305
原创 grid布局之-子项放置1
* 第1个数字是行的起始线，第2个数字是列的起始线，第3个数字是行跨越几个格子，第4个数字是列跨越几个格子， *//* 第1个数字是行的起始线，第2个数字是列的起始线，第3个数字是行的终止线，第4个数字是列的终止线， */第二种的写法比较灵活，假如后面想把aside的列放到右边，只需要改这块。/* 速写属性 grid-row和grid-column *//* 该写法表示跨越两个格子 */grid-template速写属性。/* 在父容器中定义 *//* 速写属性 */
2025-12-11 17:41:42
1039
原创 高阶函数之-数据分组的思考
那么这个函数在功能上是没有什么问题了，但是在使用上还不那么舒服，我们希望他支持两种方式来传递，第一种按照属性名来分组，第二种按照函数来，那么这个参数就出现了两种情况，那么就需要用到参数归一化了。但有一天可能按照性别分组，你不得不重新写一下代码，改成下面这样。此时，我们应该想到应该写一个通用的分组函数来完成分组操作。非原创，来自渡一袁老师，简单记录，每日分享。看一个例子，刚开始，你可能会这样写。
2025-12-11 09:23:24
332
原创 高阶函数的应用-分时函数的封装
第三个问题，考虑浏览器的兼容问题，如果没有requestIdleCallback这个函数的话，怎么整呢，那么需要考虑两个点，就是1.如何分割执行块，2.还有执行时间吗？这里其实就差不多了，为了更加灵活，如果说不传递chunkSplitor这个函数的话，默认就调用requestIdleCallback这个函数。至此，功能已经实现，但是还可以优化一下，目的是为了使该函数更加的通用,然后代码就改造成如下。场景是，页面有一个按钮，点击按钮会创建100万个div，然后会造成页面卡顿。接下来继续思考这个函数。
2025-12-09 15:34:13
169
原创 ts中的协变与逆变(类型安全)
3.下面这个就是逆变，说的就是在函数中这种小类型给大类型的情况。非原创，来源于渡一袁老师ts课程，简单记录下。2.这样小类型赋值给大类型是安全的，就可以。1.这样大类型赋值给小类型是不安全的，4.如果换成下面这样就可以了。
2025-11-27 10:41:23
214
原创 对防抖函数做类型标注
3.由于防抖函数dhandler没有返回类型，我们需要把这个返回类型给干掉，由于传递的函数有返回类型，他也就有了返回类型了，所以需要去掉防抖函数的返回类型，接下来你可能会这样写。非原创，来源渡一袁老师ts讲解，简单记录下。2.然后使用范型，写成这样。1.一开始你可能会这么写。
2025-11-27 09:18:55
159
原创 ts中的递归类型推断
3.第3步，确定返回值类型，此时又分为3种情况，一种是函数没有传参数，那么就是返回该函数的返回值，第二种情况是只传递一个参数，那么也是返回该函数的返回值，第三种情况是如果传递多个参数，返回一个新的函数，1.给柯里化函数添加类型标注。刚开始你可能会这样写。
2025-11-24 13:31:59
282
原创 使用infer封装通用类型工具
2.自己写一个ReturnType函数函数,引出infer。非原创，来源于渡一袁老师课程，简单记录下。1.ReturnType函数。
2025-11-21 12:28:36
207
原创 ts从字段到函数推导
3.，如果后期又加了sex属性，那就应该动态获取字段，而不应该是使用模版字符串写死。内容来自渡一袁老师的课程，非原创，记录下。5.但是，还有一种情况就是。6.需要处理一下这块。
2025-11-20 15:32:02
312
原创 element的table 表格 expand-change事件遇到的bug，记录下
下面图片中框住的部分很重要，这个就是造成第一次点击展开，其实已经发送请求，但子table并未展开，需要再点一次才能出来，这块，我猜想是因为最外层的表格数据是响应式数据，传递的参数row也是响应式的，因此改了row.isExpand，造成了页面刷新，所以第一次点击没有展开，第二次才展开，图中圈中的部分，把row的响应式数据变成非响应式数据就可以了，点击展开立即就可以展开子table。首先获取table表格数据时，添加了一项，用来表示行的展开与折叠。
2023-11-21 18:30:17
2338
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人