wyc_ok-CSDN博客

2. 监听`touchstart`、`touchmove`和`touchend`事件以追踪用户的滑动动作。3. 当用户滑动超过一定的距离时，触发刷新操作，通常通过改变DOM元素的状态或添加加载动画。4. 当数据加载完成后，通过JavaScript更新DOM内容，重置下拉刷新状态。1. 创建一个包含下拉刷新内容的容器，通常是一个`<div>`元素。

2023-10-13 10:39:37 104

在HTML中，为要进行懒加载的图片元素添加一个占位符，通常是一个小尺寸的透明图片或者一个简单的`<div>`元素。- 为每个要懒加载的图片元素添加一个自定义数据属性，例如`data-src`，用于存储原始图片的`src`属性的值。实现图片懒加载的思路是延迟加载页面中的图片，只有当用户滚动到图片可见区域时才加载图片，以减少初始页面加载时间和网络带宽的使用。- 当图片进入可见区域时，通过JavaScript将`data-src`属性的值设置为`src`属性，从而加载原始图片。这会触发浏览器下载图片。

2023-10-13 10:24:17 219

原创 MVVM 与 MVC区别和应用场景？

在MVVM的框架下，视图和模型是不能直接通信的，它们通过ViewModal来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。Controller负责将Model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View。这样就把数据更新分的比较明确了。

2023-10-12 14:21:55 308

原创 Vue2 router详解

路由（英文： router）就是对应关系Hash地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/① 能够知道如何在 vue 中配置路由② 能够知道如何使用嵌套路由通过 children 属性进行路由嵌套③ 能够知道如何实现动态路由匹配。

2023-10-12 11:45:34 492

原创 Vue2 Watch的语法

watch第一次绑定值的时候不会执行监听，如果需要第一次就执行监听则需要设置：immediate: true。

2023-10-11 21:16:37 329

原创 Ts interface 和 type 的区别？

提示：刚学习TS 的新手看到type 和 interface 会分不清楚什么场景下怎么使用，所以写一篇文章总结一下。

2023-10-10 15:43:24 65

原创 Docker 自动化部署（保姆级教程）

jenkins介绍jenkins部署Vue项目docker安装JenkinsJenkins：是一个开源的、提供友好操作界面的持续集成(CI)工具，主要用于持续、自动的构建的一些定时执行的任务。Jenkins用Java语言编写，可在Tomcat等流行的容器中运行，也可独立运行。

2023-09-24 17:26:04 1634

原创 Docker 部署前端项目(非自动化)

前端上线的项目在路由上可能出现刷新后出现404的情况，这时，我们需要在nginxConf文件中的conf.d文件下的default.conf文件配置一行代码。首先你需要有nginx配置文件，你可以执行以下命令获取配置文件。

2023-09-23 10:07:30 178

原创 CSS 小球随着椭圆移动

CSS 小球随着椭圆移动。

2023-09-21 18:54:23 258 1

原创单点登录原理

在企业发展初期，系统设计不多，可能只需要一个系统就可以满足业务的需求，用户呢，也只需要用账号密码登录就可以完成验证，但是随着业务迭代的发展，系统架构也随之迭代，演变越来越多的子系统，用户每进一个系统呢就需要重新进行登录，为了解决这个问题，就产生了单点登录。用户登录成功之后，会与sso认证中心及各个子系统建立会话，用户与sso认证中心建立的会话称为全局会话，用户与各个子系统建立的会话称为局部会话，局部会话建立之后，用户访问子系统受保护资源将不再通过sso认证中心，全局会话与局部会话有如下约束关系。

2023-09-21 16:43:27 103 1

原创 JS 手写call、apply和bind方法

apply、call和bind都是系统提供给我们的内置方法，每个函数都可以使用这三种方法，是因为apply、call和bind都实现在了Function的原型上（Function.prototype），而他们的作用都是给我们函数调用时显式绑定上this。

2023-09-21 09:53:11 107

原创 JS 继承

原型链继承是比较常见的继承方式之一，其中涉及的构造函数、原型和实例，三者之间存在着一定的关系，即每一个构造函数都有一个原型对象，原型对象又包含一个指向构造函数的指针，而实例则包含一个原型对象的指针。寄生组合式继承，借助解决普通对象的继承问题的Object.create 方法，在前面几种继承方式的优缺点基础上进行改造，这也是所有继承方式里面相对最优的继承方式。相比第一种原型链继承方式，父类的引用属性不会被共享，优化了第一种继承方式的弊端，但是只能继承父类的实例属性和方法，不能继承原型属性或者方法。

2023-09-20 21:24:50 288

原创 JS Ajax 封装

Ajax（Asynchronous JavaScript And XML）是2005年新出现的技术，它的出现是为了解决这样一个场景：整个页面中，只有一小部分的数据需要进行更新，按照传统的前后端交互，我们需要向服务器请求该网页的所有数据，然后再在客户端重新渲染，这无疑是非常低效的操作。因此，Ajax就可以做到只向服务器请求我们想要的那一小部分数据，而不用请求全部数据，进而在刷新整个页面的前提下更新那部分的数据。

2023-09-20 10:27:08 455

原创 JS 原型的原理

说白了就是说，它会先去找实例本身，如果有，那自然最好。如果没有，没关系，我可以找实例所对应的那个类，它的原型，然后找它的原型上有没有。说白了，先在自己身上找，没有就找它爹要，找他爹其实就是在找它爹的原型，还没有，就找它爷爷，一直找到 Object 身上，还没有，就是 undefined。而现在，我们有了 class 之后，理论上，在我写这个类的时候，其实是用不着原型了，但是原型它自己也有很大的作用。这个过程其实特别的简单，当然这个过程不用我们来完成，都是由 js，由语言自身来支撑这些功能的，不用我们来做。

