前端分为以下8个细分领域
前端分为以下8个细分领域：低代码方向：熟悉组件拖拉拽、流程管理；熟悉可视化框架如echarts.js、d3.js;前端可视化方向：通过使用echarts.js、antv、d3.js、canvas、svg、three.js、webGL等前端图标库,熟悉3D图形理论基础：包括三维渲染原理、着色器、GPU渲染管线等理论知识完成数据大屏、知识图谱、三维地图的可视化展示。主要集中于数字大屏，智慧城市、地图绘
indexedDB 诞生十余年为何一直不温不火
前言在项目开发过程中，前端需要存储大量的数据。cookie, localstorage 都有存储长度限制。表格一览特性cookielocalStoragesessionStorageindexedDB数据生命周期一般由服务器生成，可以设置过期时间；前端采用和 js-cookie 等组件也可以生成除非被清理，否则一直存在；浏览器关闭还会保存在本地，但是不支持跨浏览器页面关闭就清理刷新依然存在，不支持
svg中path贝塞尔曲线和圆弧图文详解
最近研究了一下svg的path标签，功能非常强大，理论上来讲path标签可以画出任意图形。自己记性不太好，记录一下path的使用语法和自己的理解。path介绍path用d属性来描述路径，语法格式大概如下：<svg> <path d="路径描述" /> </svg>其中路径描述包含如下命令：M = moveto 移动到某点。 L = l
在Canvas中使用React Hooks
在本文中，我将使用React Hooks创建一个html canvas 画图网站，我将使用create-react-app脚手架从零开始构建项目。最后这个应用程序有诸如清除、撤销和使用localStorage基本功能。本文我将向您展示任何构建自定义Hooks和在普通的Hooks中重用有状态逻辑。基本设置我们首先使用create-react-app创建一个新的React应用程序。$ npx crea
PIXI.JS 点击获取当前坐标
PIXI Canvas 点击事件如下 onMounted(() => { console.log('mounted') app.renderer.plugins.interaction.on('pointerdown', (event: PIXI.InteractionEvent) => { let ax = event.data.get
px rem em vh vw之间的区别到底是啥？
绝对长度pxpx是像素值，是一个固定的长度，比如我们的米，厘米一样。相对长度为什么我们需要相对长度rem em等？🤔固定长度已经不能满足我们现在的需求了。🌰举例：比如我们在缩小我们屏幕的时候，我们不仅仅是需要缩小我们的盒子的宽高，我们还想要让我们字体大小也随之缩小，这样用户体验会更好一点。remrem 与 px 的计算关系rem的值是px的倍数默认情况下font-size = 16px,那么1re
手把手教你使用Electron9+vue3开发跨平台桌面应用
Electron 是一个基于 chromium 和 nodejs，可以使用 HTML、CSS、和 JavaScript 构建跨平台应用的技术框架，兼容 Mac、Windows 和 Linux。虽然 B/S 是膜前开发 ad 主流，但是 C/S 仍然有很大的市场需求。受限于浏览器的沙盒限制，网页应用在无法满足某些场景下的使用需求，而桌面应用可以读写本地文件、调用更多系统资源，加上 web 开发成本低
如何设计统一登录业务
前言几乎所有的项目都需要登录，无论是权限限制、个性化定制、信息安全等需求，都要通过登录系统来获取用户信息，以便提供后续服务。而一个公司可能会有多个不同的项目，每个项目后端都是共用同一套用户系统的话，就势必会有通用登录的需求出现。通用登录的方式有很多种，下面我们仅探讨前端的实现方案。项目子域名不同，共用一个父域通过设置 cookie 的 domian 属性，可以使得 cookie 携带的内容在父子域
前端JavaScript css遵守各司其职原则
第一个故事：切换到夜间模式在 WEB 开发中，HTML 负责网页的结构，CSS 负责网页上各个元素的展示样式，JS 则负责网页和用户的交互。想要成为一名优秀的前端工程师，首先要做的就是遵守这三者各司其职的原则，让我们的代码易于维护和扩展。但是，有时候我们常常一不小心就破坏了这个原则。又或者，我们为了实现业务需求，根本不管这个规则。这都会导致我们的代码结构混乱，维护困难。那么下面，我就通过一个例子，
js 检测浏览器开发者控制台是否被打开
var element = new Image(); Object.defineProperty(element, "id", { get: function () { console.log("debugger start") debugger; }, }); requestAnimationFrame(function chec
js web简单的路由管理器
灵感来自此博客主要模拟了Router的实现原理客供大家参考index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content
这些新特性你知道？ECMAScript 2020的新特性
在引入 ECMAScript 2015（又称 ES6）之前，JavaScript 发展的非常缓慢。但自 2015 年起，每年都有新特性添加进来。需要注意的是，不是所有特性都被现代浏览器支持，但是由于 JavaScript 编译器 Babel 的存在，我们已经可以使用新特性了。本文将介绍 ECMAScript 2020（ES11）的一些最新特性。（不要被吓到，真的是ES11说ES6啥的都low了。今