果冻OoO-CSDN博客

原创 JavaScript将数组对象从小到大排序

案例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head>.

2022-05-12 20:21:28 1628

原创 JavaScript从题学习——你真的了解indexOf吗？

案例：indexOf是可以传两个参数的，我们从查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数和['red', 'blue', 'red', 'green', 'pink','red'], 求 red 出现的位置和次数分别来看<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont

2022-05-11 11:31:08 1064

原创 JavaScript从题学习——预解析案例

前言从题中快速了解和复习下变量提升，函数提升，作用域链预解析案例答案在最后案例1 var num = 10; fun(); function fun() { console.log(num); var num = 20; } // 相当于执行了以下操作 // var num; // function fun() {

2022-05-11 11:21:25 366

原创前端动画——3D立方体盒子

前言学动画的时候看到的，很有意思，有兴趣可以看全文CSS 怎样写一个动画（从基础动画到3d动画)完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv

2022-05-10 12:27:01 538

原创前端动画——网页时钟

前言先了解一些基础知识，之后直接从案列中学习基础知识transition属性描述 CSS transition 简写属性，用于在一个属性中设置四个过渡属性。 3 transition-property 规定应用过渡的 CSS 属性的名称。 3 transition-duration 定义过渡效果花费的时间。默认是 0。 3 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease.

2022-05-10 11:57:22 402

原创 HTML5笔记——webSocket

什么是 WebSocketWebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，浏览器和服务器之间就形成了一条快速通道，用于双向数据的传输。现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每 1 秒），由浏览

2022-05-08 12:40:10 298

原创 HTML5笔记——web worker

什么是web workerMDN:用Web Workers，Web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务，从而允许主线程（通常是UI线程）不会因此被阻塞/放慢。Web Worker 可以使脚本运行在新的线程中，它们独立于主线程，可以进行大量的计算活动，而不会影响主线程的 UI 渲染。当计算结束之后，它们可以把结果发送给主线程，从而形成了高效、良好的用户体验。Web Worker 是一个统称，具体可以细分为普通的 Worker、S

2022-05-08 12:30:00 456

原创 HTM5笔记——地理位置

前言在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 LBS (Location Base Service)。隐私HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。获取地理信息的方式1、IP地址2、三维坐标：（1）GPS（Global Positioning System，全球定位系统）。目前世界上在用或在建的第2代全球卫星导航系

2022-05-08 10:45:23 381

原创 HTML5笔记——canvas资源

Canvas 保姆级教程（上）：绘制篇 - 掘金Canvas 保姆级教程（下）：动画篇 - 掘金Canvas 进阶（一）二维码的生成与扫码识别 - 掘金Canvas 进阶（二）写一个生成带logo的二维码npm插件 - 掘金Canvas 进阶（三）ts + canvas 重写”辨色“小游戏 - 掘金Canvas 进阶（四）实现一个“刮刮乐”游戏 - 掘金Canvas 进阶（五）实现图片滤镜效果 - 掘金Canvas 进阶（六）实现图片压缩功能 - 掘金...

2022-05-07 17:24:50 373

原创 HTML5笔记——拖拽

一、拖拽元素页面中设置了 draggable="true" 属性的元素。draggable 属性用来定义元素是否可以拖动该属性有true、false两个值，默认是false属性是true时可以拖动，反之不能要想真正实现拖动功能，必须与JavaScript结合使用。拖拽元素的事件监听：（应用于拖拽元素） ondragstart当拖拽开始时调用 ondragleave 当鼠标离开拖拽元素时调用 ondragend 当拖拽结束时调用 ondrag 整个拖拽.

2022-05-07 16:23:28 2212

原创 HTML5笔记——新规范和新元素

一、Html5优势跨平台:唯一一个通吃PC MAC Iphone Android等主流平台的跨平台语言快速迭代降低成本导流入口多分发效率高二、新的 DOCTYPE和字符集（1）头部申明<!DOCTYPE html> 声明一般位于文档的第一行，它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式

2022-05-07 15:54:03 630

原创 Javascript全局函数和全局变量

全局变量Infinity代表正的无穷大的数值。 NaN指示某个值是不是数字值。 undefined指示未定义的值。全局函数decodeURI()解码某个编码的URI。 decodeURIComponent()解码一个编码的URI组件。 encodeURI()把字符串编码为 URI。 encodeURIComponent()把字符串编码为URI组件。 escape()对字符串进行编码。 eval()计算JavaScript字符串，并把它作为脚本代码来执行...

2022-04-28 20:54:56 144

原创重学webpack5——生产环境配置