2023-09-19 17:31:28 86

原创 JS 采用JSON.parse实现深拷贝时出现的问题？

综上，虽然 JSON.parse(JSON.stringify()) 方法是一种简单易用的实现深拷贝的方法，但它并不完美，使用时需要注意其缺陷。JSON.stringify() 方法无法处理某些特殊的 JavaScript 对象，如 RegExp、Error、Date 等，这些对象会被转换成空对象。JSON.stringify() 方法无法处理 JavaScript 中的函数和 undefined 值，这些值会被忽略掉，因此在使用该方法时需要注意。

2023-09-19 16:09:34 432

原创 JS parseInt 方法

由于 parseInt 第二个参数的推算并不稳定，所以建议在使用 parseInt 的时候第二个参数也添加上。在捋捋规则：第一个参数默认为字符串类型，不是字符串类型，会被toString；如果字符串无法解析，直接返回NaN;第二个参数指定为 0 或未指定，会根据第一个参数的格式，进行推断。基数的取值范围为 2-36；基数超出范围NaN;来都来了来都来了，顺便看一下和parseInt比较相似的parseFloatparseFloat比较简单，只有一个参数，就是需要解析的字符串。对于。

2023-09-19 14:47:59 184

原创 JS parseFloat 方法

parseFloat方法是将字符串进行转化为浮点数字符串中符合科学计数法则会进行转化字符串中中包含不能转化为浮点数的字符，那么就将已经转化好的部分返回parseFloat会自动过滤字符串前后空格如果参数不是字符串，或者第一个字符不能转化为浮点数，那么返回NaNparseInt不同于Number。

2023-09-19 14:38:13 2177

原创 JS new操作符具体做了什么？

在JavaScript中，“new” 操作符用于创建一个新的对象实例。具体来说，“new” 操作符会执行以下步骤：JavaScript中的new操作符是一个非常重要的操作符，它用于创建一个新的对象实例。

2023-09-18 19:11:55 412

原创 JS 如何判断一个元素是否在可视区域？

HTMLElement.offsetParent返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。DOMRect 可以理解为将元素看出一个矩形，该对象包含了该矩形的位置、大小信息，可以获得页面中元素的左，上，右和下分别相对浏览器视窗的位置。有时，我们希望某些静态资源（比如图片），只有用户向下滚动，它们进入视口时才加载，这样可以节省带宽，提高网页性能。这样设置以后，不管是窗口滚动或者容器内滚动，只要目标元素可见性变化，都会触发观察器。

2023-09-18 09:54:31 582

原创 JS 原型和原型链

这是js对象中(null和undefined除外)都会存在的属性，这个属性会指向该对象的原型(注意:__proto__因为浏览器兼容性问题,不一定都可以获取到，应当使用Object.getPrototypeOf函数作为获取对象原型的标准API)。在JavaScript 中，每个对象通过__proto__属性指向它的原型对象，这个原型对象又有自己的原型，直到某个对象的原型为 null 为止，这种一级一级的链结构就称为原型链。看下面这副图，通过打印构造函数中的teach方法，能够打印出结果。

2023-09-16 12:06:21 121

原创 JS 垃圾回收机制

在JavaScript中，垃圾回收（GarbageCollection）是一种自动内存管理机制，它可以自动地识别不再使用的变量和对象并将它们从内存中清除，以释放内存空间。JavaScript中的垃圾回收器会定期扫描内存中的对象，标记那些可达对象和不可达对象。1. 可达对象指的是当前代码中正在被使用的对象2. 不可达对象指的是已经不再被引用的对象。垃圾回收器会将不可达对象标记为垃圾对象，并将它们从内存中清除。

2023-09-15 20:58:00 207

原创 JS 深浅拷贝

深拷贝与浅拷贝在其它语言中也经常被提及到，在实际项目开发过程中也常常需要区分当前使用的到底是深拷贝还是浅拷贝，有时候在该使用深拷贝的地方，我们使用了浅拷贝，会导致深藏不露的bug。

2023-09-15 15:32:43 106

原创 JS for...in 和 for...of 的区别？

for...in和for...of都是JavaScript中遍历数据的方法，让我们来了解一下他们的区别。使用 for…in 迭代对象的属性名，适用于对象。使用 for…of 迭代集合的值，适用于数组、字符串等可迭代对象。在迭代数组时，通常使用 for…of 而不是 for…in，因为 for…in 可能会迭代到数组的原型链上的属性，而for…of 不会。在迭代对象属性时，可以使用 hasOwnProperty方法来检查属性是否是对象自身的属性，以避免迭代到继承的属性。

2023-09-14 21:24:50 171

原创处理数据根据 pid 添加到父级 children

【代码】处理数据 pid 找父级 children。

2023-09-14 17:24:41 147

原创 JS Set和Map数据结构

前言：如果要用一句来描述，我们可以说Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构什么是集合？什么又是字典？集合区别？

2023-09-14 15:54:14 209

原创 JS Array 操作方法合集

1.当reduce（）方法的第二个值为空时，第一次循环方法中的第一个参数（prev）为数组的第一项值，第二个参数（cur）为数组的第二项值，反之，第一次循环方法中的第一个参数（prev）为reduce的第二个参数值，第二个参数（cur）为数值的第一项值。它们都返回一个遍历器对象，可以用for…flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

2023-09-13 22:18:14 119

空空如也

空空如也