自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

趣谈前端

公众号《趣谈前端》.一个重度代码洁癖者,有对前端生态的总结,思考和探索.内容涵盖了笔者多年对vue;react;node;webpack以及javascript框架设计的探索和经验.

  • 博客(492)
  • 收藏
  • 关注

原创 当后端一次性丢给你10万条数据, 作为前端工程师的你,要怎么处理?

前段时间有朋友问我一个他们公司遇到的问题, 说是后端由于某种原因没有实现分页功能, 所以一次性返回了2万条数据,让前端用select组件展示到用户界面里. 我听完之后立马明白了他的困惑,...

2020-06-09 22:00:00 16331 43

原创 前端开发中不可忽视的知识点汇总(二)

本文为前端开发重要知识点汇总系列第二篇,上一篇请参考22. 让页面里的字体变清晰,变细用CSS怎么做?-webkit-font-smoothing:antialiase...

2019-10-21 08:00:00 2173 2

原创 web性能优化的15条实用技巧

javascript在浏览器中运行的性能,可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂,事实上,多数浏览器使用单一进程来...

2019-10-02 18:30:20 2905 3

原创 前端开发中不可忽视的知识点汇总(一)

本文结合自己前端日常开发中,经常用到的且非常重要的一些知识点,进行了汇总,这是本系列第一篇。1.css禁用鼠标事件.disabled { pointer-eve...

2019-09-24 19:34:05 1605

原创 用css3实现惊艳面试官的背景即背景动画(高级附源码)

我们传统的前端更多的是用javascript实现各种复杂动画,自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,...

2019-09-22 18:30:00 5017 2

原创 5分钟教你用nodeJS手写一个mock数据服务器

对于前端开发者而言,javascript正扮演着越来越重要的地位,它不仅能为浏览器端赋能,在web服务器方面也有很大的价值(我们可以用nodeJS来写服务端代码,启动we...

2019-09-07 18:30:00 3830 4

原创 Dooring低代码关于辅助设计的思考和实践

hello, 大家好, 我是徐小夕, 今天继续和大家分享有关 Dooring低代码 的技术实践, 我会从辅助设计的维度来和大家分享一下 Dooring 在这方面做的一些技术实践和展望.H5-Dooring 断断续续已经迭代了3个年头, 从UI设计,到组件物料, 再到搭建能力, 一直在不断更新,往更优的方案迈进, 致力于打造极致的用户体验. 接下来我分享的内容主要由以下几个方面组成:1. 组件面板可...

2023-01-31 07:40:27 5

原创 开源推荐! 一款开箱即用的电子签名组件

作者: 徐小夕演示地址: http://h5.dooring.cn/react-signhello, 大家好, 我是徐夕, 今天又到了分享时间. 今天和大家分享一下我最近开源的轻量级电子签名组件——react-sign2.我们可以使用它轻松的实现电子签名, 比如说常用的合同签字, 文稿签名, 艺术签名等, 并支持一键将签名保存.基本使用我们要想直接使用, 可以在 npm 上安装 react-sig...

2023-01-29 07:40:34 27

原创 2023年, 前端路上的开源总结(最新更新...)

19年至今, 笔者利用空余时间陆陆续续做了一些开源项目, 大部分开源项目都是以实际价值为开源基础, 所以我觉得有必要做一个总结和复盘,在复盘的过程中希望也能对大家有所帮助.今后笔者的开源项目都会放在这篇文章中,如果想学习的可以收藏+交流.1.基于react实现的滑动验证码组件github地址:https://github.com/MrXujiang/react-slider-vertify学习...

2023-01-21 07:30:58 1573

转载 数据不够实时:试试长连接?

大厂技术坚持周更精选好文背景在特定场景下,我们往往需要实时的去获取最新的数据,如获取消息推送或公告、股票大盘、聊天消息、实时的日志和学情等,都对数据的实时性要求很高,面对这类场景,最常用的可能就是轮询,但除了轮询还有长连接(Websocket)和服务端推送(SSE)方案可供选择。轮询轮询就是采用循环http请求的方式,通过重复的接口请求去获取最新的数据。短 轮询 (polling)短轮询可...

2023-01-18 07:40:44 53

原创 代码人生(赠送5本23年技术书籍)

一个好的旅行者没有固定的计划,也不打算到达。学会为心动买单, 而不是为便宜买单。今天不分享技术,我来和大家聊一些关于技术的思考和网友问题的解答, 以及春节前常规的送书活动, 作为技术人, 每年总得读5本技术书, 才能对得起日夜操劳的自己.这篇文章只有2个部分, 阅读时间5-15分钟, 希望这段旅程, 对大家有所收获.关于技术的思考和解答前端组件拆分的依据究竟是复用性还是可测试性?初中级前端,每天...

2023-01-13 19:00:04 277

转载 大屏地图:从瓦片到引擎,到手把手实战

大厂技术坚持周更精选好文????阅读本文,你将了解mapbox-gl和maplibre-gl这两款地图引擎的长短了解天地图这一权威地图平台的使用进行一个瓦片风地图的开发实战关于锤子的隐喻有人说:“手里捏着锤子的人,看什么都像钉子。”虽然有点挖苦的意思,但其实也可以理解为一种解决问题的方法和思路:“先把各种难题转换为自己熟悉的问题,然后就可以用自己熟悉的方式解决问题了。”当然,这思...

2023-01-08 19:10:46 84

原创 从零实现Dooring低代码印章组件

上一篇文章和大家分享了低代码平台组件间通信方案的几种实现:低代码平台组件间通信方案复盘今天继续和大家分享一下比较有意思的可视化印章组件的实现.你将收获低代码组件的基本设计模式印章组件的设计原理(canvas相关)如何快速将任意组件集成到低代码平台正文低代码组件的基本设计模式我们都知道任何低代码或者零代码搭建产品都非常注重底层搭建协议(schema), 这些产品通常会设计一套向上兼容且可扩展的 DS...

2023-01-07 08:00:53 294

原创 低代码平台组件间通信方案复盘

背景介绍3年前我开发了一款零代码搭建平台 H5-Dooring, 主要目的是想用更低的成本, 更快的效率, 上线 web 页面(其实是不想写重复的代码了,写麻了). 好在陆陆续续折腾了3年, 目前已经可以满足基本的页面设计和搭建能力, 并能快速上线页面.之前也在社区分享了很多低代码和零代码的技术实现, 接下来继续和大家聊聊低代码平台中组件与组件之间的通信方案设计.可视化搭建平台的基本能力根据我自己...

2023-01-05 07:35:53 208

转载 DeepKit —— 赋予 TypeScript 更多可能性

大厂技术坚持周更精选好文 背景 之前在技术需求中曾调研了基于 TypeScript 的数据校验方案,其中调研了一个叫 Deepkit 的第三方库,可以将 TypeScript 的类型信息保留到运行时进行消费。 TypeScript 带来的 传统开发上,Javascript 基本没有提供任何类型保护,所有的类型错误都需要在运行时才能发现,而TypeScript 为开发者提供了一套静态类型检查...

2023-01-03 07:50:23 54

转载 我是如何利用持久化缓存策略来提升 Vite 开发模式下首屏性能的 ?

大厂技术坚持周更精选好文前言看过小编上一篇文章 -简单聊一聊 Vite 开发模式下的缓存策略童鞋们,想必会记得小编在文章结束时,简单提到了使用类似Webpack5的持久缓存策略来优化Vite开发模式下的首屏性能。经过几天的实际验证,小编发现这确实一个切实可行的优化策略。今天,借着本文,小编就和大家聊一聊自己是如何实现持久化缓存策略的,希望能给到大家一些不一样的启发,????。本文的目...

2022-12-30 07:40:48 62

转载 狼书三卷终大成,狼叔亲传Node神功

提起国内的Node.js布道师,你一定会想到狼叔!狼叔(桑世龙,网名i5ting)从2015年开始活跃于CNode社区,累计发表文章200余篇,主题丰富多样——Node.js底层原理、npm目录结构改进、前后端分离实践、全栈工程师之路等。这几年间,狼叔同时运营着自己的微信公众号“Node全栈”,笔耕不辍,源源不断地将最新鲜、最“硬核”的资讯分享给国内的开发者们。如今,JavaScript在大前端领...

2022-12-29 07:50:33 72

转载 Cutter - Web视频剪辑工具原理浅析

大厂技术坚持周更精选好文最近一直在开发 web视频剪辑工具(cutter),这个工具可以方便老师们编辑拍摄好的视频。这是一个挺有意思的项目,预计分多章和大家分享介绍。本期主要介绍下其大体流程,方便大家对其原理有一个简单认知Cutter 剪辑工具效果演示:web编辑器导出效果阅读完本文,预计可以收获的知识点:了解web视频剪辑工具 基本原理实战一个ffmpeg+wasm+offscreen ...

2022-12-29 07:50:33 145

原创 2022, 6年技术路, 后疫情时代复盘

专注聚焦持续复盘写下你一年的希望...又到了每年一度的复盘时间。转眼一想, 做技术已经 6 年了。说实话,有点疲惫了。今年整个互联网行业都不好过, 加上疫情的反复不断, 从耳边流出了很多裁员的信息, 股市也比较低迷, 身处底层的我们只能夹缝生存。但是, 我又是个信奉自由的人, 不, 严格意义上来说是个信奉自由的程序猿。所以追求价值才是我最关注的点, 每年总得做点有价值的事, 生活才算过的有...

2022-12-25 20:00:10 483

转载 一个10年符号主义学者的深度讨论:如何理性看待ChatGPT?

大厂技术坚持周更精选好文趣谈前端,让技术, 更有料【导读】从ChatGPT来看,符号主义和连接主义该如何发展?近十年,连接主义者在各种深度学习模型加持下,借着大数据、高算力的东风在人工智能赛道上领跑符号主义。但每次有新的深度学习大模型发布,如近期火爆的ChatGPT,在对其强大的性能惊叹赞扬之后,就是对研究方法本身的激烈讨论,模型本身的漏洞与缺陷也会浮现。最近,来自北冥实验室的钱小一博...

2022-12-25 20:00:10 158

转载 大屏经典组件:“无限滚动” 从分析到开发

大厂技术坚持周更精选好文????阅读本文,你将理解大屏 “无限滚动组件” 的开发思路跟随作者,一步步完成一个高性能 “无限滚动组件” 的开发收获一份该实现的粗糙源码。一、无限滚动:事件/告警 的有力帮手1.1 为什么需要滚动列表大屏之所以 “炫酷” ,相比于UI同学出的效果图,它最大的优势就在于它能动。哪怕平台可能没有接入websocket,甚至数据就是静态写死的,客户依然希望数据能在屏...

2022-12-22 07:50:16 72

转载 八个 Web Components 前端框架,一定有一个你用得上

聚焦于真正的技术, 所以, 今天你又博学了吗?大厂技术坚持周更精选好文通过之前的系列文章,大家对 Web Components 一定有了一个深入的了解。通过实战也对 Web Components 怎么写、怎么用比较熟悉了。但是,在实现时我们不难发现,原生的 Web Component 对于封装组件其实并不是很流畅,需要对属性进行处理、需要对数据进行监听、需要对事件进行控制等等。这一切都在和...

2022-12-20 07:50:28 228

转载 如何在 React 中使用 Web Components

趣谈前端, 让前端,更有趣!在之前的教程中,通过上下两篇实战教程,我们从 0 ~ 1 实现了一个 Web Components 下拉组件。也通过 Webpack & npm 将我们的 Web Components 下拉组件打包发布了。那在本教程中,你将学习如何在 React 应用中使用 Web Components 。如果在此之前你也想先构建一个自己的 Web Components 组件,...

2022-12-06 08:00:03 119

转载 前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)

前言hello, 大家好, 我是徐小夕, 今天又到了我们的博学时间。本文是 100+前端几何学应用案例 专栏的第五篇文章, 之前和大家分享了如何从零实现几何画板以及几何画板的撤销 / 重做 / 图层管理等功能:几何学在前端边界计算中的应用和原理分析前端图形学实战: 从零开发几何画板(vue3 + vite版)前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)前端...

