- 博客(45)
- 收藏
- 关注
RSS订阅原创 JavaScript中介者模式与开发实践（下）
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解中介者模式，希望能够让你对设计模式更一步的学习。本章学习内容👇实现中介者模式优缺点通过以上代码，我们就完成了一个中介者模式的实现。可以看到即使我们再次增加另外一个公司的职员，这对其他公司的职员也是不受影响的。这也就是中介者模式降低各个对象的耦合性，使系统易于维护与扩展。那么中介者模式的缺点呢？试想，如果中介者跑路了或者生病了，那么这种模式还能运行吗？
2023-01-11 16:39:39
146
原创 JavaScript中介者模式与开发实践（上）
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解职责链模式，希望能够让你对设计模式更一步的学习。本章学习内容👇灵活可拆分的职责链模式。
2023-01-11 16:39:04
369
原创 JavaScript职责链模式与开发实践（下）
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解职责链模式，希望能够让你对设计模式更一步的学习。本章学习内容👇灵活可拆分的职责链模式。
2023-01-11 16:38:18
373
原创 JavaScript职责链模式与开发实践（中）
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解职责链模式，希望能够让你对设计模式更一步的学习。本章学习内容👇开发一个实际的职责链模式。
2023-01-11 16:37:37
207
原创 JavaScript职责链模式与开发实践（上）
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解职责链模式，希望能够让你对设计模式更一步的学习。本章学习内容👇认识职责链模式。
2023-01-11 16:37:03
151
原创 JavaScript享元模式与开发实践（下）
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解享元模式，希望能够让你对设计模式更一步的学习。本章学习内容👇享元模式通用结构。
2023-01-11 16:36:26
352
原创 JavaScript享元模式与开发实践（中）
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解享元模式，希望能够让你对设计模式更一步的学习。本章学习内容👇内部状态与外部状态使用享元模式的关键就在于，如何区分内部状态和外部状态。
2023-01-11 16:35:52
300
原创 JavaScript享元模式与开发实践（上）
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解享元模式，希望能够让你对设计模式更一步的学习。本章学习内容👇认识享元模式。
2023-01-11 16:35:05
302
原创 JavaScript发布-订阅模式与开发实践（下）
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解发布—订阅模式，希望能够让你对设计模式更一步的学习。本章学习内容👇完成一个完整的发布—订阅模式总结发布—订阅模式在这个章节中，我们逐步的学习了**发布—订阅模式**，并完成了从零的开发实践。发布—订阅模式的优点相比大家都清楚了，那么缺点呢？试想，我们放在回调池里的函数是不是会一直存在于我们的内存当中？即使，它从未触发。并且，我们实现注入依赖这一步骤时也会消耗一定的时间和内存。
2023-01-11 16:34:28
115
原创 JavaScript发布-订阅模式与开发实践（中）
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解发布-订阅模式，希望能够让你对设计模式更一步的学习。本章学习内容👇发布-订阅模式在前端的运用除了**DOM事件**外，我们还经常会实现一些自定义的事件。什么是自定义事件呢？简单来说就是对象之间的关联，一个对象监听另外一个对象的属性，围绕属性变化展开发布—订阅。这种实现非常常见，比如说Vue中的响应式原理就是基于依赖注入实现的。Vue2响应式原理以及实现》
2023-01-10 18:20:55
287
原创 JavaScript发布-订阅模式与开发实践（上）
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解发布-订阅模式，希望能够让你对设计模式更一步的学习。本章学习内容👇认识发布-订阅模式发布-订阅模式的优点。
2023-01-10 18:19:54
287
原创 JavaScript迭代器模式与开发实践（下）
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解迭代器模式，希望能够让你对设计模式更一步的学习。本章学习内容👇迭代类数组对象实现倒序迭代器实现中止迭代器。
2023-01-10 11:52:14
205
原创 JavaScript迭代器模式与开发实践（中）
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解迭代器模式，希望能够让你对设计模式更一步的学习。本章学习内容👇内部迭代器外部迭代器。
2023-01-10 11:51:42
335
原创 JavaScript迭代器模式与开发实践（上）
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解迭代器模式，希望能够让你对设计模式更一步的学习。本章学习内容👇认识迭代器模式完成一个迭代器模式。
2023-01-10 11:51:08
792
原创 JavaScript代理模式与开发实践（下）
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解代理模式，希望能够让你对设计模式更一步的学习。本章学习内容👇通过虚拟代理实现图片预加载代理的意义。
2023-01-10 11:49:43
213
原创 JavaScript代理模式与开发实践（中）
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解代理模式，希望能够让你对设计模式更一步的学习。本章学习内容👇认识保护代理和虚拟代理。
2023-01-10 11:49:09
225
原创 JavaScript代理模式与开发实践（上）
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解代理模式，希望能够让你对设计模式更一步的学习。本章学习内容👇认识代理模式完成一个代理模式。
2023-01-10 11:48:36
180
原创 JavaScript单例模式与开发实践(二)
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解单例模式，希望能够让你对设计模式更一步的学习。本章学习内容👇完成一个透明的单例模式用代理的方式实现单例模式。
2023-01-10 11:47:55
241
原创 JavaScript单例模式与开发实践(一)
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。本章通过讲解单例模式，希望能够让你对设计模式更一步的学习。本章学习内容👇认识单例模式完成一个单例模式。
2023-01-10 11:46:39
262
原创 简单明了的Promise基本知识点
Promise相比大家都不陌生，都能说出几个状态几个方法，可是你真的了解Promise吗？本文将带领大家一探究竟。
2022-07-28 17:05:36
1064
原创 Ts基于泛型`＜T＞`的进阶使用
这里可以注意到我们不得不多次使用类型断言。假若我们一旦检查过类型，就能在之后的每个分支里清楚地知道pet的类型的话就好了。TypeScript里的类型保护机制让它成为了现实。类型保护就是一些表达式，它们会在运行时检查以确保在某个作用域里的类型。要定义一个类型保护，我们只要简单地定义一个函数，它的返回值是一个类型谓词}在这个例子里，就是类型谓词。谓词为这种形式，必须是来自于当前函数签名里的一个参数名。每当使用一些变量调用isFish注意TypeScript不仅知道在if分支里pet是Fish。...
2022-07-18 16:18:32
4575
2
原创 Vue3 ref的原理解析以及实践
本篇作为Vue3中ref api的讲解，希望你拥有以下知识有这么一段代码，此时我们不难发现销售总额应当为salePrice*product.quantity,于是我们定义销售总额，并注入依赖。但此段代码不会像我们所想的那样运行，因为salePrice并不是一个响应式变量。此时如果你熟悉Vue3Api，你应该知道这里是一个使用ref的场景。ref函数接受一个值并返回一个响应式的、可变的Ref对象。Ref对象只有一个.value属性值。第一种实现，通过reactive方法直接实现虽然能行，但这并不是我们以
2022-06-29 10:02:43
1224
原创 es6实战使用技巧，提升代码质量
作为一个2022年的前端工程师，是时候用一点ES6了吧？这篇文章用于巩固你的代码习惯，提高代码水平以及ES6掌握度。使用场景：假设我们需要将一个已有的变量值改变并赋予给另外一个新的值时将俩便赋值融合在了一块，旁人看不懂的牛逼使用场景：根据一个值在数组中找出对应的项find函数为ES6 新增语法会在找到第一个匹配项时，返回并结束查找。拒绝for循环break跳出，以及try catch嵌套forEach。使用find函数，旁人看不懂的牛逼使用场景：取出已有对象的值ES6的解构赋值虽然好用。但是要
2022-06-22 08:48:10
117
原创 Vue3响应式原理解析以及实践（下）
上文中我们阐述了Vue3数据响应、依赖使用的方式，本篇接着讲解Proxy代理以及编写完整的响应式源码。回顾我们上篇的需求：我们想在get以及set时拦截下来并完成相应的依赖注入以及跟踪，在下文中我们通过ES6 Reflect 以及 ES6 Proxy去实现了它。什么是Proxy?Proxy 对象是ES6新出的一个特性，用于创建一个对象 的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。为什么Proxy会取代Object.defineProperty：Object.definePr
2022-06-21 09:25:13
86
原创 Vue3响应式原理解析以及实践（上）
Vue3重写了Vue2中的响应式原理，通过代理代替Object.defineProperty提升了性能，并解决了对象和数组值更改时无法正确响应的问题。首先，我想先介绍响应式中所需用到的函数对象。在Vue3中，我们将变量间存在依赖关系的通过effect函数表达，通过track函数注入依赖，通过trigger函数触发effect跟踪依赖effect函数：我们将一个值依赖于另外一个值的关系通过函数结果返回。在以上代码中我们将其中的函数称为price 和 quantity的副作用函数，当price 或 quant
2022-06-20 09:53:06
327
原创 VueX原理解析以及实现一个简单的Vuex
前端以前是没有状态管理的，直到Fackbook提出一个叫Flux的概念，才有了状态管理。以前前端是通过MVC模式管理代码，但后来我们使用例如Vue、React、Angular这类通过声明式开发的框架，发现状态很难管理，容易出现状态被任意修改。当应用越来越大，这种不确定性会导致系统不稳定，而且定位bug也变得困难。Flux，VueX都是一种关于单向数据流的思想开发的状态管理模式，这个模式下包含以下几个部分：以下是一个表示“单向数据流”理念的简单示意：在这个单向数据流模型中，使用一个上传数据流和一个下传数据流进
2022-06-15 16:39:48
491
原创 Vue高阶组件的原理以及实践
高阶组件在许多使用Vue框架进行开发的前端工程师的印象中，大部分都比较陌生。Vue官网也没有推出这一方案的使用，大概是官方也觉得不好用。但这不影响我们来学习高阶组件的这种思维，看完本篇希望你对高阶组件有基本的认识。高阶组件让我们想到一个函数式编程常会出现的类似名称的“高阶函数”。高阶函数：为一个函数接受一个函数并返回一个新函数，使得新函数具有这个函数原先的功能又能够自定义的添加新的功能。同样，高阶组件也具备与高阶函数一样的性质。高阶组件：接受一个组件并返回一个组件，这个组件具有原组件的功能，并拥有了新自定义
2022-06-14 09:01:39
2707
原创 Vue渲染函数原理以及实践
Vue是如何渲染页面的Vue编译第一阶段：在Vue中，渲染系统是组成响应系统的另外一半，如果使用Vue CLI构建项目，会用到webpack和vue-loader，实际上vue-loader会在构建阶段实现预编译，把模版代码编译为浏览器可直接解析的DOM代码。另外，Vue还提供了用于编译的渲染函数，它类似angular的ALT编译模式，那应用就可以运行未编译版本。两种编译模式，一种会把编译器打包进去，一个直接把代码预先编译，包含编译器版本经过gzip压缩大概30KB，不包含编译器版本大概20KB，所以预先编
2022-06-13 09:53:47
1385
原创 算法学习【数组】之删除排序数组中的重复项-双指针
题目来源：力扣（LeetCode）Title给你一个 升序排列 的数组 nums ，请你 原地 删除重复出现的元素，使每个元素 只出现一次 ，返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。由于在某些语言中不能改变数组的长度，所以必须将结果放在数组nums的第一部分。更规范地说，如果在删除重复项之后有 k 个元素，那么 nums 的前 k 个元素应该保存最终结果。将最终结果插入 nums 的前 k 个位置后返回 k 。不要使用额外的空间，你必须在 原地 修改输入数组 并在使用 O(1)
2022-05-20 09:56:41
59
原创 JavaScript中this的四种指向情况
本文出自《JavaScript设计模式与开发实践》第二章跟别的语言大相径庭的是，JavaScript的this总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。除去不常用的with和eval的情况，具体到实际应用中，this的指向大致可以分为以下四种作为对象的方法调用作为普通函数调用构造器调用Function.prototype.call / Funtion.prototype.apply作为对象的方法调用当函数作为对象的方法被调用时，t.
2022-03-03 16:24:04
795
原创 JS中的原型模式
本文产出于《JavaScript设计模式与开发实践》中的第一章第四节，感兴趣的朋友可以自行查看从设计模式的角度讲，原型模式是用于创建对象的一种模式，如果我们想要创建一个对象，一种方法是先指定它的类型，然后通过类来创建这个对象。原型模式选择了另外一种方式，我们不再关心对象的具体类型，而是找到一个对象，然后通过克隆来创建一个一模一样的对象。如果使用原型模式，我们只需要调用负责克隆的方法，便能完成同样的功能。原型模式的实现关键，是语言本身是否提供了clone方法。ECMAScript 5提供了Objec.
2022-02-09 19:29:51
1147
原创 JS中字符串与数组的关系
本文产自于本人阅读《你不知道的JavaScript(中卷)》第二章前两节，文章采用了书籍原文以及个人理解构成。这是一本指引JavaScript使用者语言进阶的书，非常推荐有心的人士静下来研读。在阅读这两节时不知道读我这篇文章的读者有没有和我此前一样对于JS中字符串和数组之间的关系十分混淆，懂了却没完全懂的感觉。如果有的话，欢迎阅读该文1.字符串是字符数组么？首先答案是否定的，JavaScript 中的字符串和字符数组并不是一回事，最多只是看上去相似而已。但不可否认的是字符串和数组的确很相似，它们.
2021-10-09 15:19:30
373
2
原创 VSCODE常用快捷键
常用 快捷键编辑器与窗口管理新建文件: Ctrl+N文件之间切换: Ctrl+Tab打开一个新的VS Code编辑器: Ctrl+Shift+N关闭当前窗口: Ctrl+W关闭当前的VS Code编辑器: Ctrl+Shift+W切出一个新的编辑器窗口（最多3个): Ctrl+\切换左中右3个编辑器窗口的快捷键: Ctrl+1 Ctrl+2 C...
2021-08-17 11:33:48
490
原创 最常考CSS水平垂直居中-五种工作常用方法
最常考CSS水平垂直居中首先是最简单的定位方法<style>div{ width: 200px; height: 200px; background: #000; /* 方法一 */ /* position: absolute; top:0; bottom: 0; right: 0; left: 0; margin: auto; */ /* 方法二 */ /* position: absolute; left:50%; top
2021-03-25 15:19:07
67
原创 JS（ES6）面试常考/工作常用方法
JS常用方法1.map()该方法返回一个新数组，数组中的元素为原数组调用函数后处理过的值var arr =[1,2,3,4,5]var arr2 =arr.map((x)=>{return x+1})2.trim()**trim()**用于删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等。trim() 方法不会改变原始字符串。trim() 方法不适用于 null, undefined, Number 类型。var str = " Runoo
2021-03-21 11:17:07
345
原创 前端常用框架总结
Bootstrap（前端UI框架）是一个响应式的、移动设备优先的、不固定的网格系统一个为移动设备而开发的CSS框架，由规范的CSS和JS插件构成，能够实现响应式布局bootstrap不适合做固定宽高的网页–固定宽高与bootstrap响应式布局的理念冲突适用场景：移动端开发适用Ant Design(前端UI框架)分别基于react、vue、angular框架，各自开发了一套 Ant Design 的UI框架Ant Design 提供了一套非常完整的 组件化设计规范 与 组件化
2021-03-14 23:26:04
551
原创 https的工作原理以及与http的区别
https协议工作原理http和https的基本概念http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。https协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实
2021-03-14 23:24:50
253
原创 JS实现strStr()-俩种解法-力扣
JS实现strStr()-俩种解法BF算法即暴力(Brute Force)算法，是普通的模式匹配算法，BF算法的思想就是将目标串S的第一个字符与模式串T的第一个字符进行匹配，若相等，则继续比较S的第二个字符和 T的第二个字符；若不相等，则比较S的第二个字符和T的第一个字符，依次比较下去，直到得出最后的匹配结果。BF算法是一种蛮力算法。/** * @param {string} haystack * @param {string} needle * @return {number} */var
2021-03-14 23:11:16
225
原创 输入网址发生了什么？-步骤细解
问题：当一个新员工刚入职在新电脑上输入https://www.baidu.com/后发生了什么？一：ARP(Address Resolution Protocol）通过ARP（地址解析协议）获取该电脑的MAC地址二：DHCP（Dynamic Host Configuration Protocol）通过DHCP（动态主机配置协议）获取该电脑的内网IP三：DNS（Domain Name System）通过DNS的迭代或者递归查询出目标源的IP四：SSL握手(Secure Sockets Layer
2021-03-10 22:48:12
149
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人