- 博客(55)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 JavaScript 设计模式之访问者模式
访问者模式解决数据与数据的操作方法之间的耦合，将数据的操作方法独立于数据，使其可以自由化演变。而在中介者模式模式中的订阅者是双向的，订阅者是单向的，只能是消息的订者。而消息统一由中介者对象发布，所有的订阅者对象间接地被中介者管理。与外观模式的封装特性相比，中介模式对多个对象交互地封装，且这些对象一般处于同一层面上，并且封装的交互在中介者内部，而外观模式封装的目的是为了提供更简单的易用接口，而不会添加其他功能。通过中介者对象封装一系列对象之间的交互，使对象之间不再相互引用，降低他们之间的耦合。
2024-03-11 22:38:47
526
原创 JavaScript 设计模式之职责链模式
职责链模式定义了请求的传递方向通过多个对象对请求的传递，实现一个复杂的逻辑操作。因此职责链模式将负责的需求颗粒化逐一实现每个对象分内的需求，并将请求顺序地传递。对于职责链上的每一个对象来说，它都可能是请求的发起者也可能是请求的接收者。通过这样的方式原请求的发起者与原请求的接收者之间的耦合。命令模式我们不再需要关注每一个命令内部的实现，使用起来简洁明了，在许多的框架中也都有用到。
2024-03-02 23:20:49
546
原创 JavaScript 设计模式之策略模式
策略模式最主要的特色是创建一系列策略算法，每组算法处理的业务都是相同的，只是处理的过程或者处理的结果不一样，它们又是可以相互替换的，这样就解决了算法与使用者组算法相互之间的独立性，该模式更方便于对每组算法之间的耦合。第一，策略模式封装了一组代码簇，并且封装的代对于策略模式的优点可以归纳为码相互之间独立，便于对算法的重复用，提高了算法的复用率。
2024-02-23 10:53:12
615
原创 JavaScript 设计模式之状态模式
/ 比如有一种状态console.log('状态A')},console.log('状态B')},console.log('状态C')},console.log('执行了一次操作')return {状态A、B、C 是不同的状态，可能会有多种状态同时出现的情况，我们可以这样使用状态模式既是解决程序中臃肿的分支判断语句问题，将每个分支转化为一种状态独立出来,方便每种状态的管理又不至于每次执行时遍历所有分支。
2024-02-22 16:50:48
638
原创 JavaScript 设计模式之观察者模式
解耦两个相互依赖的对象，使其侧重依赖于观察者的消息机制。这样对于任意一个订阅者对象来说，其他订阅者对象的改变不会影响到自身。对于每一个订阅者来说，其自与既可以是消息的发出者也可以是消息的执行者，这都依赖于调用观察者对象的三种方法(订消息，注销消息，发布消息)中的哪一种。观察者模式又被称为发布-订阅模式，使用一个对象来收集订阅者，在发布时遍历所有订阅者，然后将信息传递给订阅者，可以这样来实现一个简单的模式。通过观察者模式可以团队开发中模块间通讯问题。假使有一个学生跟老师的互动。
2024-02-22 10:06:49
867
原创 JavaScript 设计模式之享元模式
将一部分共用的方法提取出来作为公用的模块享元模式的应用目的是为了提高程序的执行效率与系统的性能。因此在大型系统开发中应用是比较广泛的，有时可以发生质的改变。它可以避免程序中的数据重复。有时系统内存在大量对象，会造成大量存占用，所以应用享元模式来减少内存消耗是很有必要的。假使我们有如下的样式创建一个弹窗的基类基类主要用来实现一些常规的样式布局确认按钮位置在左/右使用效果模板方法的核心在于对方法的重用,它将核心方法封装在基类中,让子类继承基类的方法,实现基类方
2024-02-21 11:48:04
708
原创 JavaScript 设计模式之组合模式
throw new Error('必须重写该方法')},throw new Error('必须重写该方法')},throw new Error('必须重写该方法')},throw new Error('必须重写该方法')接下来创建一个容器注意，这里的 show 方法就是用来将所有的 dom 追加到页面上下面创建一系列的 form 相关 item 及一些dom// 这里不需要添加，因为label后面直接跟输入框// 这里不需要添加，因为输入框后面直接跟标签。
2024-02-20 16:40:50
601
原创 JavaScript 设计模式之桥接模式
这里我们不难看出有部分代码是重复的，只是改变了字体颜色跟背景色，这耦合度就高起来了，我们可以是这样。通过桥接模式，我们可以将业务逻辑与元素的事件解耦，也可以更灵活的创建一些对象。通过桥接灵活的创建一个对象，针对不同的对象处理不同的业务逻辑，更灵活处理差异。在使用不同角色有相同公用的方法时可以使用这种多元化来处理。
2024-02-14 18:00:52
1088
原创 JavaScript 设计模式之代理模式
我们日常在使用数据请求时，也会用到一些代理的方式，比如在请求不同的域名，端口等会出现跨域的情况，这时就需要用到代理去获取对应的数据了，日常可能会用到 nginx 代理来获取，或者是 jsonp 的方式来获取。通常我们在团队中使用一些公用方法时会遇到这种情况，在不改变他人代码的情况下如何通用他人的代码呢，这就需要使用到我们常用到的装饰器模式了，他便能很好的解决这种问题。这种模式还是很好理解的，上面我们使用箭头函数，为了避免 this 指向问题，其实在团队协作中使用还是挺多的。
2024-02-14 17:14:30
909
原创 JavaScript 设计模式之外观模式
我们为啥要使用外观模式呢，其实我们在使用各种 js 库的时候常常会看到很多的外观者模式，也正是这些库的大量使用，所以使得兼容性更广泛，通过外观者模式来封装多个功能，简化底层操作方法。使用一个对象来接受一些多个参数，使用时进行结构等方式读取数据，这样就避免了多个参数导致数据传递错误问题了，其实在很多的框架中也常常看到这种，比如 Vue 中。这种例子也是非常的多，这样的好处就是方便后期扩展，对于后期堆加参数更有利。在我们写方法时，通常会传递参数的形式来传递数据。但是我们更应该这样来写。比如 jQuery 中。
2024-02-09 11:07:39
985
原创 JavaScript 设计模式之单例模式
单例模式我们在日常使用中还是非常多的，比如常见的 jQuery，prototype，vue等都是属于单例模式，我们在使用 new Vue 的时候，返回的也会是同一个实例的，简单实现。这里我们只能使用 Car 中的 opt 定义的一些属性，这里我们定义了方法 set 来写操作，若不定义 set 就是我们说的静态了，只能读取了。所谓单例，就是在一个文件或是一个系统中只能存在一个实例或是一个对象，尽可能的将各个模块的代码梳理得井井有条，更为规范。我们在使用时，尽可能的将模块分明开来。
2024-02-07 21:27:33
1196
原创 JavaScript 设计模式之原型模式
上面的 Car 我们在使用每次使用的时候，其公用方法都会实例化一次，我们将一些耗资源的一些方法应该放置到 Car 的原型上。比如我们修改了基类 Car 的原型，所有的子类都会受到影响，所以在使用这种方式的时候是需要注意到这点。所谓原型，一般就类似将数据放置到原型上，通过原型继承模式来实现一个基类，然后用子类继承方式来实现。这里我们是用的基类原型，那就是说我们在用到的基类原型对于其子类都是共享的数据，比如。Car 将一些公用的属性或方法抽离出来，用 call 的方式进行调用。
2024-02-05 11:43:46
997
原创 javascript设计模式之建造者
由此可以看出在构建者中，创建者不单单是在乎结果，更关注过程，构建的对象来说更为复杂，其实终究还是通过 Switch 来区分不同的工作种类，对于不同的职位进行不同的操作。不过针对工厂模式来说，构建者的确更明确一些。这里我们创建一个基类，其拥有技能跟爱好两个属性，还有两个实例方法用来获取技能跟爱好。工厂模式不关心过程，只关心结果，这与建造者相反，建造者更关心的是过程，接下来创建一个姓名类及工作类。
2024-02-03 18:30:31
602
原创 javascript 设计模式之简单工厂模式
抽象，也就是子类必须要重写父类中的方法才能调用，而不能直接调用父类中的抽象方法，这里面我们在定义工厂基类时使用寄生方式。对于有许多的不同功能的方法时，又想将其变得共用，这时候简单工厂模式就发挥了重大作用。这时，我们可以这样来改造下这个方法，使其变得安全。实际上只是将安全模式给添加到工厂模式中而已。首先，我们需要保证一个函数的安全，比如。
2024-01-29 17:43:01
658
原创 JavaScript 继承之多继承、多态
在 JavaScript 中的继承方式有很多种，比如 原型链继承，组合式继承，但其所有的继承都逃脱不了的是 prototype 来实现的很多继承往往都只能继承一个，继承多个的情况呢？所谓的多态也就是同一个方法中对不同的参数分别处理不同的逻辑，也是面向对象中最重要的一部分。JavaScript 中可以这样来处理。需要注意：这种多继承方式会导致后面的对象会将前面的对象相同的属性给重新赋值导致错误。也可以直接挂载在 Object 的原型上，则可以直接这样来写。就是将一个对象浅复制到另一个目标对象中。
2024-01-29 14:51:01
614
原创 JavaScript 函数，面向对象？
这样，我们使用一个对象来存储校验的一些方法，使用 checkForm.checkName() 就行，可以作为一个通用的方法（公共方法）,不单单是登录，任何需要用到校验的地方都可以引入使用，但是又有问题，若当前不满足时，动态的添加一个 checkForm.checkPhone = function () { // todo: } 这样会影响到全局，因为是同一个对象来的🤣 下面这种方式也同样会面临这种问题。这样写，当然，功能是实现了，但是这样不外乎会在内存中多开辟了不必要的空间，我们实际上可以这样来写。
2024-01-26 17:37:39
403
原创 js 常见的隐式转换
这里是有前提条件的,一般来说,对于复杂数据类型,如 Array,Object,Function,Date 等在进行数据隐式转换的时候,会优先调用 valueOf 方法,当其 valueOf 方法依旧返回 一个复杂类型 时,又会去调用 toString 方法,若 toString 方法依旧返回复杂类型,那就会转换失败,会抛出一个类似转换失败的错误 `TypeError: Cannot convert object to primitive value`测试他们转换为 number 的耗时。
2023-04-24 14:14:19
126
原创 如何实现调用对象中的a,b,c都返回同样的值
有时候我们会遇到在取值的时候需要进行一个拦截处理，js 中怎么处理呢。还有可以通过 es6 Proxy 代理来处理。
2023-04-23 17:32:58
113
原创 实现链式调用
在 JavaScript 中实现链式调用,其实主要的就是在一个方法中需要返回当前方法的调用者，这样就能实现链式调用了。我们都知道使用 jQuery 都知道可以使用链式调用,如。
2023-04-23 17:30:35
127
原创 使用 javascript 来实现私有属性
一般我们提到私有属性会想到什么, 一般是编译型语言,js 中的 typescript。那若是要在 JavaScript 中要怎么体现私有属性的功能呢。一般 typescript 中我们可以这样写。
2023-04-23 16:56:00
232
原创 javascript数据结构之集合
一般来说，集合我们常常在js中称之为数组，ES6中的是 Set，实现一个常用的 Set一、首先定义一个 变量来存储数据集合class Set { // 首先定义一个集合来存放对应的数据 constructor() { this.items = {} }}接下来是实现对应的方法add 添加数据方法/** * 存入数据 * @param {*} value 待存入的数据 * @returns boolean */add(value) { if (th
2022-05-22 17:50:18
897
原创 javascript 数据结构之双向链表
与之前链表结构类似，不过之前单向链表相比之下双向会多一个引用指针，分别来指向前一个跟后一个对象我们用一个 pre 跟 next 来记录1、首先还是创建一个 Nodeclass Node { constructor(node) { this.node = node; this.prev = null; this.next = null; }}其次创建双向链表方法class DoublyLinked { __head = null __tail
2022-04-18 08:36:09
157
原创 css 中使用 object-fit 来对图片做处理
object-fit：图片显示方式/* 关键属性 */object-fit: fill;object-fit: contain;object-fit: cover;object-fit: none;object-fit: scale-down;/* 全局属性 */object-fit: inherit;object-fit: initial;object-fit: unset;fill被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的
2022-04-12 08:42:14
598
原创 将传入数值转成00:00的形式
前面在通过时间把秒转换为分钟的过程中用到的，代码如下： formatTime(time){ if (isNaN(time)) return false; let rd = Math.round; let _arr = []; let val = Number(rd(time) / 60).toFixed(2).toString().split('.'); let f = val[0]; let m = rd(val[1] * 0.6); _ar
2022-04-08 08:16:00
184
原创 JavaScript数据结构之链表
JavaScript链表结构的实现简述简单实现常用链表方法node 节点链表 Linked 实现append 方法实现insert 方法实现get方法实现indexOf 方法实现功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入简述
2022-04-05 10:58:17
957
原创 javascript 数据结构之队列
所谓队列 ，他的特点是 FIFO 就像是在排队一样，排在最前面的，会优先处理完，优先出队，所以就是一个先进先出的一个特点，JavaScript通过数组来实现这里套用之前栈的部分相关方法 同是借助数组来实现commo.js /** * 检查栈是否为空 * @returns boolean */ isEmpty() { return this.__items.length === 0 } /** * 返回栈大小 * @returns number
2022-03-27 09:47:53
696
原创 javascript 栈结构
栈，FIAO 机构，先进后出的一种数据结构，在 js 世界中，我们也可以用来表示，在 js 数组中，在尾部添加删除操作性能较好，操作非尾部元素，性能较差定义栈export default class Stack extends StackOrQueueBase { __items = [] /** * 入栈 * @param {*} el 元素 */ push(el) { this.__items.push(el) } /** * 出栈
2022-03-25 08:29:07
787
原创 typescript apply 调用问题及强转换类型
interface Cat { name: string}const bobCat: Cat = { name: 'Bob'}function printCat(cat: Cat) { console.log(cat.name);}printCat.apply(bobCat)这样直接通过 apply 调用 // 使用这种方式可以 在调用的时候使用 apply function printCat(this: Cat) { console.log(...
2022-03-19 09:55:45
927
原创 typescript 函数类型为空检查
type NonNull = string | number | null | undefined// 使用关键字 NonNullable 来将类型包含起来，就能有效的将 type 类型中的 null 跟 undefined 剔除function showType(args: NonNullable<NonNull>) { console.log(args);}此时调用函数时，参数类型提示只能是 string | number 类型// 定义类型 K 是 T 中的属..
2022-03-19 08:22:08
1939
原创 记一次配置服务器问题及部署 ssl 证书问题
在本地环境中没有任何问题，但是把同样的apache文件及php文件复制到服务器上去的时候，问题就出来了，这不，PHP Warning: PHP Startup: Unable to load dynamic library 'openssl'，在启动apache服务时就报无法加载这个module，网上百度，谷歌了好多，都说的是需要依赖文件，libeay32.dll 跟ssleay32.dll 文件复制到c:/window/system32 下面，恩，不错，这样是对的，但是说的是php版本中会自带这两个文件？
2022-03-18 08:47:07
304
原创 typescript 高级类型
常用的 ts 中定义类型我们一般会使用到 type 或者是 interfacetype 中可以定义联合类型，如type A = { name:string; age:number}type B = { id:number; sex:string;}// 这就是联合类型type C = A & B// 这里在定义 user 的类型是 C 时就必须要实现 name、age、id、sex 属性const user:C = {}..
2022-03-17 12:31:56
625
原创 js 常用继承
在我们前端来说不应该出现继承，继承一般只是针对后端语言，如java，c++来说，主要是类的继承，正所谓的多态，前端却没有了类的概念，何谈继承？（es5）前面我们讲到继承，要知道JavaScript的强大，没有什么是做不到的，虽然没有后端语言的那么强大，但是该有的东西都还是有的。话不多说，上代码。第一种方式，call借用function A(){ this.name = 'jack';}function B(){ this.age = 23; A.call(this);//这里运用ca
2022-03-16 08:01:14
1408
原创 typeof 对象类型检验
在日常写函数的时候，我们常常会写到函数，像这样const result1 = { a: 3, hello :'world'}// 这里屋发断定 o 中是否一定有 name 属性function get(o: object, name: string) { return o['name']}get(result1, 'xx')在 ts 中编辑器将会报 这样的错误可以将通过// 通过泛型及 keyof 的方式来约束 泛型 K 一定是属于 泛型 T 的属性funct
2022-03-15 08:40:26
143
原创 js检查number是整型还是浮点
在js中，对于一个弱语言来说，那是相当弱的，对于数据类型来说并没有分的那么的仔细，比如我们判断一个数据是否是数字，我们通常使用isNaN来判断，但是，在服务端来说的话通常我们对于数字来说还有整型跟浮点型，浮点型还分单精度跟双精度，总之就是比较复杂的，那我们在js端语言如何去判断数字是整型还是浮点型呢。function isInt(num) { return typeof num === 'number' && num % 1 === 0;}不错，首先我们通过i..
2022-03-15 08:21:32
987
原创 typescript 装饰器
ts 中装饰器用于在构造函数参数或是方法中使用 @ 表示// 这里用到 reflect-metadata 反射import "reflect-metadata"// 定义装饰器 接收一个参数 function inject(serviceIdentifier: string) { return function (target: Object, targetKey: string, index: number) { // 反射定义数据元 Reflect.defineMeta
2022-03-14 21:55:50
815
原创 typescript Interface 接口
interface 与 type 有什么区别呢/** * 1.interface 和 type 区别 * 相同点： * 1-1. 都可以描述一个对象或者函数 * 1-2. 都允许进行扩展 * 不同点： * 2-1. type 声明基本类型别名、联合类型、元组等 * 2-2. typeof 获取实例对象 * 2-3. interface 可以合并 *//** * 1. 有关后台接口的，愿意使用interface * 2. 第三方的和开发的sdk 如 vue * 3. 前端的库
2022-03-14 09:40:32
78
原创 抽象类 - abstract
// 抽象类/** * 1. 抽象类可以具体实现，也可以定义抽象方法 * 2.方法修饰符 * public 共有的 任何地方都可以访问到 * private 私有的 不能在类的外部使用，只能在内部使用 * protected 受保护的 子类中可以使用 */abstract class Animate { abstract makeSound(): void; protected move(): void { console.log('动物移动了'); }}// .
2022-03-13 23:16:27
381
原创 解读字符串replace
简单的replace，一个小小的replace，其实用处还大着哩，首先想着的便是替换了，的确，这方法的主要用途就是替换str.replace(regexp|substr, val|function) val:这里的val可以是一个字符串，也可以是一个回调函数（当是回调函数的时候我们就可以用它来做更多的事了） 该方法会返回操作后的值，但并不会修改原有的字符串原字符串不会改变 我们在使用replace的时候使用正则reg来匹配替换的时候，我们可以使用/...
2022-03-13 08:07:56
884
原创 karma-jasmine单元测试相关函数及其用法介绍
(1)细则套件SuitesSuite表示一个测试集，以函数describe(string, function)封装。describe函数是Jasmine套件定义的一个全局函数，所以可以在测试中直接调用。describe()函数带有两个参数，一个字符串，一个函数。字符串是待建立的细则（spec）套件名称或者描述，函数封装了测试套件。可以嵌套这些describe()函数，这样我们可以创建一个测试树来执行那些在测试中设置的不同条件。如：describe('Unit test: MainControlle.
2022-03-12 09:39:55
520
自考英语单词4500个
2024-02-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人