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>.
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
JavaScript从题学习——预解析案例 前言从题中快速了解和复习下变量提升，函数提升，作用域链预解析案例答案在最后案例1 var num = 10; fun(); function fun() { console.log(num); var num = 20; } // 相当于执行了以下操作 // var num; // function fun() {
前端动画——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
前端动画——网页时钟 前言先了解一些基础知识，之后直接从案列中学习基础知识transition属性 描述 CSS transition 简写属性，用于在一个属性中设置四个过渡属性。 3 transition-property 规定应用过渡的 CSS 属性的名称。 3 transition-duration 定义过渡效果花费的时间。默认是 0。 3 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease.
HTML5笔记——webSocket 什么是 WebSocketWebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，浏览器和服务器之间就形成了一条快速通道，用于双向数据的传输。现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每 1 秒），由浏览
HTML5笔记——web worker 什么是web workerMDN:用Web Workers，Web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务，从而允许主线程（通常是UI线程）不会因此被阻塞/放慢。Web Worker 可以使脚本运行在新的线程中，它们独立于主线程，可以进行大量的计算活动，而不会影响主线程的 UI 渲染。当计算结束之后，它们可以把结果发送给主线程，从而形成了高效、良好的用户体验。Web Worker 是一个统称，具体可以细分为普通的 Worker、S
HTM5笔记——地理位置 前言在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 LBS (Location Base Service)。隐私HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。获取地理信息的方式1、IP地址2、三维坐标：（1）GPS（Global Positioning System，全球定位系统）。目前世界上在用或在建的第2代全球卫星导航系
HTML5笔记——canvas资源 Canvas 保姆级教程（上）：绘制篇 - 掘金Canvas 保姆级教程（下）：动画篇 - 掘金Canvas 进阶（一）二维码的生成与扫码识别 - 掘金Canvas 进阶（二）写一个生成带logo的二维码npm插件 - 掘金Canvas 进阶（三）ts + canvas 重写”辨色“小游戏 - 掘金Canvas 进阶（四）实现一个“刮刮乐”游戏 - 掘金Canvas 进阶（五）实现图片滤镜效果 - 掘金Canvas 进阶（六）实现图片压缩功能 - 掘金...
HTML5笔记——拖拽 一、拖拽元素页面中设置了 draggable="true" 属性的元素。draggable 属性用来定义元素是否可以拖动该属性有true、false两个值，默认是false属性是true时可以拖动，反之不能要想真正实现拖动功能，必须与JavaScript结合使用。拖拽元素的事件监听：（应用于拖拽元素） ondragstart当拖拽开始时调用 ondragleave 当鼠标离开拖拽元素时调用 ondragend 当拖拽结束时调用 ondrag 整个拖拽.
HTML5笔记——新规范和新元素 一、Html5优势跨平台:唯一一个通吃PC MAC Iphone Android等主流平台的跨平台语言 快速迭代 降低成本 导流入口多 分发效率高二、新的 DOCTYPE和字符集（1）头部申明<!DOCTYPE html> 声明一般位于文档的第一行，它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式
Javascript全局函数和全局变量 全局变量Infinity代表正的无穷大的数值。 NaN指示某个值是不是数字值。 undefined指示未定义的值。全局函数decodeURI()解码某个编码的URI。 decodeURIComponent()解码一个编码的URI组件。 encodeURI()把字符串编码为 URI。 encodeURIComponent()把字符串编码为URI组件。 escape()对字符串进行编码。 eval()计算JavaScript字符串，并把它作为脚本代码来执行...
重学webpack5——生产环境配置 前言生产环境是能让代码优化上线运行的环境，有些操作在开发环境来做比较多余，我们在生产环境来配置。本文会从文件内容的角度出发，介绍CSS、JS、HTML的文件提取、兼容性处理和压缩。一、CSS文件（1）提取css 成单独文件下插件包npm i mini-css-extract-pluginwebpack配置const { resolve } = require("path");const HtmlWebpackPlugin = require("html-webpack
重学webpack5——开发环境配置 一、创建配置文件跟前面一样，先创建npm initnpm i webpack webpack-cli -D创建webpack配置文件webpack.config.js作用：指示webpack干哪些活（当你运行webpack指令时，会加载里面的配置）所有构建工具都是基于node.js平台运行的，模块化默认采用commonjs...
重学webpack5——webpack初探 一、什么是webpackwebpack 是前端的一个资源构建工具，一个静态模块打包器； 在 webpack 看来，前端的所有资源文件(js/json/css/less/scss/img...)都是一个个模块； webpack 会根据资源的依赖关系生成一个依赖关系图，再打包成对应的静态资源bundle。二、五大核心概念入口 - Entry入口(Entry)是 webpack 分析构建内部依赖图的起点模块(模块就是一个文件)。出口 - Outputoutput 属性告诉 webp.
骨架屏原理——面试别再被挨打了 前言同样是之前练手项目中的，emmm,知道干嘛用的，没了解过具体原理，面试时加上紧张😓，那简直被吊打的感觉，现在来先初步总结一波，后面有时间再配上资源骨架屏是什么同样的，首先遇到的问题是什么呢？现在的前端开发领域，都是前后端分离，首先我们拿到数据后，页面渲染以及等待的白屏时间，成为我们需要解决的问题点；而且大项目，这个问题尤为突出。webpack可以实现按需加载，减小我们首屏需要加载的代码体积；再配合上 CDN 以及一些静态代码（框架，组件库等等…）缓存技术，可以很好的缓解这个加载渲染的时间过长
总结下Promise，好记性不如烂笔头 目录Promise 的介绍和优点Promise 对象的用法和状态使用 Promise 的基本步骤promise 对象的 3 个状态Promise 的方法实例方法then()catch()finally()静态方法Promise.resolve()Promise.reject()Promise.all()Promise.race()还有些其他的Promise 链式调用（封装多个接口）手写promise几个注意点Promise ..
Vuex持久化原理——不担心刷新后数据没了 前言同样是发现问题，解决问题的角度我们来分析，首先我们遇到了什么问题呢？就是当我们对数据增删改查之后，刷新页面，咦，我们刚才操作的数据不见了。那么怎么去解决问题呢？首先想到的是把数据存储起来呗，非常聪明，我们就是这么干的。那我们下面来看一看。一、本地存储在localStorage或sessionStorage或其它存储方式中取值,这里我们不结合Vuex来看，举个简单的例子，经典案例TodoList，这里我们使用localStorage先了解一下基础知识生存期localStorag
Vue3——封装组件数据懒加载 原理和图片懒加载差不多，目的是实现当组件进入可视区域再加载数据。这里使用 @vueuse/core 中 useIntersectionObserver 函数来实现监听进入可视区域的范围，但必须配合vue3.0的组合API方式来实现可以先看下面这篇文章了解下IntersectionObserver图片懒加载，原理你可一定要会_果冻OoO的博客-CSDN博客大致步骤：理解useIntersectionObserver的使用，各个参数的含义 改造 home-new 组件成为数据懒加载，掌..
图片懒加载，原理你可一定要会 前言：面试时碰到了这个问题，之前练手项目的时候用过，但没有深入了解其底层原理，所以面试结果应该只能唱一首凉凉了，现做一个总结，后面继续加油，也希望大家吸取教训懒加载是什么？懒加载肯定重点突出一个‘懒’字，我们来从发现什么问题，然后怎么解决去解决的角度来看首先是有什么问题呢？在我们访问一个图片展示比较多的网页时，加载速度慢很多时候正是因为图片多导致，大量的img图片导致页面渲染的堵塞。当费了许多力气把全部图片和页面加载出来时而用户早已离去。另一方面，若用户只查看了网页的前面部分便离开，许多已经
关注
