- 博客(87)
- 收藏
- 关注
RSS订阅原创 接入大模型！前端怎么处理SSE流式返回呢？
这里一般都是二次封装的开放接口，而一般axios不支持流式响应，要借用一些插件，本文在这里直接用fetch请求 ，fetch对于SSE请求有天然优势。是一种在客户端与服务器之间建立持久性单向连接的技术，服务器可以通过该连接向客户端发送任意数量的数据。SSE 支持的数据流格式较为简单，每条数据都以事件块的形式发送，并以双换行符结束。SSE 与 WebSocket 都是常用于实时数据推送的技术，但相比 WebSocket，SSE。此外，SSE 还具有较好的兼容性，能够在主流浏览器中良好运行。
2025-03-17 16:00:14
1504
原创 如何搭建一个适配微信小程序，h5，app的uni-app项目
node -v vscode uni-app pinia vite vue3移动端框架
2025-03-12 19:06:19
1173
原创 前端vscode 必备插件
IntelliSense for CSS class names in HTML: 提供智能的CSS类名补全和提示功能，方便在HTML中使用CSS类名。ESLint: 一个 JavaScript 代码检查工具，可以帮助你检查代码中的错误和潜在问题，并提供相应的修复建议。HTML Snippets: 提供了一系列常见 HTML 标签的代码片段，可以快速输入和编辑 HTML 代码。GitLens: 为 Git 提供了一系列功能增强，包括显示代码的作者和最近的修改、浏览文件的历史记录等。
2024-10-28 09:51:24
8578
原创 前端层面----监控与埋点
站在产品的视角，经常会问如下几个问题：产品有没有用户使用用户用得怎么样系统会不会经常出现异常如何更好地满足用户需求服务用户当站在技术视角时，经常会问如下几个问题：系统出现异常的频率如何异常出现后如何快速进行定位追踪如何分析解决问题而当站在老板的视角时，问题可能又会变为：我的存量用户多少，未来还有多少潜力多少用户在系统内进行了消费当在回答了上述问题之后，埋点&监控便跃然纸上。因为要回答以上问题，只有通过对系统进行数据分析的方式才能弄清楚。
2024-09-14 15:15:56
40915
原创 8个小而美的前端库
前端有很多小而美的库，接入成本很低又能满足日常开发需求，同时无论是 npm 方式引入还是直接复制到本地使用都可以。2024 年推荐以下小而美的库。
2024-09-12 17:49:28
303
原创 vue3 +百度地图 实现 地点检索，输入联想，经纬度，逆地理编码，创建标记，label等
需要单独设置一下搜索结果列表的层级，不然会遮挡导致看不见，要去掉style标签的 scoped,这样的话重写的css样式才能生效。分别设置监听输入联想和选择搜索结果的事件，可以在回调中设置需要的操作。其实这里有两种方式实现;
2024-09-09 15:54:34
48189
2
原创 vue2和vue3 的双向绑定原理
一般我们所指的双向绑定都是指的数据,即当数据发生变化的时候,视图也发生变化;当视图发生变化时,数据也同步跟着变化,这就是vue的精髓之一.对象有两种属性：1 . 数据属性：就是我们经常使用的属性2 . 访问器属性：也称存取属性（存取器属性就是一组获取和设置值的函数）控制台打印:数据属性就是a和b；get和set就是关键字，他们后面各自对应一个函数，这个函数就是上面红字部分所讲的，存储器属性。get对应的方法称为getter，负责获取值，它不带任何参数。
2023-11-06 12:29:57
1286
原创 vue3中如何编写一个组件---demo
这样，我们就完成了一个简单的待办事项列表组件的开发。在其他地方使用该组件时，只需要引入并放置在相应的位置即可。组件内部的数据和方法已经封装好，可以在不同的上下文中使用和传递。当使用 Vue 3 来开发组件时，可以使用 Composition API 来定义组件逻辑和实现组件传值。在上面的示例中，我们使用了 Vue 3 的 Composition API 来编写组件。假设我们要开发一个简单的待办事项列表组件，包括添加待办事项、显示待办事项列表以及删除待办事项的功能。// 暴露数据和方法给模板使用。
2023-07-03 14:27:33
2728
原创 vue中如何封装一个基础组件---demo
在点击按钮时，通过 handleClick 方法来触发 click 事件，并在事件处理函数中判断按钮是否被禁用，如果没有禁用，则通过 $emit 方法触发 click 事件。以上是封装基础组件的一般步骤，根据具体的项目和需求，可能会有一些特定的步骤和注意事项。在封装过程中，要注重组件的可重用性、可定制性和扩展性，同时遵循 Vue 的最佳实践和组件设计原则。在其他地方使用时，只需要引入该组件并传入相应的属性，即可实现可定制化的按钮功能。标签中定义了按钮的样式，可以根据自己的项目需求进行设计和调整。
2023-07-03 14:11:41
2242
原创 深入理解 JavaScript Promise
本文对JavaScript中的Promise进行了深入的介绍，包括基本概念、使用方法和进阶应用。Promise提供了一种优雅的方式来处理异步操作，使得代码更加清晰、可读和可维护。掌握Promise的使用方法和技巧，将帮助前端开发人员更好地处理异步代码，并提升代码质量和开发效率。
2023-06-14 09:56:16
34069
原创 深入理解JavaScript模块化开发
随着JavaScript应用程序的复杂性不断增加，模块化开发成为了一种必备的技术。通过将代码划分为模块，我们可以提高代码的可维护性、可重用性和可扩展性。在本文中，我们将深入探讨JavaScript模块化开发的概念、优势和不同的模块化方案。
2023-06-12 10:24:20
2933
原创 日常问题----如和解决跨域
跨域不是问题，是一种安全机制。同源策略是浏览器一个重要的安全策略，一个url由三部分组成:协议，域名（ip地址），端口。所谓的同源就是指两个域有相同的协议（protocol）、域名（host）、端口(port)，这三者之间任何一个不同都会构成跨域的情况，比如说前后端分离之后，前后都在两个域之下，前端的浏览器请求后端服务器的数据的时候就需要做跨域处理。可能有些人有点疑问，非得同源吗？（勿喷）无法读取非同源网页的 Cooike、LocalStorage、IndexedDB无法接触非同源网页的DOM。
2023-05-10 10:57:24
10526
原创 性能优化之-更高效的数据渲染
中心思想还是让请求的资源得到更快响应的方法，比如压缩资源，减少数据量的大小，缓存数据以减少请求数量，http/2让网络传输变得更快这些，下面就让我们来看看浏览器是如何解析这些数据，最终又是如何将他们渲染在屏幕上的？在数据量不变的情况下还有哪些可以优化的点？
2023-04-21 10:02:10
50533
原创 JavaScript的三座大山
作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性。
2023-04-19 11:34:22
2633
原创 性能优化之-缓存篇
什么是缓存？在哪可以看到？为什么要做？本文简单说下，当做笔记在前端开发中，性能一直都是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。缓存技术一直一来在WEB技术体系中扮演非常重要角色，是快速且有效地提升性能的手段。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。
2023-04-03 16:43:50
1638
原创 性能优化之-事件代理
那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么原理：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。
2023-03-30 10:49:55
34562
6
原创 如何跳出map或者foreach循环
forEach()和map() 是Array 数组对象提供的循环数组的方法。不能像js循环表达式那样使用break 、‘continue’等结束循环语句。那么在forEach() 和 map()方法中如何终止循环和跳出本次循环呢？
2023-02-09 17:28:20
6660
原创 nodej.s 搭建一个socket服务（原生和sockjs）
原生socket服务 createServer（）消息广播使用nodejs创建socket服务 原生以及http服务
2023-02-06 14:14:33
3333
原创 TypeScript 简单介绍
是微软开发的JavaScript的超集，typescript兼容JavaScript，可以载入JavaScript代码然后运行，ts与js相比进步的地方 包括：加入注释，让编译器理解理解存储所支持的对象和函数，编译器会移出注释，不会增加开销；增加一个完整的类结构，使之更新使传统的面向对象语言。
2022-09-07 14:25:19
4736
原创 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDafault(),return false的区别
1.event.stopPropagation()方法这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，2.event.preventDefault()方法这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；3.return false ；这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以
2022-03-16 15:29:18
740
原创 可以跨域的在线视频地址（测试用）包括m3u8，rtsp，rtmp，flv，mp4直播流在线测试地址！！
在线小视频地址：可以跨域https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4 https://stream7.iqilu.com/10339/article/202002/18/2fca1c77730e5
2021-12-15 11:39:19
5748
原创 用来测试的在线小视频地址
在线视频地址，MP4https://v-cdn.zjol.com.cn/280443.mp4https://v-cdn.zjol.com.cn/276982.mp4https://v-cdn.zjol.com.cn/276984.mp4https://v-cdn.zjol.com.cn/276985.mp4
2021-12-15 11:31:00
4741
转载 超详细的require、import、export讲解
超详细的require、import、export讲解JS 中的require 和 import 区别在研究react和webpack的时候，经常看到在js文件中出现require，还有import，这两个都是为了JS模块化编程使用。CSS的是@import1.ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。Require是CommonJS的语法，CommonJS的模块是对象，输入时必须查找对象属性。复制代码复制代码// CommonJS模块l
2021-11-08 11:03:21
471
原创 汇总onchange、onpropetrychange、和oninput事件的区别
1、 onchange事件与 onpropertychange 事件的区别：onchange事件在内容改变（两次内容有可能还是相同的）且失去焦点时触发。onpropertychange事件却是实时触发，即每增加一个字符或者减少一个字符就会触发，通过js改变也会触发该事件，但是该事件是IE专有的。2、oninput 事件与onpropertychange 事件的区别：oninput事件是IE之外的大多浏览器支持的事件，在value改变时触发，实时的，即每增加一个或者删除一个字符就会触发，然
2021-10-13 14:59:24
373
原创 模糊查询（前端）
首先，模糊查询一般交由后台处理。（数组对象的）当然前端也可以实现，我这里的主要实现方式有两种，其一是使用fitler 过滤器：ilter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。注意： filter() 不会对空数组进行检测。注意： filter() 不会改变原始数组。话不多说，上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8
2021-09-16 17:53:54
7815
1
原创 纯css实现三角形、菱形、梯形、等效果
需求有这么一个小东西需要实现一下，但是不想直接放一个图片，就随便写了写，，首先实现一个三角形：1.首先，我创建了一个 class 名为 ‘box’ 的div，我们暂且亲切的称它为‘小盒子’html：<div class='box'></div>css：.box { width:20px; height:20px; background-color:blue; }
2021-09-10 17:21:37
2897
原创 call()、 apply()、 bind() 方法的作用、使用详解以及手写实现它
我们先举一些简单的例子：例1:var name = "阿牛",age = '18';var obj = { name: "臭宝", objAge: this.age, fun: function(){ condole.log(this.name,this.age); }}// 输出“臭宝” undefined例2var faq = "牛牛牛";fun: function(){ console.log(this.faq);}// 输出fun() // “牛牛牛
2021-08-18 17:57:22
373
原创 css缩放（不同屏幕适配） transform属性的scale（）方法
在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。语法：transform： scaleX（x）； / 沿x轴方向缩放/transform: scaleY(y); / 沿y轴方向缩放/transform： scale（）； / 同时沿x轴和y轴缩放/说明：跟translate()方法类似，缩放也有3种情况：scaleX()、scaleY()、scale()。参数x表示元素在x轴方向的缩放倍数
2021-08-09 17:26:40
10021
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人