![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
文章平均质量分 58
南风number
好记性不如烂笔头
展开
-
前端路由的实现原理
前端路由实现原理原创 2024-04-22 09:38:02 · 403 阅读 · 0 评论 -
vue实现 图片拖拽及鼠标滚轮放大缩小
vue实现 图片拖拽及鼠标滚轮放大缩小。原创 2023-08-01 21:50:38 · 1476 阅读 · 0 评论 -
js监听dom元素变化
有了他我们可以更直接,更全面的监听到包括echarts元素的大小变化,而不是依赖浏览器窗口的变化了。在他出现之前,我们更新 echarts图表尺寸变化 都是监听的 window.onresize。今天在这里介绍一个js API的用法 ResizeObserver。原创 2023-06-10 15:11:34 · 299 阅读 · 0 评论 -
5分钟使用( WebSocket)创建一个简单聊天
5分钟使用( WebSocket)创建一个简单聊天原创 2023-05-25 16:02:50 · 127 阅读 · 0 评论 -
20 个 JS 工具函数助力高效开发
日常开发中,面对各种不同的需求,我们经常会用到以前开发过的一些工具函数,把这些工具函数收集起来,将大大提高我们的开发效率。原创 2023-05-06 09:42:17 · 500 阅读 · 0 评论 -
js 常用排序算法
选择排序是一种简单易懂的排序算法。它的基本思想是遍历整个列表,每次找出最小的元素,并且将它移到列表的最左边,重复这个过程直到整个列表都有序排列。在平均情况下,选择排序的时间复杂度为 O(n^2),在最坏情况下与最好情况下都为 O(n^2)。选择排序在数据规模较小时非常适用,在数据规模较大时不够高效。插入排序是一种简单而直观的排序算法,它可以快速地对部分有序的数组进行排序。插入排序通过比较相邻的元素并在需要时将其交换,来实现从小到大的排列。原创 2023-05-08 17:03:37 · 2697 阅读 · 0 评论 -
vue3+threejs实现全景看房
Threejs全景看房原创 2023-02-10 10:52:56 · 1714 阅读 · 1 评论 -
threejs 学习五
threejs 学习五原创 2023-02-10 10:07:33 · 106 阅读 · 0 评论 -
threejs 学习四
threejs 学习四原创 2023-02-07 16:52:04 · 703 阅读 · 0 评论 -
threejs 学习一
threejs基础原创 2023-01-11 01:24:36 · 318 阅读 · 0 评论 -
threejs 学习三
BufferGeometry :是面片、线或点几何体的有效表述。包括顶点位置,面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销。MeshBasicMaterial:基础网格材质。一个以简单着色(平面或线框)方式来绘制几何体的材质。这种材质不受光照的影响。textureLoader:纹理加载器 可设置纹理的偏移、旋转、重复等。原创 2023-02-06 16:56:35 · 429 阅读 · 0 评论 -
three.js中 界面控制器 dat.gui 使用
three.js中 使用界面控制器 dat.gui原创 2023-02-04 11:25:24 · 553 阅读 · 0 评论 -
threejs 学习二
threejs基础原创 2023-02-02 09:52:08 · 188 阅读 · 0 评论 -
vue-echartsX轴鼠标悬浮上去显示全部文案
vue-echartsX轴鼠标悬浮上去显示全部文案,核心是js 非vue也同样逻辑原创 2022-10-27 19:02:15 · 1391 阅读 · 0 评论 -
JS事件循环
JS 引擎是单线程的,直白来说就是一个时间点下 JS 引擎只能去做一件事情,而 Java 这种多线程语言,可以同时做几件事情。JS 做的任务分为同步和异步两种,所谓 “异步”,简单说就是一个任务不是连续完成的,先执行第一段,等做好了准备,再回过头执行第二段,第二段也被叫做回调;同步则是连贯完成的。像读取文件、网络请求这种任务属于异步任务:花费时间很长,但中间的操作不需要 JS 引擎自己完成,它只用等别人准备好了,把数据给他,他再继续执行回调部分。如果没有特殊处理,JS 引擎在执行异步任务时,应该是存在等待的原创 2022-07-08 10:52:33 · 7109 阅读 · 2 评论 -
js 从原型链到继承
在面向对象编程中,继承是非常实用也非常核心的功能,这一切都基于面向类语言中的类。然而,javascript和面向类的语言不同,它没有类作为蓝图,javascript中只有对象,但抽象继承思想又是如此重要,于是聪明绝顶的javascript开发者们就利用javascript原型链的特性实现了和类继承功能一样的继承方式。要想弄清楚原型链,我们得先把原型搞清楚,原型可以理解为是一种设计模式。每个函数都会创建一个prototype属性,这个属性是一个对象,包含应该由特定引用类型的实例共享的属性和方法。实际上,这个对原创 2022-06-29 18:37:36 · 108 阅读 · 0 评论 -
js正则-梳理
构造函数:RegExp 对象表示正则表达式的一个实例:这两种方法的一大区别是对象的构造函数允许传递带引号的表达式,通过这种方式就可以动态创建正则表达式。通过这两种方法创建出来的 Regex 对象都具有相同的方法和属性:二、模式匹配1. 字符集合如果我们想匹配 bat、cat 和 fat 这种类型的字符串该怎么办?可以通过使用字符集合来做到这一点,用 [] 表示,它会匹配包含的任意一个字符。这里就可以使用/[bcf]at/ig:如果我们想要在字符串中匹配所有以 at 结尾的单词,最直接的方式是使原创 2022-06-15 19:07:49 · 1147 阅读 · 0 评论 -
基于token实现用户无感刷新的方案
import axios from axios // 是否正在刷新的标记let isRefreshing = false//重试队列let requests = []service.interceptors.response.use( response => { //约定code 409 token 过期 if (response.data.code === 409) { if (!isRefreshing) { isRefreshing =.原创 2022-03-25 14:05:30 · 178 阅读 · 0 评论 -
js常考手写面试题
一、promise1、实现promise.allfunction PromiseAll(promises){ return new Promise((resolve.reject)=>{ if(!Array.isArray(promise)){ throw new TypeError("promise must be an array") } let result = [] let count = 0 promises.forEach((promise,index)=原创 2021-12-31 14:58:15 · 646 阅读 · 0 评论 -
JavaScript优化技巧
1、多个条件判断//数组includes方法用来判断是否包含某个元素,如果是返回 true,否则false。// longhandif (student === "Tom" || student === "Jack" || student === "Shanguagua") { // business}// shorthandif (['Tom', 'Jack', 'Shanguagua'].includes(student)) { // business}2、If true …原创 2021-04-15 14:09:21 · 297 阅读 · 0 评论 -
JavaScript数组技巧
1、数组去重//1、from()方法(字符串或数值型数组的去重可以直接使用from方法。)var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];var uniquePlants = Array.from(new Set(plants)); console.log(uniquePlants); // [ 'Saturn', 'Earth', 'Uranus', 'Mercur原创 2021-04-15 13:54:50 · 92 阅读 · 0 评论 -
JavaScript常用方法封装1.0
封装一些JavaScript中常用的一些方法,比如输入一个值,返回其数据类型、数组去重、字符串去重、深拷贝 浅拷贝、reverse底层原理和扩展、圣杯模式的继承等等1、输入一个值,返回其数据类型function type(para) { return Object.prototype.toString.call(para)}2、数组去重function unique1(arr) { return [...new Set(arr)]}function unique2(arr) {原创 2021-04-15 13:30:41 · 128 阅读 · 0 评论 -
toFixed
function toFixed(number, m) { if (typeof number !== 'number') { throw new Error("number不是数字"); } let result = Math.round(Math.pow(10, m) * number) / Math.pow(10, m); result = String(result); if (result.indexOf(".") == -1) {原创 2021-03-15 08:42:54 · 103 阅读 · 0 评论 -
元素偏移量 offset系列
1.1 offset 概述offset 翻译过来就是偏移量,我们使用offset 系列相关属性可以动态的得到改元素的位置(偏移)、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度)注意:返回的数值都不带单位offset 系列常用属性:offset系列属性作用element.offsetParent返回作为该元素带有定位的父级元素 如果父级都没有定位则返回bodyelement.offsetTop返回元素相对带有定位元素上方的偏移elem原创 2021-01-13 16:53:03 · 1490 阅读 · 0 评论 -
js执行机制
js执行机制js是单线程JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所致------JavaScript是为处理页面中用户的交互,以及操作DOM而诞生的,比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务,这样导致的问题是:如果JS执行时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。同步和异原创 2020-12-24 19:49:22 · 334 阅读 · 0 评论 -
this指向问题
this指向问题this 指向问题 一般情况下this的最终指向是那个调用它的对象1.全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)console.log(this)function fn(){ console.log(this)}window.fn();window.setTimeout(function(){ console.log(this);},1000)2.方法调用中谁调用,this指向谁let o={ sa原创 2020-12-24 14:53:16 · 88 阅读 · 0 评论 -
BOM概述
BOM概述1.1 什么是BOMBOM(Browser Object Model) 即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window.BOM由一系列相关的对象构成,并且每个对象都提供了很多方法和属性。BOM缺乏标准,JavaScript 语法的标准化组织是ECMA,DOM的标准组织是W3C,BOM最初是Netscape浏览器标准的一部分。DOM文档对象模型DOM 就是把【文档】当作一个【对象】来看待DOM的顶级对象是documentDOM主要学习的原创 2020-12-23 09:54:11 · 1006 阅读 · 0 评论 -
原生js实现鼠标跟随
<!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><style> img {原创 2020-12-22 14:57:59 · 864 阅读 · 0 评论 -
DOM节点 节点概述 增删查改
节点概述一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性元素节点 nodeType 为1属性节点 nodeType 为2文本节点 nodeType 为3 (文本节点包含文字、空格、换行等)节点层级利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。1.父级节点 node.parentNodeparentNode 属性可以返回某节点的父节点 注意是最近的一个父节点如果指定的节点没有父节点则返回nu原创 2020-12-22 14:46:17 · 115 阅读 · 0 评论 -
js事件高级
1.注册事件(绑定事件)1.1 注册事件概述给元素添加事件,称为注册事件或者绑定事件注册事件有两种方式:传统方式和方法监听注册方式传统注册方式利用on开头的事件onclick<button οnclick=‘alert(‘hi!’)’>btn.οnclick=function(){}特点:注册事件的唯一性同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式w3c标准推荐方式addEventListener() 它是一原创 2020-12-22 14:44:50 · 230 阅读 · 0 评论 -
DOM重点核心
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。1、对于javaScript,为了能够使Javascript操作HTML,JavaScript就有了一套自己的dom编程接口。2、对于HTML、DOM使得html形成一颗DOM树,包含文档、元素、节点我们获取过来的DOM元素是一个对象(object),所以称为文档对象模型原创 2020-12-22 11:47:32 · 131 阅读 · 0 评论 -
js三种动态创建元素的区别
三种动态创建元素区别document.write()document.innerHTMLdocument.createEmelent()区别1、document.write 是将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面重绘2、innerHtml 是将内容写入某个DOM节点,不会导致页面全部重绘3、innerHTML 创建多个元素效率高(不要拼接字符串、采取数组形式拼接),结构稍复杂4、createElement() 创建多个元素效率稍低一点点,但是结构更清晰总结:不同浏原创 2020-12-22 10:06:49 · 119 阅读 · 0 评论 -
js实现简单发布留言版案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> textarea {原创 2020-12-22 09:21:00 · 591 阅读 · 0 评论 -
js动态生成表格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m原创 2020-12-22 09:19:18 · 178 阅读 · 0 评论 -
js 下拉菜单
<!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><style> .nav {原创 2020-12-21 15:59:10 · 1302 阅读 · 4 评论 -
js实现 全选和取消全选效果
<!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><style> * {原创 2020-12-21 14:13:08 · 1235 阅读 · 4 评论 -
js实现表格隔行变色
<!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><style> * {原创 2020-12-21 13:44:04 · 1147 阅读 · 0 评论 -
百度换肤效果
<!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><style> *{ m原创 2020-12-21 13:11:52 · 83 阅读 · 0 评论 -
原生选项卡实现思路
<!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><style> .tab {原创 2020-12-21 11:21:29 · 122 阅读 · 0 评论 -
判断一个字符串中出现次数最多的字符,并统计其次数
1、核心算法:利用 charAt() 遍历这个字符串2、把每个字符都存储给对象,如果对象没有该属性就为1,如果存了就+13、遍历对象,得到最大值及出现次数和该字符let str = "aozisodsdkksdsd" let obj = {} for (let i = 0; i < str.length; i++) { let chars = str.charAt(i) if (obj[chars]) {原创 2020-12-16 14:25:59 · 5017 阅读 · 0 评论