echarts渲染3d地图以及交互事件
环境 vue2 导入 安装npm包 echarts echarts-gl import * as echarts from "echarts" import "echarts-gl" html <div id="map-container"></div> js import GeoZJ from ' ...
深入变量和闭包
加var 变量和不加var 变量的区别 加var的变量 都会提升,不管代码执行与否, 不加var的变量预编译阶段不会提升 原型链 和作用域链 window.a //不会报错 返回undefined 访问对象不存在的属性不会报错 ,走原型链 访问GO中不存在的属性 a //直接访问未定义的变量会报错, ...
HTML5和CSS3基础
HTML元素 空元素 不是所有元素都拥有开始标签、内容和结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。这些元素被称为空元素例如：元素 `` 是用来在页面插入一张指定的图片。 布尔属性 有时会看到没有值的属性，这也是完全可以接受的。这些属性被称为布尔属性。布尔属性只能有一 ...
JavaScript中单例模式这样用
如果希望自己的代码更优雅、可维护性更高以及更简洁，往往离不开设计模式这一解决方案。 在JS设计模式中，最核心的思想：封装变化（将变与不变分离，确保变化的部分灵活，不变的部分稳定）。 单例模式 那么来说说第一个常见的设计模式：单例模式。 单例模式保证一个类仅有一个实例，并提供一个访问它的全局访问方式， ...
记录--如何优雅地校验后端接口数据
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 背景 最近新接手了一批项目，还没来得及接新需求，一大堆bug就接踵而至，仔细一看，应该返回数组的字段返回了 null，或者没有返回，甚至返回了字符串 "null"？？？ 这我能忍？我立刻截图发到群里，用红框加大加粗重点标出。后端同学也积极 ...
前端随笔0：URL与状态的双向绑定
这篇要讨论的这个概念，应该也不是我发明的新词，叫 URL 与状态的双向绑定，字面意思来说，在刷新页面或跳转页面时解析 URL 并对应更新组件的状态，在组件状态更新时同步更新 URL，为什么要引入这种机制嘞？ ...
nuxt3项目初始化失败 getaddrinfo ENOENT raw.githubusercontent.com 报错
按照官网初始化nuxt3项目时： 输入命令 npx nuxi init nuxt3demo 发现会失败报错： getaddrinfo ENOENT raw.githubusercontent.com 报错 解决方案： 手动clone代码 git clone -b v3 https://github. ...
CSS中的BFC、IFC、GFC、FFC
CSS中的BFC、IFC、GFC和FFC是布局模型中的概念，用于描述元素在文档流中的布局行为。它们分别代表块级格式化上下文（Block Formatting Context）、内联级格式化上下文（Inline Formatting Context）、网格格式化上下文（Grid Formatting ...
自定义显隐滚动条：滚动时显示，不滚动自动隐藏，自定义隐藏时间
tips:如果本文对你有用，请爱心点个赞，提高排名，让这篇文章帮助更多的人。谢谢大家！比心❤~ 如果解决不了，可以在文末加我微信，进群交流一起学习探讨。 背景 项目的要求需要实现规范化，针对项目内所有的滚动条做优化，需要按照UE调整实现：滚动时出现滚动条，停留三秒后，自动消失 由于是就项目的优化，所 ...
袋鼠云出品！数栈UI 5.0全新体验升级，设计背后的故事
我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 前言 数栈作为云原⽣⼀站式⼤数据开发平台，从2016年发布第⼀个版本开始，数栈就始终坚持着以技术为 核⼼、安全为底线、提效为⽬标、中台为战略的思想，坚定不移地⾛国产化信 ...
现代图片性能优化及体验优化指南 - 懒加载及异步图像解码方案
本文是系列第四篇。系列文章： 现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用 现代图片性能优化及体验优化指南 - 响应式图片方案 现代图片性能优化及体验优化指南 - # 缩放精细化展示及避免布局偏移、拉伸 图片资源，在我们的业务中可谓是占据了非常大头的一环，尤其是其对带宽 ...
做一个 Vue 右键菜单组件
取消原生右键事件 在 main.ts 函数中取消浏览器默认右键菜单： window.oncontextmenu = () => { return false; }; 组件模板 做一个不同区域右键点击之后不同菜单项的组件，创建组件模板： <!-- ContextMenu --> <div ref="m ...