小小白学计算机-CSDN博客

原创前端性能优化汇总

（4）对于动画来说：能用 CSS 解决的不用 JS（能够用 transform 处理的，不用传统的 css 样式，因为 transform 开启硬件加速，不会引发回流，再或者使用定位的元素也会好很多，因为定位的元素脱离文档流，不会对其它元素的位置造成影响），能用requestAnimationFrame 解决的不用定时器（requestAnimationFrame 还有一个好处，当页面处于休眠无访问状态，动画会自己暂停，直到恢复访问才开始，而定时器是不论什么状态，只要页面不管，就一直处理）

2023-09-21 11:39:51 830

原创客户端和服务端信息交互模型

客户端：可以向服务器发请求，并接收返回的内容进行处理服务器端：能够接收客户端请求，并且把相关资源信息返回给客户端的。

2023-09-21 11:34:17 1314

原创 react-router细节补充

【代码】react-router细节补充。

2023-08-02 16:37:41 1049

原创 koa实现对接支付宝沙箱支付

支付宝有一个供开发者测试使用的沙箱环境，会提供一个沙箱版的支付宝app、一个商家账户、一个买家账户。有了这个，可以让我们跳过商家入驻、企业资质审核等过程，开箱即用，降低了学习成本。将应用私钥通过支付宝开放平台密钥工具 - 格式转换菜单进行转换。把生成的应用私钥放入privateKey中。

2023-03-13 14:45:59 1323 1

原创 CSS布局（圣杯布局、双飞翼布局、水平垂直居中）