2022-12-06 08:00:03 193

转载 你不知道的前端蓝牙应用实践 -- 心率带

大厂技术坚持周更精选好文一、背景最近开启了减肥计划,购入了一条心率带,期望在使用划船机过程中监测心率情况。购入后的情况如下:心率带不直接显示数值,需要连接APP或相关设备使用。官方APP仅实时显示心率数据,无法生成心率统计图表。通过咕咚APP连接心率带,开启运动后可以监测心率变化,但划船机不在支持的运动范围内。自己简单实现了一个划船机节拍器的小程序。于是萌生了在自己的节拍器小程序内监听心率...

2022-12-05 07:55:14 151

转载 创造属于你自己的交互事件——屏幕手势识别

大厂技术坚持周更精选好文TLDR本文使用机器学习、余弦相似度判定法等方法,设计与验证实现了鼠标手势的识别方案,并尝试将方案推广到三维空间。背景端技术的核心内容是直接响应用户的交互。基本的逻辑是,在特定的平台下均存在一些预定义的交互事件,用户特定的交互动作会触发对应的交互事件。整个用户产品的交互设计也都是基于此去开展的。为了达到良好的用户体验,便捷的交互是必要的。在PC端场景,鼠标(触控板)...

2022-12-02 09:17:22 85

原创 前端图形学实战: 从零实现编辑器的图层管理面板和实时缩略图(vue3 + vite版)

