- 博客(25)
- 资源 (9)
- 收藏
- 关注
RSS订阅原创 前端埋点数据上传的一些方式
也就是用户的行为，页面的性能，产品的异常。但是，这种方式也有缺点，那就是需要挂载到页面上，而反复操作dom会造成页面性能受影响，并且载入js/css资源还会阻塞页面渲染，影响用户体验，频繁上报是不适合这种方式的。目前最合适的数据上传方案是navigator.sendBeacon，不仅是异步的，而且不受同域限制，而且作为浏览器的任务，因此可以保证会把数据发出去，不影响页面卸载。但是，这种传统方式的请求埋点，一般会存在跨域的风险，并且他必须是同步的，否则会容易中断请求。
2023-05-06 23:30:00
968
原创 前端JavaScript之手写实现：发布订阅模式
发布订阅模式：发布订阅模式是软件开发者常见的一种设计模式。该模式中存在一个或多个发布者，一个或多个订阅者，当发布者发布消息时，参与订阅的订阅者就会收到相应的消息通知。
2023-04-11 00:11:11
744
原创 前端JavaScript之手写实现：观察者模式
观察者模式：当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知依赖它的对象。观察者模式属于行为型模式。
2023-04-10 23:58:51
341
原创 前端JavaScript之手写实现：防抖，节流
节流：一段时间后执行触发函数，期间无论触发多少次都不执行，直至完成该次触发函数。防抖：一段时间后执行触发函数，期间再次触发函数则将重新计算时间。
2023-04-09 04:54:30
260
原创 前端JavaScript之手写实现：apply，call，bind
三者都是改变函数的this指向，apply与call则是传递参数形式不同；apply和call是立即执行函数，bind则是需要调用执行。
2023-04-09 04:44:48
99
原创 浏览器本地存储策略之前端数据库： IndexedDB
常见存储方式主要有两种：cookie、webStorage（localStorage和sessionStorage），但它们不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。因此，我们可以使用前端数据库来实现。在浏览器上有两种数据库：webSQL和IndexedDB。
2023-04-09 04:38:30
843
原创 在JavaScript中我们如何实现class类的属性的访问限制呢？详解static，public，protected，private
在JavaScript中我们如何实现class类的属性的访问限制呢？
2023-03-30 22:31:45
993
原创 Electron 分享（入门，安装，打包）
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
2022-12-03 18:14:52
11636
7
原创 在Vue3项目中使用 Echarts 绘制股票图表的分享（五）：分时图的基础上绘制出五日图
绘制效果，我们可以发现：它多出了对这五天内的现价做个最高价和最低价的标注，并且对最新时间段的现价数据做个闪烁点+涟漪特效。现价中的闪烁点是使用带有涟漪特效动画的散点（气泡）图来实现的，它可以利用动画特效可以将某些想要突出的数据进行视觉突出。分析：五日图其实也就是展示了相当于五天的分时图的数据量；属性可以对图表的数据进行标注，借由该属性中的。我们可以在图表上标注出最高价和最低价。
2022-11-24 22:24:30
1695
1
原创 在Vue3项目中使用 Echarts 绘制股票图表的分享（四）：绘制分时图
根据前面的绘制的现价图，均价图，再结合成交量图，我们只需要修改一些布局，就可以组合成分时图
2022-11-22 11:50:12
1760
2
原创 在Vue3项目中使用 Echarts 绘制股票图表的分享（三）：绘制成交量图
分析：根据需要实现的效果图，我们可以进行分析，这是一个由柱状图且柱子有红绿两种颜色制作而成的成交量图。在开始写代码之前，我们依然可以去参考一下官方的一些示例，并进行分析。Echarts官方示例普通柱状图：自定义单个柱子的颜色：从上面我们可以看出，我们可以通过将 series 属性中 data 数据的的单个数据改为 object 类型，设置其中的 itemStyle 的 color 从而设置单个柱子颜色；基于以上的分析和参考，我们可以开始按照这个思路根据实际的业务数据和需求来制作成交量图。关键代码
2022-11-19 17:46:54
1304
原创 在Vue3项目中使用 Echarts 绘制股票图表的分享（二）：绘制现价图+均价图
根据需要实现的效果图，我们可以进行分析，这是由两条折线组成的图表，且现价图的折线拥有区域填充的透明效果。因此，我们需要制作两个折线图（现价图，均价图）进行图表叠加，并且利用 areaStyle 属性来制作区域填充的透明效果。话不多说，我们开始行动！但在此之前，我们可以去参考一下官方的一些示例，并进行分析。Echarts官方示例先是普通的折线图：而在普通的折线图的基础上，在 series 的type为line的y轴的数据里增加了 smooth ，开启了折线的平滑显示，并且接下来我们绘制折线图时也会用上
2022-11-16 02:08:20
2508
原创 Nuxt3项目bug整理（一）： Nuxt3项目执行 nuxt build 的构建命令后控制台date-fns报错
Nuxt3项目执行 nuxt build 的构建命令后控制台date-fns报错的解决方案
2022-11-14 15:32:26
1945
原创 Nuxt3 + Naive UI 的SSG项目分享（三）
Nuxt3项目并不需要利用 import 去导入组件并且注册使用，它会自动查找 components 目录下的文件，将文件名作为组件名，来自动引入我们的组件。这就是Nuxt3项目的自动导入，在 Nuxt3 的约定下，用户在页面文件上使用到的Nuxt3的标签将会被系统自动识别导入到应用程序，以供全局使用。上面说到了的是Nuxt3项目使用到一些Nuxt3框架自带的一些标签的自动导入，下面则将介绍Nuxt3项目涉及到的所有的自动导入。但需要注意的是，这里的默认自动识别导入只能是一级目录，如果需要自动导入在。
2022-11-14 14:56:10
1700
原创 Nuxt3 + Naive UI 的SSG项目分享（二）
我们建立构建的script命令时，使用 --mode 后面接相关的.env文件后面的不同的自定义名称，便会为我们自动装配相关的环境变量。我们在开发项目的时候会有各种不同的环境，有测试环境，也有发布环境，以及最终上线的正式环境，那么我们怎么处理不同环境的区别呢？Nuxt3 可以用一个 nuxt.config 文件轻松配置，该文件的扩展名可以是 .js、.ts 或 .mjs。我们可以根据环境建立不同的配置文件，它们默认文件名是.env，在进行构建的时候，vite会装配env目录的文件。
2022-11-13 20:59:38
1191
1
原创 Nuxt3 + Naive UI 的SSG项目分享（一）
如果用服务端渲染一个页面所需的数据对每个用户来说都是相同的，那么我们可以只渲染一次，提前在构建过程中完成，而不是每次请求进来都重新渲染页面。这是写在分享前的前言，主要是想谈谈分享的初心，它涉及两个方面：一个是巩固自己的技术知识，用于查漏补缺，二则是秉承互联网精神，在网络上相互分享，相互协作。而这里分享，我们则采用Nuxt3框架，它是一个构建于 Vue 生态系统之上的全栈框架，为编写 Vue SSR 应用提供开发，同时还可以把它当作一个静态站点生成器来用。而Vue框架所开发的项目就属于SPA项目。
2022-11-13 18:20:05
3293
2
易买网项目
2019-04-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人