- 博客(11)
- 收藏
- 关注
RSS订阅原创 JS设计模式之桥接模式
接下来就直接上案例举例，设计模式的初衷就是为了能够用这种设计思想在不同的场景中可以优化代码，增加可读性和可维护性正常我们开发的项目中使用Element-UI等框架的时候都会使用像模态框，滑动框，消息显示框等等，而这些组件，如果我们需要给他们进入项目添加一些动画，例如，弹跳，滑动，旋转，等等，就需要拿到该dom节点然后一个一个的写，这样的话代码量很大的时候，或者后期需要再次添加其他的框，需要添加其他的动画的时候，就很麻烦，这时我们就可以使用桥接模式，来做一个代码的封装。
2024-05-08 11:24:24
318
原创 JS设计模式之模块模式
定义：模块模式最初被定义为在传统软件工程中为类提供私有和公共封装的一种方法，能够使一个单独的对象拥有公共/私有的方法和变量,从而屏蔽来自全局作用域的特殊部分.这可以减少我们的函数名与在页面中其他脚本区域内定义的函数名冲突的可能性。在JS中，ES6规则没出来之前，模块化大多是使用函数闭包和第三方规则的形式来写的，例如COMMON.JS,ES6出来后，官方规则就规定了，导出和导入。因为是闭包的形式，所以此时count不会被js的垃圾回收机制所回收，这样obj这个对象就有了自己的私有属性和公有方法。
2024-05-07 14:06:01
167
原创 JS设计模式之观察者模式（发布订阅者模式）
首先还是先写一个中心调度器大对象，里面包含了，发布消息方法，添加观察者方法和取消观察者方法，其实也叫做添加订阅者方法和取消订阅方法，先说publish方法，我们把事件类型和数据传入到里面，该方法首先就会判断，观察者，也就是订阅者容器里面有没有方法，如果没有的话就直接返回，如果有的话就会使用foreach进行遍历，并且触发执行该订阅者里面的所有方法。是“false”就表示用户需要取消的订阅者内部没有订阅者方法，此时就什么都不做，因为订阅者方法为空，也取消不了。
2024-05-04 14:35:03
1283
原创 JS设计模式之观察者模式
根据代码我们可以看到，首先创建了一个观察目标主体对象（Subject），并且创建了两个观察者，分别是observe1和observer2，并且把观察者添加到我们的主体对象中，此时去获取ul下的所有li节点，并循环，当我们点击其中一个节点（例如首页）的时候就会触发主体对象的通知更新方法，然后触发观察者类中的update方法，并且通过传入的data，也就是我们li标签里的内容，赋值给这两个观察者元素文本，就可以让数据层发生改变同时重新渲染了视图层。一旦观察目标的状态发生改变，所有的观察者都将得到通知。
2024-05-04 13:37:20
507
原创 JS设计模式之单例模式
很多初学者，在对JS不熟悉的时候，使用函数，可能总是会忘记使用new关键字，直接就Singleton（），但是实际用法其实是new Singleton（）,这两者是有区别的，使用了new关键字就会创建出一个对象，而不使用，相当于函数的调用，考虑到后续项目代码量很大并且开发者各不相同的情况下，我们就可以使用单例模式做一个保险，无论是使用Singleton（），还是new Singleton（），都可以产生同样的效果。，它确保一个类只有一个实例，并提供一个全局访问点来访问这个唯一实例。
2024-05-03 22:40:55
480
1
原创 JS设计模式之建造者模式
建造者模式关注的是我们建造的一个过程，和工厂模式的区别在于，工厂模式，我们关注的就是结果，不管东西怎么来的，而建造者模式，就是拆开看内部，是怎么构建出来的，上图中的navBar（导航栏），还有List，其实就是一个对象的部件，正常我们写导航栏的时候，一般会经过三个步骤：1.初始化dom，也就是初始化元素节点，2.从后端哪里使用axios获取导航栏的数据，3.将获取到的数据渲染到dom节点上，导航栏下边的列表，也就是list，需要经历的方法，也是这三个步骤。
2024-05-03 22:04:47
350
1
原创 JS设计模式之代理模式
Star这个类就是明星，StarProxy这个类就是明星经纪人，假如我们是商家，现在我们想请这个明星来参加我们的活动，我们开始和经纪人谈价格，talk出价1w，此时经纪人会做一个判断，如果价格大于等于1w，这个活动就比较适合，可以参加，代理就会去通知明星演出，如果小于1w的话，就不会，这个就是简单的代理模式，我们要访问明星，需要经过经纪人（也就是代理），才能去访问。其实就是给一个对象提供一个代理，如果要访问这个对象必须经过这个代理，先说，这个模式的优点是什么。
2024-05-03 21:38:04
1271
1
原创 JS设计模式之装饰器模式
在这个图片里面，ceshi函数this原本是指向window的，当我给他绑定到inp上的时候，function谁调用指向那个对象，此时ceshi输出的this就是input这个dom元素，同理，假如我有一个按钮，正常这个按钮的功能是当我点击他的时候，进行一个页面的跳转，但是现在我想给这个按钮加一个功能，就是让它跳转前，去上传一些数据。所以整体执行顺序为，在点击之前，我们使用装饰器模式给render添加了新功能，log，当我们点击按钮的时候，其实触发的函数，就是新的render.
2024-05-03 00:09:42
728
原创 JS设计模式之工厂模式与抽象工厂模式
在我们开发后台管理系统的时候，当用户登录成功时，后端就会返回给我们用户的权限编码，一般就是role，里面呢会告诉我们这个用户的权限编码，我们应该要针对不同用户的权限，去返回不同的按钮和展示不同的页面，可以看一下我图片里的注释，正常去写的话，就是定义一个函数接收到role之后去判定用户的权限接着获取动态路由的时候就能拿到此用户的权限所对应的路由。一个对象信息，姓名还有他所对应的权限，此时再根据对应的权限去渲染按钮和组件，就可以实现动态路由和权限按钮了。以上也是工厂模式与抽象工厂模式在前端开发中的应用与实现。
2024-04-15 15:40:57
221
1
原创 Electron-vite之主进程的初级封装
用vite去生成electron项目后，分为三个文件夹，main：主进程，preload：预加载，renderer：渲染进程，main下面只有一个ts文件为index.ts,包含了初级创建窗口，展示，还有环境检测等，如果electron中渲染进程与主进程进行通信：渲染进程里写：主进程接收：})
2024-04-07 10:45:33
339
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人