前言hello, 大家好, 我是徐小夕, 今天又到了我们的博学时间。本文是 100+前端几何学应用案例 专栏的第四篇文章, 之前和大家分享了如何从零实现几何画板以及几何画板的撤销重做功能:几何学在前端边界计算中的应用和原理分析前端图形学实战: 从零开发几何画板(vue3 + vite版)前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)今天继续和大家分享一下几何...

2022-11-29 08:20:17 174

转载 简单实现一个虚拟形象系统

大厂技术坚持周更精选好文 前言 上周启动居家开会的时候,看到有人通过「虚拟形象」功能,给自己带上了口罩、眼镜之类,于是想到了是不是也可以搞一个简单的虚拟形象系统。大致想来,分为以下几个部分: 卷积神经网络(CNN) 下面讲解一下三层CNN网络模型:卷积层——提取特征卷积层的运算过程如下图,用一个卷积核扫完整张图片:通过动图能够更好的理解卷积过程,使用一个卷积核(过滤器)来过滤图像的各个小区...

2022-11-27 23:07:37 59

原创 前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)

hello, 大家好, 我是徐小夕, 今天又到了我们的博学时间。本文是 100+前端几何学应用案例 专栏的第三篇文章, 在第一篇文章 几何学在前端边界计算中的应用和原理分析 和第二篇文章 前端图形学实战: 从零开发几何画板(vue3 + vite版) 中我介绍了几何学在前端领域的应用以及如何从零开发一个几何画板:2022-10-15 20.46.21.gif如果大家感兴趣可以在 gitee 查看我...

