前端路线 - 随笔分类 - pleaseAnswer

编程技巧

摘要：一接口和面向接口编程 1 用ts编写基于 interface 的命令模式编写用户界面程序，页面有成百上千个子菜单约定基于命令模式编写负责子菜单的同事完成编程之后会将子菜单封装成一个命令对象，将其交给编写菜单集合界面的同事约定：调用子菜单的 execute 方法时会执行对应子菜单的命令 c 阅读全文

posted @ 2023-05-09 10:54 pleaseAnswer 阅读(30) 评论(0) 推荐(0)

设计原则

摘要：一单一职责原则职责：引起变化的原因 SRP原则：一个对象(方法)只做一件事 SRP原则的应用难点就是如何去分离职责 1 何时应该分离职责并不是所有职责都应该一一分离如果随着需求变化，职责总是同时变化的就不必分离创建xhr对象 & 发送xhr请求职责的变化轴线仅当他们确定会发生变化时才有阅读全文

posted @ 2023-05-09 10:53 pleaseAnswer 阅读(58) 评论(0) 推荐(0)

14_适配器模式

摘要：1 简介作用：解决两个软件实体间的接口不兼容的问题现实中的适配器港式插头转换器电源适配器 USB 转接口 2 应用亡羊补牢渲染广东省地图从第三方资源里获得了广东省的所有城市以及它们所对应的 ID，并且成功地渲染到页面中 let guangdongCity = [ { name: 'sh 阅读全文

posted @ 2023-05-09 10:53 pleaseAnswer 阅读(23) 评论(0) 推荐(0)

13_状态模式

摘要：1 初识状态模式关键：区分事物内部的状态事物内部的状态改变往往会带来行为改变有一个电灯，电灯上面只有一个开关当电灯开着的时候，此时按下开关，电灯会切换到关闭状态再按一次开关，电灯又将被打开同一个开关按钮，在不同的状态下，表现出来的行为是不一样的 1.1 电灯程序 1. 定义Light类阅读全文

posted @ 2023-05-09 10:52 pleaseAnswer 阅读(55) 评论(0) 推荐(0)

12_装饰者模式

摘要：1 简介为对象动态增加职责：不改变对象自身的基础上，在程序运行期间给对象动态地添加职责 2 模拟传统面向对象语言的装饰者模式编写一个飞机大战的游戏，随着经验值的增加，操作的飞行对象可以升级成为更厉害的飞机 2.1 原始飞机类 class Plane { constructor() {} fire 阅读全文

posted @ 2023-05-09 10:52 pleaseAnswer 阅读(27) 评论(0) 推荐(0)

11_中介者模式

摘要：1 简介作用：解除对象与对象之间的紧耦合关系增加一个中介者对象后，所有的相关对象都通过中介者对象来通信，而不是互相引用，所以当一个对象发生改变时，只需要通知中介者对象即可。中介者使各对象之间耦合松散，而且可以独立地改变它们之间的交互。中介者模式使网状的多对多关系变成了相对简单的一对多关系。阅读全文

posted @ 2023-05-09 10:51 pleaseAnswer 阅读(41) 评论(0) 推荐(0)

10_职责链模式

摘要：1 现实中的职责链模式中学时代的期末考试，如果你平时不太老实，考试时就会被安排在第一个位置。遇到不会答的题目，就把题目编号写在小纸条上往后传递，坐在后面的同学如果也不会答，他就会把这张小纸条继续递给他后面的人。优点：请求发送者只需要知道链中的第一个节点，从而弱化了发送者和一组接收者之间的强联系阅读全文

posted @ 2023-05-09 10:51 pleaseAnswer 阅读(35) 评论(0) 推荐(0)

9_享元模式

摘要：1 初识享元模式用于性能优化的模式运用共享技术来有效支持大量细粒度的对象获取内衣广告图片内衣工厂，目前的产品有50种男士内衣和50种女士内衣，各有50个模特做展示拍照片 class Modal { constructor(sex, underwear) { this.sex = sex th 阅读全文

posted @ 2023-05-09 10:51 pleaseAnswer 阅读(18) 评论(0) 推荐(0)

8_模板方法模式

摘要：1 模板方法模式的定义和组成 1.1 定义：基于继承的设计模式 1.2 组成 1. 抽象父类封装了子类的算法框架公共方法封装子类中所有方法的执行顺序 2. 具体的实现子类 2 第一个例子 -- Coffee or Tea 2.1 先泡一杯咖啡 class Coffee { construct 阅读全文

posted @ 2023-05-09 10:50 pleaseAnswer 阅读(94) 评论(0) 推荐(0)

7_组合模式

摘要：1 简介用小的子对象来构建更大的对象，而这些小的子对象本身也许是由更小的“孙对象”构成的回顾宏命令 marcoCommand 被称为组合对象 closeDoorCommand、openPcCommand、openQQCommand 都是叶对象 marcoCommand 的 execute 并不执阅读全文

posted @ 2023-05-09 10:50 pleaseAnswer 阅读(145) 评论(0) 推荐(0)

6_命令模式

摘要：1 命令模式的用途应用场景: 有时需要向某些对象发送请求, 但是并不知道请求的接收者是谁, 也不知道被请求的操作是什么此时希望用一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此之间的耦合关系订餐命令模式将客人订餐的请求（订单）封装成 command 对象订单从服务员手中传阅读全文

posted @ 2023-05-09 10:49 pleaseAnswer 阅读(191) 评论(0) 推荐(0)

5_发布订阅模式

摘要：1 简介作为一种优秀的设计模式，发布订阅者模式被广泛应用在前端领域 eg: 在 vue 的源码中，为了让数据劫持和视图驱动解耦就是通过架设一层消息管理层实现的，而这一层消息管理层实现的原理就是发布订阅模式现在举个现实中的例子来感受一下：你看上了一套房，到了售楼处被告知该楼盘的房子早已售罄。然后阅读全文

posted @ 2023-05-09 10:49 pleaseAnswer 阅读(25) 评论(0) 推荐(0)

4_迭代器模式

摘要：1 简介提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示 jQuery 中的迭代器 $.each([1, 2, 3], (i, n) => { console.log('当前下标：' + i) console.log('当前值：' + n) }) 2 实现自己的迭代器阅读全文

posted @ 2023-05-09 10:49 pleaseAnswer 阅读(40) 评论(0) 推荐(0)

3_代理模式

摘要：1 简介为一个对象提供一个代用品或占位符，以便控制对它的访问应用：明星都有经纪人作为代理关键：当客户不方便直接访问一个对象或不满足需求时，提供一个替身对象来控制对这个对象的访问，实际上访问的是替身对象 2 例子 -- 小明追mm的故事 1. 不使用代理 class Flower {} let 阅读全文

posted @ 2023-05-09 10:48 pleaseAnswer 阅读(32) 评论(0) 推荐(0)

2_策略模式

摘要：1 简介定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换 2 使用策略模式计算奖金以年终奖的计算为例公司的年终奖是根据员工的工资基数和年底绩效情况来发放的。你负责编写代码来给财务计算员工的年终奖 1. 代码实现 /** * caculateBonus 计算每个人的奖金数额 * @ 阅读全文

posted @ 2023-05-09 10:47 pleaseAnswer 阅读(32) 评论(0) 推荐(0)

1_单例模式

摘要：1 简介保证一个类仅有一个实例，并提供一个访问它的全局访问点线程池、全局缓存、浏览器中的window对象 2 实现单例模式思路：用一个变量来标志当前是否已为某个类创建过对象，是则在下一次获取该类的实例时直接返回之前创建的对象 function Singleton(name) { this.na 阅读全文

posted @ 2023-05-09 10:47 pleaseAnswer 阅读(44) 评论(0) 推荐(0)

5-5 命令行交互原理

摘要：1 学习路径掌握 readline -- 输入流 events -- 实现 nodejs 事件流 stream -- 输入输出流 ansi-escapes -- 实现命令行的特殊显示 rxjs -- 响应式模型库掌握命令行交互的实现原理，并实现一个可交互的列表分析 inquirer 源码掌握其阅读全文

posted @ 2022-12-30 11:38 pleaseAnswer 阅读(152) 评论(0) 推荐(0)

5-4 项目创建 + 模板下载

摘要：1 脚手架初始化项目模板开发 1.1 手动创建项目模板 mkdir zmoon-cli-dev-template cd ./zmoon-cli-dev-template npm init -y mkdir zmoon-cli-dev-template-vue3 cd ./zmoon-cli-dev- 阅读全文

posted @ 2022-12-30 11:33 pleaseAnswer 阅读(43) 评论(0) 推荐(0)

5-3 掌握 egg.js + 云 mongodb

摘要：1 egg.js 1.1 初始化初始化和项目启动方法 # 初始化 $ mkdir egg-example && cd egg-example $ npm init egg --type=simple # 实际上执行的是 npm i create-egg $ npm i # 项目启动 $ npm r 阅读全文

posted @ 2022-12-30 11:32 pleaseAnswer 阅读(81) 评论(0) 推荐(0)

5-2 项目创建前准备阶段

摘要：1 项目创建前准备阶段 exec() { try { // 1. 准备阶段 this.prepare() // 2. 下载模板 // 3. 安装模板 } catch(e) { log.error(e.message) } } prepare() { // 1. 判断当前目录是否为空 // 1.1 询阅读全文

posted @ 2022-12-30 11:21 pleaseAnswer 阅读(48) 评论(0) 推荐(0)

随笔分类 - 前端路线