一、圣杯布局要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽好处：重要的内容放在文档流前面可以优先渲染原理：利用相对定位、浮动、负边距布局，而不添加额外标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * {

2022-04-23 14:09:31 961 1

原创 JS数据结构与算法——插入排序

一、图解排序过程二、代码实现三、完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> // 创建列表类 function ArrayList() { // 属性

2022-04-02 15:58:33 578

原创 JS数据结构与算法——选择排序（把小的数字依次往前放）

一、图解排序过程注意：选择排序一样是需要进行两两的比较，但比较过程中不进行交换，只有比较完成后，找到最小的那个数，才会进行交换，把它放到最前面。二、代码实现三、完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><sc

2022-04-02 14:48:05 1385

原创 JS数据结构与算法——冒泡排序（把大的数字依次往后放）

一、图解排序过程注意：比较次数和交换次数之所以不一致，是因为：比较了并不一定就需要交换两个数字的位置，比如比较 1 和 2两个数字，由于后者本身就比前者大，所以不需要交换两者的位置。二、代码实现三、完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head>

2022-04-02 13:34:21 1419

原创设计模式——单例模式

一、利用闭包实现单例模式二、ES6借助class中的static实现单例模式

2022-03-30 00:12:50 504

原创设计模式——策略模式

一、策略模式案例一二、策略模式案例二：实现表单验证普通的表单验证功能实现：使用策略模式实现：

2022-03-30 00:07:26 337

原创 JS高级——内存管理和闭包

0、预备知识0.1 认识内存管理不管什么样的编程语言，在代码的执行过程中都是需要给它分配内存的，不同的是某些编程语言需要我们自己手动的管理内存，某些编程语言会可以自动帮助我们管理内存：不管以什么样的方式来管理内存，内存的管理都会有如下的生命周期：第一步：分配申请你需要的内存（申请）；第二步：使用分配的内存（存放一些东西，比如对象等）；第三步：不需要使用时，对其进行释放；不同的编程语言对于第一步和第三步会有不同的实现：手动管理内存：比如C、C++，包括早期的OC，都是需要手动来管理内

2022-03-25 17:51:00 413

原创 JS高级——函数执行、作用域链内存结构图

一、JavaScript的执行过程假如我们有下面一段代码，它在JavaScript中是如何被执行的呢？1.1 第一步：初始化全局对象js引擎会在执行代码之前，会在堆内存中创建一个全局对象：Global Object（GO）该对象所有的作用域（scope）都可以访问；里面会包含Date、Array、String、Number、setTimeout、setInterval等等；其中还有一个window属性指向自己；1.2 执行上下文栈（调用栈）js引擎内部有一个执行上下文栈（Execu

2022-03-25 13:28:33 1414

原创基于Element-plus封装配置化表单组件（组件的v-model实现）

一、预备知识1.1 组件的v-model前面我们在input中可以使用v-model来完成双向绑定：这个时候往往会非常方便，因为v-model默认帮助我们完成了两件事；v-bind:value的数据绑定和 @input的事件监听；如果我们现在封装了一个组件，其他地方在使用这个组件时，是否也可以使用v-model来同时完成这两个功能呢？也是可以的，vue也支持在组件上使用v-model；当我们在组件上使用的时候，等价于如下的操作：我们会发现和input元素不同的只是属性的名称和

2022-03-25 00:47:56 2876

原创 Vue权限控制——动态注册路由

需求：实现后台管理系统不同用户的权限控制根据登录的用户的角色动态展示后台管理系统的左侧菜单栏的菜单列表内容，然后还要动态注册对应子菜单的路由菜单列表内容应该通过后端接口返回：sort为1表示当前项有子菜单sort为2表示当前项没有子菜单，这个才是需要我们去动态注册的组件前端需要根据后端返回的菜单列表去动态的展示菜单列表：并且为每个菜单列表项注册对应的路由：在views/main文件夹下创建所有的页面（component）在router/main文件夹下创建每个页面对应的路

2022-03-24 14:23:47 4278

原创手写防抖和节流函数

一、认识防抖debounce函数我们用一副图来理解一下它的过程：当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；当事件密集触发时，函数的触发会被频繁的推迟；只有等待了一段时间也没有事件触发，才会真正的执行响应函数；防抖的应用场景很多：输入框中频繁的输入内容，搜索或者提交信息；频繁的点击按钮，触发某个事件；监听浏览器滚动事件，完成某些特定操作；用户缩放浏览器的resize事件；总结：防抖其实是延迟函数的执行，只有当等待了一段时间也没有事件触发时，才会真正去执行函数1.

2022-03-16 18:10:21 11232 3

原创手写实现深拷贝函数

对象相互赋值的一些关系，分别包括：引入的赋值：指向同一个对象，相互之间会影响；对象的浅拷贝：只是浅层的拷贝，内部引入对象时，依然会相互影响；对象的深拷贝：两个对象不再有任何关系，不会相互影响；可以通过JSON.parse来实现深拷贝，但存在以下弊端：这种深拷贝的方式其实对于函数、Symbol等是无法处理的；并且如果存在对象的循环引用，也会报错的；一、简单的深拷贝函数实现自定义深拷贝的基本功能：二、对其他数据类型的值进行处理包括：数组、函数、Symbol、Set、Map.

2022-03-16 17:11:56 2854

原创手写实现简单的Vue事件总线

一、什么是事件总线自定义事件总线属于一种观察者模式，其中包括三个角色：发布者（Publisher）：发出事件（Event）；订阅者（Subscriber）：订阅事件（Event），并且会进行响应（Handler）；事件总线（EventBus）：无论是发布者还是订阅者都是通过事件总线作为中台的；当然我们可以选择一些第三方的库：Vue2默认是带有事件总线的功能；Vue3中推荐一些第三方库，比如mitt；二、手写实现事件总线当然我们也可以实现自己的事件总线：事件的监听方法on：存储对

2022-03-16 16:33:43 1720

原创 JS高级——JSON、数据存储学习笔记

在目前的开发中，JSON是一种非常重要的数据格式，它并不是编程语言，而是一种可以在服务器和客户端之间传输的数据格式。JSON的全称是JavaScript Object Notation（JavaScript对象符号）：JSON是由Douglas Crockford构想和设计的一种轻量级资料交换格式，算是JavaScript的一个子集；但是虽然JSON被提出来的时候是主要应用JavaScript中，但是目前已经独立于编程语言，可以在各个编程语言中使用；很多编程语言都实现了将JSON转成对应模型的.

2022-03-15 14:12:11 1420

原创 JS高级——模块化学习笔记

一、什么是模块化？到底什么是模块化、模块化开发呢？事实上模块化开发最终的目的是将程序划分成一个个小的结构；这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构；这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用；也可以通过某种方式，导入另外结构中的变量、函数、对象等；上面说提到的结构，就是模块；按照这种结构划分开发程序的过程，就是模块化开发的过程；二、没有模块化带来的问题早期没有模块化带来了很多的问题：比如命名冲突的问题当然，我们有办法可以解决上面的问题：

2022-03-13 19:14:40 3568 1

原创 JS高级——错误处理

一、错误处理方案开发中我们会封装一些工具函数，封装之后给别人使用：在其他人使用的过程中，可能会传递一些参数；对于函数来说，需要对这些参数进行验证，否则可能得到的是我们不想要的结果；很多时候我们可能验证到不是希望得到的参数时，就会直接return：但是return存在很大的弊端：调用者不知道是因为函数内部没有正常执行，还是执行结果就是一个undefined；事实上，正确的做法应该是如果没有通过某些验证，那么应该让外界知道函数内部报错了；如何可以让一个函数告知外界自己内部出现了错误呢？

2022-03-13 17:14:27 627

原创 JS高级——await-async

一、异步函数 async functionasync关键字用于声明一个异步函数：async是asynchronous单词的缩写，异步、非同步；sync是synchronous单词的缩写，同步、同时；async异步函数可以有很多中写法：二、异步函数的执行流程异步函数的内部代码执行过程和普通的函数是一致的，默认情况下也是会被同步执行。异步函数有返回值时，和普通函数会有区别：情况一：异步函数也可以有返回值，但是异步函数的返回值会被包裹到Promise.resolve中；情况二：

2022-03-12 16:14:28 6883 1

原创 JS高级——Iterator迭代器、Generator生成器

一、什么是迭代器？在JavaScript中，迭代器也是一个具体的对象，这个对象需要符合迭代器协议（iterator protocol）：迭代器协议定义了产生一系列值（无论是有限还是无限个）的标准方式；那么在js中这个标准就是一个特定的next方法；next方法有如下的要求：一个无参数或者一个参数的函数，返回一个应当拥有以下两个属性的对象：done：（boolean）如果迭代器可以产生序列中的下一个值，则为 false。（这等价于没有指定 done 这个属性。）如果迭代器已将序列迭代完毕

2022-03-12 13:58:15 1273

原创 Promise学习笔记

一、异步任务的处理这里我从一个实际的例子来作为切入点：我们调用一个函数，这个函数中发送网络请求（我们可以用定时器来模拟）；如果发送网络请求成功了，那么告知调用者发送成功，并且将相关数据返回过去；如果发送网络请求失败了，那么告知调用者发送失败，并且告知错误信息；二、什么是Promise呢？在上面的解决方案中，我们确实可以解决请求函数得到结果之后，获取到对应的回调，但是它存在两个主要的问题：第一，我们需要自己来设计回调函数、回调函数的名称、回调函数的使用等；第二，对于不同的人、不同的框架

2022-03-11 14:41:12 1423

原创 JS高级——Proxy、Reflect

一、监听对象的操作我们先来看一个需求：有一个对象，我们希望监听这个对象中的属性被设置或获取的过程通过我们前面所学的知识，能不能做到这一点呢？其实是可以的，我们可以通过之前的属性描述符中的存储属性描述符来做到；下面这段代码就利用了前面讲过的 Object.defineProperty 的存储属性描述符来对属性的操作进行监听：但是这样做有什么缺点呢？首先，Object.defineProperty设计的初衷，不是为了去监听截止一个对象中所有的属性的。我们在定义某些属性的时候，初衷其实是定义普

2022-03-10 18:22:57 473

原创 ES6~ES12——Array Includes、Object values、Object entries、Object fromEntries、flat、flatMap、空值合并运算符、可选链等

一、ES7 - Array Includes在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为 -1。在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false。二、ES7 –指数(乘方) exponentiation运算符在ES7之前，计算数字的乘方需要通过 Math.pow 方法来完成。在ES7中，增加了 ** 运算符，可以对数字来计算乘方。三、E

2022-03-10 15:51:26 1339

原创 ES6（三）——Set、WeakSet、Map、WeakMap

一、Set的基本使用在ES6之前，我们存储数据的结构主要有两种：数组、对象。在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap。Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。Set的常见方法：Set常见的属性：size：返回Set

2022-03-10 13:49:36 343

原创 ES6（二）——字符串模板、标签模板字符串、函数的默认参数、剩余参数、数组对象的展开语法、数值的表示、Symbol

一、字符串模板基本使用在ES6之前，如果我们想要将字符串和一些动态的变量（标识符）拼接到一起，是非常麻烦和丑陋的（ugly）。ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接：首先，我们会使用 `` 符号来编写字符串，称之为模板字符串；其次，在模板字符串中，我们可以通过 ${expression} 来嵌入动态的内容；二、标签模板字符串使用模板字符串还有另外一种用法：标签模板字符串（Tagged Template Literals）。我们一起来看一个普通的JavaScr

2022-03-09 20:22:52 1085

原创 ES6（一）——字面量的增强、解构、let/const、块级作用域、暂时性死区

一、字面量的增强ES6中对对象字面量进行了增强，称之为 Enhanced object literals（增强对象字面量）。字面量的增强主要包括下面几部分：属性的简写：Property Shorthand方法的简写：Method Shorthand计算属性名：Computed Property Namesvar name = "why"var age = 18var obj = { // 1.property shorthand(属性的简写) name, age,

2022-03-09 18:17:04 1357

原创 JS面向对象——class定义类、类的构造函数、实例方法、访问器方法、静态方法、继承、super、多态

一、认识class定义类我们会发现，按照前面的构造函数形式创建类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解。在ES6（ECMAScript2015）新的标准中使用了class关键字来直接定义类；但是类本质上依然是前面所讲的构造函数、原型链的语法糖而已；所以学好了前面的构造函数、原型链更有利于我们理解类的概念和继承关系；那么，如何使用class来定义一个类呢？可以使用两种方式来声明类：类声明和类表达式；二、类和构造函数的异同我们来研究一下类的一些特性：你会发现它

2022-03-09 13:44:11 7246 1

原创 JS面向对象——Object对象的方法补充、原型继承关系图

一、Object.create()这个方法用于创建一个新对象。被创建的对象的__proto__指向create函数第一个参数的原型对象prototype，在创建新对象时可以通过create函数第二个参数指定一些属性。二、Object.hasOwnProperty()对象是否有某一个属于自己的属性（不是在原型上的属性）三、in/for in 操作符判断某个属性是否在某个对象或者对象的原型上四、instanceof用于检测构造函数的pototype，是否出现在某个实例对象的原型链上f

2022-03-08 17:35:45 287

原创 JS面向对象——原型式继承函数、寄生式继承函数、寄生组合式继承

一、原型式继承函数回顾一下JavaScript想实现继承的目的：重复利用另外一个对象的属性和方法.最终的目的：student对象的原型指向了person对象；二、寄生式继承函数寄生式(Parasitic)继承是与原型式继承紧密相关的一种思想, 并且同样由道格拉斯·克罗克福德(DouglasCrockford)提出和推广的；寄生式继承的思路是结合原型类继承和工厂模式的一种方式；即创建一个封装继承过程的函数, 该函数在内部以某种方式来增强对象，最后再将这个对象返回；三、寄生组合式

2022-03-08 16:49:49 437

原创 JS面向对象——原型链、通过原型链实现继承、借用构造函数实现继承

一、JavaScript原型链在真正实现继承之前，我们先来理解一个非常重要的概念：原型链。我们知道，从一个对象上获取属性，如果在当前对象中没有获取到就会去它的原型（__proto__）上面获取：二、Object的原型那么什么地方是原型链的尽头呢？比如第三个对象是否也是有原型__proto__属性呢？我们会发现它打印的是 [Object: null prototype] {}事实上这个原型就是我们最顶层的原型了从Object直接创建出来的对象的原型都是 [Object: null pr

2022-03-08 15:16:17 485

原创 JS高级——对象的原型proto、函数的原型prototype、构造函数

一、认识构造函数我们先理解什么是构造函数？构造函数也称之为构造器（constructor），通常是我们在创建对象时会调用的函数；在其他面向的编程语言里面，构造函数是存在于类中的一个方法，称之为构造方法；但是JavaScript中的构造函数有点不太一样；JavaScript中的构造函数是怎么样的？构造函数也是一个普通的函数，从表现形式来说，和千千万万个普通的函数没有任何区别；那么如果这么一个普通的函数被使用new操作符来调用了，那么这个函数就称之为是一个构造函数；那么被new调用有

2022-03-08 12:25:12 1297

原创 JS面向对象——Object.defineProperty

一、JavaScript的面向对象JavaScript其实支持多种编程范式的，包括函数式编程和面向对象编程：JavaScript中的对象被设计成一组属性的无序集合，像是一个哈希表，有key和value组成；key是一个标识符名称，value可以是任意类型，也可以是其他对象或者函数类型；如果值是一个函数，那么我们可以称之为是对象的方法；如何创建一个对象呢？早期使用创建对象的方式最多的是使用Object类，并且使用new关键字来创建一个对象：这是因为早期很多JavaScript开发者是从Ja

2022-03-08 11:30:48 285

原创 JS高级——with语句、eval函数、严格模式

一、with语句with语句的作用：扩展一个语句的作用域链。不建议使用with语句，因为它可能是混淆错误和兼容性问题的根源。并且，在浏览器开启严格模式下，使用with会报错：二、eval函数eval是一个特殊的函数，它可以将传入的字符串当做JavaScript代码来运行。不建议在开发中使用eval：eval代码的可读性非常的差（代码的可读性是高质量代码的重要原则）；eval是一个字符串，那么有可能在执行的过程中被刻意篡改，那么可能会造成被攻击的风险；eval的执行必须经过JS解释

2022-03-07 16:48:53 324

原创 JS高级——纯函数、柯里化（手写自动柯里化函数）、组合函数（手写自动组合函数）

一、理解JavaScript纯函数函数式编程中有一个非常重要的概念叫纯函数，JavaScript符合函数式编程的范式，所以也有纯函数的概念；在react开发中纯函数是被多次提及的；比如react中组件就被要求像是一个纯函数（为什么是像，因为还有class组件），redux中有一个reducer的概念，也是要求必须是一个纯函数；所以掌握纯函数对于理解很多框架的设计是非常有帮助的；简单总结一下纯函数的定义：确定的输入，一定会产生确定的输出；函数在执行过程中，不能产生副作用；副作用的理解

2022-03-07 15:26:28 711

原创 JS高级——arguments参数详解

一、认识argumentsarguments 是一个对应于传递函数的参数的类数组(array-like)对象。array-like意味着它不是一个数组类型，而是一个对象类型：但是它却拥有数组的一些特性，比如说length，比如可以通过index索引来访问；但是它却没有数组的一些方法，比如forEach、map等；二、arguments转成array三、箭头函数不绑定arguments箭头函数是不绑定arguments的，所以我们在箭头函数中使用arguments会去上层作

2022-03-07 12:05:04 4603 1

原创 JS高级——深入剖析函数中的this指向问题

一、this到底指向什么呢？我们先说一个最简单的，this在全局作用于下指向什么？这个问题非常容易回答，在浏览器中测试就是指向window但是，开发中很少直接在全局作用于下去使用this，通常都是在函数中使用。所有的函数在被调用时，都会创建一个执行上下文：这个上下文中记录着函数的调用栈、AO对象等；this也是其中的一条记录；定义一个函数，我们采用三种不同的方式对它进行调用，它产生了三种不同的结果：这个的案例可以给我们什么样的启示呢？函数在调用时，JavaScript会默认给

2022-03-06 21:41:03 734

原创 JS高级——手写call()、apply()、bind()

0、call、apply、bind的区别bind，call，apply的作用都是用来改变this指向的call方法call方法的第一个参数是this的指向后面传入的是一个参数列表（注意和apply传参的区别）。当一个参数为null或undefined的时候，函数中的this默认指向window(在浏览器中)，和apply一样，call也只是临时改变一次this指向，并立即执行。apply方法：使用apply方法改变this指向后原函数会立即执行，且此方法只是临时改变thi指向一次。a

2022-03-06 20:17:33 1071 2

原创 Vuex4学习笔记

一、Vuex的状态管理二、Vuex的安装我们这里使用的是vuex4.x，安装的时候需要添加 next 指定版本；npm install vuex@next三、创建Store每一个Vuex应用的核心就是store（仓库）：store本质上是一个容器，它包含着你的应用中大部分的状态（state）；Vuex和单纯的全局对象有什么区别呢？第一：Vuex的状态存储是响应式的当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会被更新；第二：你不能直接改

2022-03-04 19:03:58 971