前言生产环境是能让代码优化上线运行的环境，有些操作在开发环境来做比较多余，我们在生产环境来配置。本文会从文件内容的角度出发，介绍CSS、JS、HTML的文件提取、兼容性处理和压缩。一、CSS文件（1）提取css 成单独文件下插件包npm i mini-css-extract-pluginwebpack配置const { resolve } = require("path");const HtmlWebpackPlugin = require("html-webpack

2022-04-23 20:23:57 1763

原创重学webpack5——开发环境配置

一、创建配置文件跟前面一样，先创建npm initnpm i webpack webpack-cli -D创建webpack配置文件webpack.config.js作用：指示webpack干哪些活（当你运行webpack指令时，会加载里面的配置）所有构建工具都是基于node.js平台运行的，模块化默认采用commonjs...

2022-04-23 14:12:33 583

原创重学webpack5——webpack初探

一、什么是webpackwebpack 是前端的一个资源构建工具，一个静态模块打包器；在 webpack 看来，前端的所有资源文件(js/json/css/less/scss/img...)都是一个个模块； webpack 会根据资源的依赖关系生成一个依赖关系图，再打包成对应的静态资源bundle。二、五大核心概念入口 - Entry入口(Entry)是 webpack 分析构建内部依赖图的起点模块(模块就是一个文件)。出口 - Outputoutput 属性告诉 webp.

2022-04-22 21:52:29 1426

原创骨架屏原理——面试别再被挨打了

前言同样是之前练手项目中的，emmm,知道干嘛用的，没了解过具体原理，面试时加上紧张😓，那简直被吊打的感觉，现在来先初步总结一波，后面有时间再配上资源骨架屏是什么同样的，首先遇到的问题是什么呢？现在的前端开发领域，都是前后端分离，首先我们拿到数据后，页面渲染以及等待的白屏时间，成为我们需要解决的问题点；而且大项目，这个问题尤为突出。webpack可以实现按需加载，减小我们首屏需要加载的代码体积；再配合上 CDN 以及一些静态代码（框架，组件库等等…）缓存技术，可以很好的缓解这个加载渲染的时间过长

2022-04-14 14:45:44 9026

原创总结下Promise，好记性不如烂笔头

目录Promise 的介绍和优点Promise 对象的用法和状态使用 Promise 的基本步骤promise 对象的 3 个状态Promise 的方法实例方法then()catch()finally()静态方法Promise.resolve()Promise.reject()Promise.all()Promise.race()还有些其他的Promise 链式调用（封装多个接口）手写promise几个注意点Promise ..

2022-04-13 17:09:01 770

原创 Vuex持久化原理——不担心刷新后数据没了

前言同样是发现问题，解决问题的角度我们来分析，首先我们遇到了什么问题呢？就是当我们对数据增删改查之后，刷新页面，咦，我们刚才操作的数据不见了。那么怎么去解决问题呢？首先想到的是把数据存储起来呗，非常聪明，我们就是这么干的。那我们下面来看一看。一、本地存储在localStorage或sessionStorage或其它存储方式中取值,这里我们不结合Vuex来看，举个简单的例子，经典案例TodoList，这里我们使用localStorage先了解一下基础知识生存期localStorag

2022-04-10 21:18:36 2558

原创 Vue3——封装组件数据懒加载

原理和图片懒加载差不多，目的是实现当组件进入可视区域再加载数据。这里使用 @vueuse/core 中 useIntersectionObserver 函数来实现监听进入可视区域的范围，但必须配合vue3.0的组合API方式来实现可以先看下面这篇文章了解下IntersectionObserver图片懒加载，原理你可一定要会_果冻OoO的博客-CSDN博客大致步骤：理解useIntersectionObserver的使用，各个参数的含义改造 home-new 组件成为数据懒加载，掌..

2022-04-10 19:20:19 1687

原创图片懒加载，原理你可一定要会

前言：面试时碰到了这个问题，之前练手项目的时候用过，但没有深入了解其底层原理，所以面试结果应该只能唱一首凉凉了，现做一个总结，后面继续加油，也希望大家吸取教训懒加载是什么？懒加载肯定重点突出一个‘懒’字，我们来从发现什么问题，然后怎么解决去解决的角度来看首先是有什么问题呢？在我们访问一个图片展示比较多的网页时，加载速度慢很多时候正是因为图片多导致，大量的img图片导致页面渲染的堵塞。当费了许多力气把全部图片和页面加载出来时而用户早已离去。另一方面，若用户只查看了网页的前面部分便离开，许多已经

2022-04-10 17:19:51 2159

原创 Ajax知识点总结、不用再找其他资源的总结

一、Ajax 的概念在浏览器中，我们可以在不刷新页面的情况下，通过 Ajax 的方式去获取一些新的内容。Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：XMLHttpRequest。相关了解资源链接看这一篇就够了！-Ajax详解二、Ajax 原理（发送 Ajax 请求的五个步骤）其实也就是使用 XMLHttpRequest 对.

2022-03-18 16:19:34 804

原创手撕JS——函数柯里化

介绍在数学和计算机科学中，柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。通俗易懂的解释：用闭包把参数保存起来，当参数的数量足够执行函数了，就开始执行函数。我们就拿被做了无数次示例的add函数，来做一个简单的实现。// 普通的add函数function add(x, y) { return x + y}// Currying后function curryingAdd(x) { return function (y) {

2022-03-15 14:52:39 248

原创手撕JS——节流throttle

节流（throttle）:不管事件触发频率多高，只在单位时间内执行一次。既该事件不会重复触发，与防抖最大的区别

2022-03-15 11:42:18 1547

原创手撕JS——防抖debounce

由来以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。1. window对象的resize、scroll事件2. 拖拽时的mousemove事件3. 射击游戏中的mousedown、keydown事件4. 文字输入、自动完成的keyup事件实际上对于window的resize事件，实际需求大多为停止改变大小n毫秒后执行后续处理；而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了debounce和throttle两

2022-03-14 21:29:12 320

原创浏览器原理与常用协议总结

一、HTTP什么是HTTP?超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。多路复用多路复用：通过单一的HTTP/2连接请求发起多重的请求-响应消息，多个请求stream共享一个TCP连接，实现多留并行而不是依赖建立多个TCP连接。HTTP报文格式也可以用请求行，请求头，请求体的说法。http.

2022-03-09 21:46:48 2420

原创算法总结——JS实现回溯

一、回溯定义百度百科回溯算法实际上一个类似枚举的搜索尝试过程，主要是在搜索尝试过程中寻找问题的解，当发现已不满足求解条件时，就“回溯”返回，尝试别的路径。回溯法是一种选优搜索法，按选优条件向前搜索，以达到目标。但当探索到某一步时，发现原先选择并不优或达不到目标，就退回一步重新选择，这种走不通就退回再走的技术为回溯法，而满足回溯条件的某个状态的点称为“回溯点”。许多复杂的，规模较大的问题都可以使用回溯法，有“通用解题方法”的美称。其他从解决问题每一步的所有可能选项里系统选择出一个可行的解决方案

2022-03-07 11:31:34 1920

原创 Js实现二叉树的递归遍历和迭代遍历

目录一、前序遍历（1）递归实现（2）迭代实现二、中序遍历（1）递归实现（2）迭代实现三、后序遍历（1）递归实现（2）迭代实现一、前序遍历对应144.二叉树的前序遍历（1）递归实现首先我们需要了解什么是二叉树的前序遍历：按照访问根节点——左子树——右子树的方式遍历这棵树，而在访问左子树或者右子树的时候，我们按照同样的方式遍历，直到遍历完整棵树。因此整个遍历过程天然具有递归的性质，我们可以直接用递归函数来模拟这一过程。/** * Defin..

2022-03-03 11:43:27 1168

原创算法总结——JS实现递归

一、递归定义百度百科：递归，就是在运行的过程中调用自己。函数嵌套调用过程示例构成递归需具备的条件：1. 子问题须与原始问题为同样的事，且更为简单；2. 不能无限制地调用本身，须有个出口，化简为非递归状况处理。其他：递归是一种解决问题的有效方法，在递归过程中，函数将自身作为子例程调用。你可能想知道如何实现调用自身的函数。诀窍在于，每当递归函数调用自身时，它都会将给定的问题拆解为子问题。递归调用继续进行，直到到子问题无需进一步递归就可以解决的地步。为了确保递归函数

2022-03-02 18:24:42 3172

原创 JS实现各种常用排序

一、插入排序插入排序有直接插入排序，折半插入排序，希尔排序，这里只实现常用的直接插入排序直接插入排序思想将左侧序列看成一个有序序列，每次将一个数字插入该有序序列。插入时，从有序序列最右侧开始比较，若比较的数较大，后移一位。function insertSort(array) {//第一个默认已经排好 for (let i = 1; i < array.length; i++) { let target = i; for (..

2022-02-23 17:08:36 4943

原创 XMLHttpRequest Level2的新特性

目录1、设置HTTP请求时限2、FormData对象管理表单数据3、上传文件（1）定义UI结构（2）验证是否选择了文件（3）向FormData中追加文件（4）使用 xhr 发起上传文件的请求（5）监听onreadystatechange事件4、显示文件上传进度（1）导入需要的库（2）基于Bootstrap渲染进度条（3）监听上传进度的事件（4）监听上传完成的事件旧版XMLHttpRequest的缺点只支持文本数据的传输，无法用来读取和上传...

2021-12-27 16:48:36 479

原创 Less知识点总结

一、Css预处理器和Less基本介绍CSS预处理器之Less详解CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。市面上有很多CSS预处理器可供选择，且绝大多数CSS预处理器会增加一些原生CSS不具备的特性，例如代码混合，嵌套选择器，继承选择器等。这些特性让CSS的结构更加具有可读性且易于维护。Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。Less是一个CSS预处理器, Less文件后缀是.less 扩充了 CS

2021-12-27 14:25:26 444

原创 Bootstrap入门及快速复习

一、UI框架的作用UI框架概念将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。作用基于框架开发，效率高，稳定性高。二、BootStrap简介Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。中文官网: https://www.bootcss.com/为什么要使用bootstrap众所周知bo

2021-12-24 18:26:25 925

原创最新Flex（弹性）布局总结

一、基本介绍Flex布局/弹性布局：是一种浏览器提倡的布局模型布局网页更简单、灵活避免浮动脱标的问题作用基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。 Flex布局非常适合结构化布局设置方式父元素添加 display: flex，子元素可以自动的挤压或拉伸组成部分弹性容器弹性盒子主轴侧轴 / 交叉轴二、主轴对齐方式修改主轴对齐方式属性: justify-content属性 .

2021-12-24 15:32:37 459

原创 Vue3知识点资源总结

前言前端知识点太多了，学了Vue2再学Vue3真是让人泪流满面，Vue3还在不断更新中，这里先不自己总结了，以后有时间再来，贴出我看的一些资源地址。【Vue】带你快速上手Vue3 - 使用 - Composition API - 响应式原理 - 新特性项目笔记，前面也讲了Vue3vue3前置3.2新特性 script setup 真香，这也是我不想写笔记的原因，真简单很多Vue3.2 新特性详解——＜script setup＞和＜style＞ v-bind...

2021-11-26 14:34:59 311

原创 ES6常见知识点总结

目录前言1.1块级作用域1.1.1 什么是变量作用域1.1.2 没有块级作用域造成的问题1.2 const的使用1.3 ES6的增强写法1.3.1 ES6的对象属性增强型写法1.3.2 ES6对象的函数增强型写法1.4 箭头函数1.4.1 认识箭头函数1.4.2 箭头函数的参数和返回值1.4.3 箭头函数的this使用1.5高阶函数1.5.1 filter过滤函数1.5.2 map高阶函数1.5.3 reduce高阶函数1.5.4综合使用

2021-11-25 15:51:39 944

原创 Vue路由知识点总结

路由理解：一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。前端路由：key是路径，value是组件。一、基本使用安装vue-router，命令：npm i vue-router 应用插件：Vue.use(VueRouter) 编写router配置项: //引入VueRouterimport VueRouter from 'vue-router'//引入Luyou 组件impo..

2021-11-24 21:45:27 577 2

原创 Vuex知识点总结

目录前言一、vuex是什么何时使用？二、状态自管理应用多组件共享状态的问题原理图三、搭建vuex环境四、基本使用五、getters的使用六、四个map方法的使用七、模块化+命名空间前言好久没自己写笔记了，还是自己动手总结下记忆点比较深，今天我们来学习一下vuex一、vuex是什么官网里：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发...

2021-11-19 16:05:08 306

原创 JavaScript：Dom知识点总结

目录一、DOM简介二、HTML DOM 树形结构:三、DOM 节点节点类型节点父、子和同胞（1）父级节点（2）子节点childNodes（3）子节点children（4）子节点first和last（5）兄弟节点四、DOM对象1、查找 HTML 元素常用方法（1）get方法（2）querySelector 和 querySelectorAll（3）获取特殊元素（body，html）2、事件基础（1）事件概述（2）事件三要素（.

2021-07-21 17:25:17 1028

原创 JavaScript：Date对象和Math对象常用知识点总结

目录一、Date对象（1）Date简介（2）创建指定日期和时间的Date对象二、Math对象一、Date对象（1）Date简介在JavaScript中，Date对象用来表示日期和时间。要获取系统当前时间，用：var now = new Date();now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)now.getFullYear(); // 2015, 年份now.getMonth(); // 5, 月份，注

2021-07-08 15:42:21 166

原创 JavaScript:Array对象知识点总结

一、数组简介数组对象是使用单独的变量名来存储一系列的值。JavaScript的Array可以包含任意数据类型，并通过索引来访问每个元素。var stars = array();stars[0] = "Jay";stars[1] = "Huahua";stars[2] = "JJ";var stars = Array("Jay","Huahua","JJ");var stars = ["Jay","Huahua","JJ"];要取得Array的长度，直接访问length..

2021-07-08 14:26:09 157

空空如也

空空如也