2022-11-19 11:59:06 168

转载 从零实现一个迷你 Webpack

大厂技术坚持周更精选好文webpack 是当前使用较多的一个打包工具,将众多代码组织到一起使得在浏览器下可以正常运行,下面以打包为目的,实现一个简易版 webpack,支持单入口文件的打包,不涉及插件、分包等。前置知识举个????,先来看看下面这个 demo,例子很简单,一个 index.js,里面引用了一个文件 a.js,a.js 内部引入了 b.js,通过 webpack 最简单的配置,将 ...

2022-11-17 08:58:30 26

转载 前缀树在前端路由系统中的应用

大厂技术坚持周更精选好文 背景 本人自己曾经造轮子搞过一个 Node.js 端的应用层 Web 框架,里面涉及到一个路由系统的实现,当时是通过一个叫前缀树的数据结构来实现便捷的路由查找与匹配机制,这里跟大家分享一下。 前缀树介绍 前缀树,即字典树,又称 Trie 树。这种数据结构通常用来储存字符串,并且是以路径字符节点的形式来储存。拥有公共前缀的字符串,会共享同样的父节点路径。前缀树是通过...

2022-11-12 11:57:25 32

转载 Pinia 前端状态管理使用指南!(含插件使用)

大厂技术坚持周更精选好文前言Pinia ,发音为*/piːnjʌ/*,来源于西班牙语piña。意思为菠萝,表示与菠萝一样,由很多小块组成。在 Pinia 中,每个 Store 都是单独存在,一同进行状态管理。Pinia 是由 Vue.js 团队成员开发,最初是为了探索 Vuex 下一次迭代会是什么样子。过程中,Pinia 实现了 Vuex5 提案的大部分内容,于是就取而代之了。与 V...

2022-11-10 13:22:01 104

转载 用Vue.js开发企业管理后台,好书推荐!

Vue.js是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是,它可以自底向上逐层应用。Vue.js的核心库只关注视图层,不仅易于上手,还便于与第三方库或已有的项目整合。当与现代化的工具链及各种支持类库结合使用时,Vue.js完全能够为复杂的单页应用提供驱动。时至今日,Vue.js 已成为世界三大主流前端框架之一。Vue.js 在国内也是主流技术之一,有完善的中文文档和中文社区,易学易上手...

2022-11-10 13:22:01 30

转载 微前端场景下的代码共享

大厂技术坚持周更精选好文前言在现有前端应用日益复杂化的业务场景下,将一个体积庞大的前端应用拆分为几个可以独立开发、测试、部署的微应用变得越来越普遍。微前端的这种模式这大大提高了我们的构建效率,在每次构建时我们不再需要去构建一个庞大的应用,而是构建我们所需要构建的某个子应用。通常在一个微前端的架构下应用之间又会有许多公共的代码,那么在此基础上又如何更加灵活更加有效的共用这些代码呢?(下面介绍...

2022-11-09 12:00:35 147

原创 (10月最新) 前端图形学实战: 从零开发几何画板(vue3 + vite版)

前言hello, 大家好, 我是徐小夕, 今天又到了我们的博学时间。本文是 100+前端几何学应用案例 专栏的第二篇文章, 在第一篇文章几何学在前端边界计算中的应用和原理分析 中我介绍了几何学在前端领域里的应用, 同时用 vue3 带大家一起实现了常见图形的边界计算算法, 并且分享了如何用几何原理和Web Dom生成任意三角形的方式:image.png如果大家感兴趣可以在 gitee 查看我的具体...

2022-10-30 17:00:55 167

转载 keep-alive多级路由缓存最佳实践

大厂技术坚持周更精选好文在我们的业务中,我们常常会有列表页跳转详情页,详情页可能还会继续跳转下一级页面,下一级页面还会跳转下一级页面,当我们返回上一级页面时,我想保持前一次的所有查询条件以及页面的当前状态。一想到页面缓存,在vue中我们就想到keep-alive这个vue的内置组件,在keep-alive这个内置组件提供了一个include的接口,只要路由name匹配上就会缓存当前组件。你...

2022-10-30 17:00:55 202

转载 前端工程化基建探索:从内部机制和核心原理了解npm

大厂技术坚持周更精选好文前言本文【前端工程化基建探索】的第2篇,上一篇前端工程化基建探索(1)前端大佬,你好!当我们拉取一个前端工程化项目,都会通过npm/Yarn/pnpm 管理工具来安装项目的依赖,运行项目,打包项目,基本上是前端开发三部曲。不知在前端开发过程中你是否考虑过下面几个问题:1、安装依赖的时候(npm install),做了什么工作?项目中的lock相关文件(packag...

2022-10-28 20:26:55 41

转载 组件库Monmrepo架构与开发调试环境构建

每日yyds: 今天你又博学了吗?大厂技术坚持周更精选好文本节内容直接进入开发环节,我们按步骤一边开发,一边对比element-plus: ???? Vue 3 的桌面端组件库进行开发,了解其从零开始的开发过程,在此之前我们需要统一Node版本,统一包管理器:基础环境统一Node版本:14+Pnpm版本: 7.13.5 7+编辑器:vscodepnpm下载npminstallpnpm-g基...

2022-10-24 08:58:16 112

转载 浅谈 WebVR 全景

大厂技术坚持周更精选好文前言近年来VR概念越来越火,相信大家在网上都有过VR的浏览体验,比如VR全景看房[1]、VR全景看车[2]、VR全景旅游[3]等等,VR全景给了我们视觉上的沉浸式体验。本文将会简单探究Web VR全景的实现原理,同时也会用threejs实现两个小的demo,希望对大家以后在业务上遇到类似的场景能有所帮助。什么是VR引用维基百科的定义:虚拟现实(英语:virtual ...

2022-10-23 09:29:26 139

转载 微前端如何做样式隔离?

大厂技术坚持周更精选好文可视化低代码社区:http://www.lowcoder.cn问题示例 className 命名重复导致的样式冲突 我们先创建一个问题,验证样式冲突的存在:在主应用和子应用上分别使用 div 元素插入一段标题,两个 div 元素使用相同的 class 名 title,分别在 class 中设置文字颜色,主应用 color 值为 yellow,子应用为 red。由...

2022-10-19 08:29:03 98

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除