- 博客(47)
- 收藏
- 关注
RSS订阅原创 客户端性能优化实践
双十一大促时，客户客服那边反馈商品信息加载卡顿，在不断有订单咨询时，甚至出现了商品信息一直处于加载状态的情况，显然，在这种高峰期接待客户时，是没法进行正常的接待工作的。起初，页面一直处于加载状态，初步认为是后端接口返回太慢导致，后经过后端日志排查，发现接口返回很快，根本不会造成页面一直处于加载状态，甚至出现卡死的状态。后经过不断排查，发现是客户端性能问题导致。
2023-11-18 16:52:56
1364
原创 一文带你彻底弄懂js事件循环（Event Loop)
javaScript事件循环是一种用于管理和调度异步代码执行的机制。它的核心思想是通过执行栈、任务队列和事件触发来实现异步编程。
2023-10-30 22:05:49
271
原创 nextjs-一个基于React的全栈框架
例如，创建一个名为 posts/[id].tsx 的文件，它的路径可以是 /posts/1、/posts/2 等，访问不同的路径时会根据参数的不同渲染对应的页面组件。你可以在 Next.js 的 pages 目录下创建一个文件，文件的路径就是路由的路径，文件的内容就是对应的页面组件。例如，如果你想创建一个处理 /api/users 路径的接口，你可以在 pages/api 目录下创建一个名为 user.ts 的文件。Next.js的目标是简化React应用程序的开发流程，并提供更好的性能和开发体验。
2023-10-19 19:43:56
4874
原创 探讨基于@umijs/plugin-qiankun搭建的微应用的父子应用通讯方式
承接上篇文章（如何使用@umijs/plugin-qiankun搭建微前端项目）后续，下面我们探讨一下父子应用通讯的几种实现方式。
2023-06-21 16:12:31
480
原创 如何使用@umijs/plugin-qiankun搭建微前端项目
umijs/plugin-qiankun是一个基于UmiJS框架的插件，用于实现乾坤微前端架构。乾坤微前端是一种前端架构模式，可以将一个大型的前端应用拆分成多个小型的子应用，每个子应用可以独立开发、独立部署、独立运行，同时可以通过乾坤框架进行整合和协同工作。@umijs/plugin-qiankun插件提供了一些工具和API，可以帮助开发者快速搭建乾坤微前端架构，包括：子应用注册：可以通过插件提供的API将子应用注册到乾坤框架中。子应用路由：可以通过插件提供的API设置子应用的路由信息。
2023-06-20 19:02:54
1121
原创 浅谈乾坤JS隔离的三种机制（快照沙箱、两种代理沙箱）
从上面的代码可以看出，ProxySandbox不存在状态恢复的逻辑，因为所有的变化都是沙箱内部的变化，和window没有关系，window上的属性自始至终都没有受到过影响。支持多应用的代理沙箱则可以为每个微应用创建一个独立的沙箱环境，避免了多个应用之间的状态混乱问题。支持多应用的代理沙箱则可以支持多个微应用同时运行，因为它可以为每个微应用创建一个独立的沙箱环境，避免了多个应用之间的状态混乱问题。同时，支持多应用的代理沙箱也不需要遍历window上的所有属性，因为它只会代理微应用需要的属性，从而提高了性能。
2023-05-14 16:29:46
2288
原创 火爆全网的ChatGPT竟然这么厉害
教育市场：Chat GPT作为一种人工智能技术，能够支持教育机构开发在线智能教学系统，并且通过对学生数据的分析和学习行为的预测，提高学习效率和体验，因此，在教育市场中也有非常广阔的应用前景。序列生成：Chat GPT基于序列生成技术，使用输入的上下文文本预测下一个单词，然后将下一个单词作为上下文的一部分，预测下一个单词，依次进行下去，以生成符合上下文和语义规则的自然语言对话。技术挑战：Chat GPT需要强大的计算能力和大量的数据支持，同时对算法和模型的不断优化也需要高水平的技术支持。
2023-03-28 15:17:23
5738
原创 如何巧妙处理后端一次性返回10万条数据
举例原来的数据是：[1,2,3,4,5,6,7,8],对该数据进行分堆（一堆3个），分堆之后是一个二维数组，[ [1,2,3], [4,5,6], [7,8]]如果前端直接把这10万条数据渲染到页面上，毫无疑问，我们的页面肯定会卡死，所以这种方案肯定是不可取的，那么我们该如何解决呢？除了以上方案之外，还可以使用滚动加载数据（滚动底部，加载一堆），以及虚拟列表处理等方式。2.比如一次截取10条数据，头一次截取0-9，第二次截取10~19等固定长度的截取。2.假设一堆存放10条数据，那么十万条数据就有一万堆。
2023-03-27 17:20:57
2980
1
原创 节流还在用JS吗？CSS也可以实现哦
函数节流是一个我们在项目开发中常用的优化手段，可以有效避免函数过于频繁的执行。为什么需要节流呢，因为触发一次事件就会执行一次事件，这样就形成了大量操作dom,会出现卡顿的情况。的变化，每次点击时让这个动画重新执行一遍，在整个执行过程设置的时间范围内一直处于。我们可以使用css的pointer-events禁用点击事件对事件进行控制。使用pointer-events实现一个动画，从禁用到可点击。假设一个按钮，连续点击按钮就会一直触发事件。的状态，这是不是就有点像节流的功能。可以这样理解，一个CSS动画从。
2023-03-17 17:49:37
3120
1
原创 彻底弄懂图片懒加载及底层实现原理
思路：给图片一个src属性存储一个加载动画的图片，data-src存储真实的图片，在图片每一进入可视区域的时候先加载加载动画的图片，等真正进入可视区域再加载真实图片。思路：只需要获取img元素相对于视口的顶点位置rectObject.top，只要这个值小于浏览器的高度window.innerHeight就说明进入可视区域。说明图片已经在视野范围内了，可以加载图片，下面是具体的代码实现。当元素相对于文档顶部的高度
2023-01-31 15:59:36
379
原创 javascript封装一个单向链表
toString() 由于链表项使用了 Node 类，就需要重写继承自 JavaScript 对象默认的 toString 方法，让其只输出元素的值。单向链表类似于火车，有一个火车头，火车头会连接一个节点，节点上有乘客，并且这个节点会连接下一个节点，以此类推。isEmpty() 如果链表中不包含任何元素，返回 trun，如果链表长度大于 0 则返回 false。indexOf(element) 返回元素在链表中的索引。insert(position, element) 向链表的特定位置插入一个新的项。
2023-01-31 10:21:45
275
原创 js实现数组去重的几种方式
注意了，该方法对于NaN也是有效的哦，虽然NaN与NaN不是恒等的，但在set里面认为NaN与NaN相等。当我们看到这个数组的时候，你第一反应是不是采用set呢，当然，针对该数组可以。2.利用includes + forEach方法实现。5.利用对象实现，其方法和Map()差不多。好了，今天的分享就到这里！列：下面是一个简单的数组。4.利用reduce去重。3.利用Map()实现。
2023-01-30 19:54:20
73
原创 taro创建项目，环境配置以及打包踩坑记录
最近，公司要做一个新项目，需要同时适配小程序和h5。显然，针对不同的端去编写两套代码的成本太高，这时候就需要寻找一个能够适配多端的开放式框架，而taro正好满足这一需求，因此我选择了使用taro来创建项目，别看官方文档写的多好，当你进行使用的时候，会发现一堆坑。好了，废话不多说，下面就来看看我一路踩的坑。首先，根据官方文档使用taro init my-app 初始化了一个项目，开发框架我选择的是React，下载好项目之后就进行环境配置，taro脚手架安装// 使用npm安装taro install
2021-04-15 10:57:15
4409
原创 JS高级-简单易懂的原型与原型链之（_ _proto_ _与prototype关系）
在讲解之前先记住几个关键点：1.所有的实例对象都有一个_ proto 属性（即隐式原型)2.所有的构造函数都有一个prototype属性（即显示原型)3.实例对象的 proto _属性指向它的构造函数的prototype属性下面创建一个Fn构造函数：function Fn(){ this.method1 = function(){ console.log('method1') }}var fn = new Fn()在这个例子中，fn是Fn的实例，因此fn._ proto _ ===
2021-02-22 17:08:30
138
原创 JS高级之prototype的使用
1.prototype的介绍每个函数都有一个prototype属性，默认指向一个Object空对象(原型对象)原型对象中有一个constructor,指向函数对象下面是一个例子： function People(name,age){ this.name = name; this.age = age; }如果要添加一个新的属性需要在构造函数里面添加，比如要添加一个sex属性 function People(name,age){ this.name = name;
2021-02-20 14:51:09
1557
原创 react-hooks之useImperativeHandle使用详解
useImperativeHandle可以通过使用ref时自定义暴露给父组件的实列值，并配合forwardRef一起使用下面是一个简单的例子暴露给父组件一个属性值效果如下该钩子函数还有第三个参数，如果里面涉及到某个变化的值，只有当第三个参数发生改变时，父组件接收到的该值才会发生改变代码如下所示：先点击setCount按钮加到7，然后点击“获取子组件暴露给父组件的东西”按钮，此时打印出的count还是初使状态的0，只有点击了setNum按钮，（也就是说当num发生改变当时候），再次点击“获取
2020-08-09 19:45:02
6163
6
原创 react之forward与useRef的使用简单详解
forwardRef用于创建一个组件，该组件可通过ref属性转发到另一个组件中下面给一个列子便可了解其使用方法定义一个子组件定义一个父组件打印出的效果如下由此可见，给子组件某一元素添加了ref属性之后，父组件结合useRef，调用其.current便可获得该元素。...
2020-08-09 17:51:01
1565
原创 react-hooks之useMemo与useCallback使用详解--（上篇）
介绍：当父组件引入子组件以及在更新某一个值的状态的时候，往往会造成一些不必要的浪费，而useMemo和useCallback的出现就是为了减少这种浪费，提高组件的性能，不同点是：useMemo返回的是一个缓存的值，即memoized 值，而useCallback返回的是一个memoized 回调函数。useMemo使用解析：如上图所示，点击按钮之后，虽然count值改变了，但保存在useMemo里面的count还是最初的count值，这就类似与javascript的一种缓存技术，那么，怎么样才会改
2020-07-26 21:58:32
1121
1
原创 vue+bootstrap制作简易表格的添加、删除与搜索
所用到的技术vue+bootstrap效果图如下代码如下所示<!DOCTYPE html><html><head> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <...
2019-08-03 18:07:08
723
原创 es6之扩展运算符
在es6以前，如果我们要把两个数组拼接到一起，通常是使用数组的concat方法，比如const a = ['Jelly', 'Bob', 'Helen'];const b = ['James', 'Adrew', 'John'];const c = a.concat(b);console.log(c);// ['Jelly', 'Bob', 'Helen', 'James', 'Adr...
2019-07-24 22:38:52
208
原创 es6之剩余参数
function sum(...numbers) { console.log(numbers); // [1, 2, 3, 4]}sum(1, 2, 3 , 4)可以看出numbers是一个数组，并且其原型也是一个数组，因此可以使用数组的一切方法剩余参数有两个常见的应用第一种，汇率计算function converCurrency(rate, ...amounts) { re...
2019-07-23 22:48:35
124
原创 es6之数组的几种新方法
这些知识点不常用到，写这个的目的是为了方便以后的复习，之后有什么项目需要用到该知识点的，便于在这里进行查询。.find()查找数组当中满足某一个条件的元素该方法接受三个参数find(element, index, array)找到了符合条件的第一个元素时就会立马返回，而不会执行后面的操作，与forEach相比有一定的优势，与for of相比语法更加简单清晰const inventory ...
2019-07-23 22:13:37
385
原创 js中的几种循环总结
比如：const fruits = ['apple', 'orange', 'strawberry', 'grape'];第一种，for循环for(let i = 0; i < fruits.length; i++) { console.log(fruits[i]); // apple orange strawberry grape}第二种，forEach循环frui...
2019-07-14 10:38:10
374
原创 es6之模板字符串
es6出现之前，字符串的拼接特别麻烦，但自从有了es6之后，这一切问题都变得简单了。虽然之前也用过es6的模板字符串，但从来没有好好整理一下，现在整理笔记，也方便以后复习。模板字符串用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。比如下面这样。...
2019-07-13 22:35:27
162
原创 vue实现一个任务计划表
效果图如下所示：需要用到的指令：条件渲染 v-show根据表达式之真假值，切换元素的 display CSS 属性当条件变化时该指令触发过渡效果v-model在表单控件或者组件上创建双向绑定v-bind缩写:动态地绑定一个或多个特性，或一个组件 prop 到表达式v-on缩写@绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰...
2019-06-02 16:45:54
2712
9
原创 bootstrap制作一个优美的导航栏
制作这个导航栏需要知道导航栏是bootstrap网站的一个突出特点。导航栏在移动设备的视图中是折叠的，随着可用视图的增加，导航栏也会水平展开。实例如下所示：<!DOCTYPE html><html><head> <title></title><link rel="stylesheet" type="text/css" ...
2019-04-22 21:56:28
9782
1
原创 JS具有代表性的题-this的理解
第一题：这是一道典型的对象调用函数，谁调用的,this就指向谁，o.fn()此时this指向o,因此this.a即o.a,所以输出结果为2第二题fun()是一个典型的函数直接加圆括号，所以其上下文环境为window,里面的this.a=2; this指向window,相当于定义了一个全局变量a=2,第一次fun()返回了一个内层函数，第二个()也是典型的函数直接加(),所以上下文也是wi...
2019-04-13 23:15:16
125
原创 jquery实现手风琴
效果图：如下是我的代码：<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="keywords" cintent=""> <title>js之手风琴</title><style> body{margin:0;} b...
2019-04-13 19:42:38
354
原创 javascript之制作3d轮播图
如上图所示为一个3d轮播图的实例，如下我的代码里面有详细描述<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="keywords" content=""> <title>3d轮播图</title><style type=...
2019-04-12 19:57:19
345
原创 javascript-es6之深度克隆
在讲深度克隆之前，我们需要了解一些知识点：判断数据类型的方式：1、typeof返回的数据类型:String Number Boolean Undefined Object Function2、Object.prototype.toString.call(obj)拷贝数据：基本数据类型：拷贝后会生成一份新的数据，修改拷贝以后的数据不会影响原数据对象/数组:拷贝后不会生成新的数据，而且...
2019-04-10 21:08:27
1562
原创 es6之class类的理解
传统的javascript语言中，没有类的概念，生成示例对象是先定义一个构造函数，然后通过new操作符来完成。下面是一个列子。这种写法与传统的面向对象语言(c++ java)差异很大，对于刚学习这门语言的程序员来说，可能会感到困惑。因此，es6引入了class类这个概念，作为对象的模板，通过class关键字就可以定义类。1、构造函数实例注意：class定义类的时候，不需要写functio...
2019-04-08 21:15:37
1020
原创 css之二级菜单效果
在做之前需要了解的几个小知识点：a{text-decoration}去掉下划线float:left左浮动，把一级菜单水平显示list-style-type:删除小圆点display:none隐藏二级菜单display:block显示二级菜单好了，下面来看我们的代码吧<!DOCTYPE html><html><head> <title&g...
2019-03-22 21:14:14
540
原创 javascript之创意选项卡
我们都知道选项卡在js的学习过程中是必须要掌握的基本功能，下面我结合了css做了一个创意的选项卡，附上我的代码<!DOCTYPE html><html><head> <title></title><style type="text/css">#box{width: 500px;height:300px;backgr...
2019-03-20 23:12:11
128
原创 css3之制作旋转小风车
下面教大家做一个旋转小风车，所用知识与我上一篇的爱心特效有相似之处，大家可以看看我前面发的文章，好了，下面就展示我的代码吧<!DOCTYPE html><html><head> <title></title><style>*{margin:0;padding:0;}#box{width:400px;height:...
2019-03-02 22:24:40
556
原创 JavaScript经典案例水仙花数
水仙花数是指一个三位数，他的每个位上的数字的3次幂之和等于它本身。下面我将讲解如何用js做一个水仙花数，代码如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title><script type="text/ja
2019-03-02 16:19:35
2493
原创 css3之爱心表白动画特效
春天了，又到了告白的季节，你是不是还在苦恼不知如何向心中的她（他）表白心意呢，哈哈，下面我就教大家做一个爱心表白特效<!DOCTYPE html><html><head> <title></title><style>html{height: 100%;background: rgb(40,240,245);}.h...
2019-02-26 14:56:32
2730
原创 css3之鼠标移入显示所有内容
在做这个之前，我先介绍一下做这个需要用到的知识点：text-overflow属性text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition-property属性设置过渡动画所需操作的属性transition-duration属性设置过渡动画持续时间，单位s(秒)，也可以为小数，如：0.5秒transiti...
2019-02-21 16:30:04
4287
原创 css3之制作个性照片墙
在学习了css3之后，是不是觉得css3的功能竟然如此强大，话不多说，下面我就给大家讲讲如何利用css3制作一个个性化的照片墙。需要用到的知识：rotate()方法transform:rotate(度数)度数为正，表示元素相对原点中心顺时针旋转；度数为负，则表示元素相对原点中心进行逆时针旋转。结构伪类选择器：E：first-child 选择父元素的第一个子元素E：last-child...
2019-02-21 14:27:44
465
原创 JavaScript之多物体运动框架
列子：多个div,变宽，变高注：多物体运动框架中所有东西都不能公用<!DOCTYPE html><html><head> <title></title><style>div{width:200px;height:200px;background: yellow;margin:10px;float:left;bor...
2019-02-17 20:22:07
175
1
原创 JS之offsetWidth的一些小缺陷
在我前面发的一些文章中，大家可能经常看到我使用offsetWith offsetHeight offsetLeft等，今天这篇文章，我将讲一下offsetWidth的一些缺陷。在讲之前，做一个平时常用的物体变窄，代码如下：<!DOCTYPE html><html><head> <title></title><style&...
2019-02-17 15:30:52
970
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人