前端
文章平均质量分 88
周陆军的个人博客
这个作者很懒,什么都没留下…
展开
-
vue3溢出文本tooltip或title展示解决方案—如何获取文本宽度
第二个,我们无论做成组件还是 指令,textContent 更好地获取内容文本。但是这种方法在字符串中含有多个空格时,测出来的宽度会一样,当然可以通过pre code元素避免。毕竟 若果 text-overflow: ellipsis生效,那么其父容器就是文本,是无法直接获取宽度的。解决文本溢出,鼠标悬浮展示tooltips,要解决2大难题。这样简单粗暴,但是仔细想下,文字、字母,标点符号,特殊字符等的出现会让计算有特别大的偏差。解决文本溢出,鼠标悬浮展示tooltips,要解决2大难题。原创 2023-03-19 14:58:17 · 996 阅读 · 0 评论 -
vue2升级vue3:单文件组件概述 及 defineExpos/expose
像我这种react门徒被迫迁移到vue的,用管了TSX,地vue单文件组件也不太感冒,但是vue3单文件组件,造了蛮多api,还不得去了解下、没有什么好说的,就是setup中定义props与emits。、它会返回与setupContext.slots和setupContext.attrsnameprops{typeFunction,},},emits}})...原创 2022-07-25 23:46:52 · 1858 阅读 · 0 评论 -
vue2升级vue3: h、createVNode、render、createApp使用
h 函数本质就是 createElement() ,h函数其实是createVNode的语法糖,返回的就是一个Js普通对象。在createVNode API 在创建Vnode的时候,会对Vnode的props、children、ref、class、style等属性进行规范梳理或者合并。...原创 2022-07-25 23:35:28 · 5959 阅读 · 0 评论 -
vue2升级vue3:Vue Demij打通vue2与vue3壁垒,构建通用组件
如果你vue2的代码不是使用类组件(大部分应该都是vue-class-component vue-tsx-support ,官方停摆了,再次diss vue),而是使用@vue composition-api,那么用上Vue Demi 吧。原创 2022-07-25 23:26:51 · 885 阅读 · 1 评论 -
vue2升级vue3:vue3 hooks库选用
之前a-hooks:useUrlState - ahooks 3.0,比react-use 精简好用。但是没有vue版本的。网上有个人实现的:GitHub - dewfall123/ahooks-vue: 🛠️ Vue hooks library.原创 2022-07-25 23:20:49 · 897 阅读 · 0 评论 -
vue2升级vue3:Vue Router报错,directly inside <transition> or <keep-a
vue2带缓存的路由重构为 vue3 + tsx,keep-alive 不生效,而且警告原创 2022-07-25 23:12:50 · 1851 阅读 · 0 评论 -
vue2升级vue3:vue3创建全局属性和方法
vue2 x挂载全局是使用Vue prototype $xxxx=xxx的形式来挂载,在vue3 x这种方法显然是不行了,vue3中在setup里面我们都获取不到this,官方提供了globalProperties原创 2022-07-25 23:07:28 · 1029 阅读 · 0 评论 -
vue2升级vue3:composition api中监听路由参数改变
vue3 composition api 监听路由变化:onBeforeRouteUpdate、router.afterEach、 watch( () => route.params,()=>{})原创 2022-07-25 23:03:07 · 1265 阅读 · 0 评论 -
中断操作:AbortController学习笔记
AbortController是一个DOM API。MDN上对它的介绍是 AbortController接口表示一个控制器对象。AbortController可以用在fetch和addEventListener,分别用来废弃请求和废弃监听器。这是一个原创 2022-06-25 16:51:09 · 818 阅读 · 0 评论 -
TML转义字符:xss攻击与HTML字符的转义和反转义
HTML常用转义字符对照表:最常用的字符实体 Character Entities、ISO 8859-1 (Latin-1)字符集、数学和希腊字母标志、重要的国际标记、JavaScript转义符、富文本通用转义字符、HTML特殊转义字符对照表原创 2022-06-25 16:41:42 · 1834 阅读 · 0 评论 -
vue2升级vue3:this.$createElement is not a function—动态组件升级
vue2 动态组件加载,this $createElement非常好使!return this $createElement(chartPanel, {props:{}}),但是到vue3如何操作呢?原创 2022-06-21 20:46:50 · 3534 阅读 · 0 评论 -
vue2升级vue3: Event Bus 替代方案
Vue3 removed $on, $off and $once methods from the instance completely $emit is still a part of the existing API as it s used to trigger event handlers declaratively attached by a parent component原创 2022-06-21 20:28:22 · 492 阅读 · 0 评论 -
vue2升级vue3: 全局变量挂载与类型声明
使用 ts 的情况下,挂载完全局变量后,在 vue 文件中,通过 this 对象 出来不来提示的。原创 2022-06-21 20:22:31 · 1776 阅读 · 0 评论 -
vue2升级vue3:Vue2/3插槽——vue3的jsx组件插槽slot怎么处理
Vue3(其实从2 6开始)中引入了一个新的指令v-slot,用来表示具名插槽和默认插槽,可以在slot容器上使用v-slot来表示一个传入组件的插槽,通过指令参数来表示插槽的名称。 vue template中的slot插槽如何在JSX中实现呢?...原创 2022-06-21 20:04:06 · 5372 阅读 · 0 评论 -
instanceof运算符的实质:Java继承链与JavaScript原型链
Javainstanceofinstanceof 严格来说是Java中的一个双目运算符,用来测试一个对象是否为一个类的实例boolean result = obj instanceof Class其中 obj 为一个对象,Class 表示一个类或者一个接口,当 obj 为 Class 的对象,或者是其直接或间接子类,或者是其接口的实现类,结果result 都返回 true,否则返回false。总结就是: 只要判断对象obj 在 属于Class的继承链上,就返回true o..原创 2021-08-29 19:21:48 · 145 阅读 · 0 评论 -
JS遍历循环方法性能对比:for/while/for in/for of/map/foreach/every
这周codeReview例会,又遇到map与foreach到底谁问题。从性能上来讲,我会选择map。但是从语义的角度来讲,如果只是单纯遍历,还是推荐选择foreach。其实formap 与foreach,性能相差不大(个人测试数据在10000000,最后有测试案例)。从性能上考量,我从eslint上禁止 for in。之前在gem代码重构的过程中,讲了很多次 for in for map foreach等遍历情况,但是没有过系统性地解析。这次决定 把之前看的东西,东拼西凑地再来一篇总结。遍历数组原创 2021-08-24 20:32:13 · 1667 阅读 · 0 评论 -
讲透学烂二叉树(三):二叉树的遍历图解算法步骤及JS代码
二叉树的遍历是指不重复地访问二叉树中所有结点,主要指非空二叉树,对于空二叉树则结束返回。二叉树的遍历分为 深度优先遍历 先序遍历:根节点->左子树->右子树(根左右),有的叫:前序遍历 中序遍历:左子树->根节点->右子树(左根右) 后序遍历:左子树->右子树->根节点(左右根) 广度优先遍历 层次遍历: 二叉树-深度的优先遍历-图解深度优先,前、中、后遍历顺序,就是组合[根左原创 2021-08-15 23:32:13 · 2101 阅读 · 2 评论 -
instanceof运算符的实质:Java继承链与JavaScript原型链
Javainstanceofinstanceof 严格来说是Java中的一个双目运算符,用来测试一个对象是否为一个类的实例boolean result = obj instanceof Class其中 obj 为一个对象,Class 表示一个类或者一个接口,当 obj 为 Class 的对象,或者是其直接或间接子类,或者是其接口的实现类,结果result 都返回 true,否则返回false。总结就是: 只要判断对象obj 在 属于Class的继承链上,就返回true o..原创 2021-08-15 22:54:36 · 121 阅读 · 0 评论 -
instanceof运算符的实质:Java继承链与JavaScript原型链
Javainstanceofinstanceof 严格来说是Java中的一个双目运算符,用来测试一个对象是否为一个类的实例boolean result = obj instanceof Class其中 obj 为一个对象,Class 表示一个类或者一个接口,当 obj 为 Class 的对象,或者是其直接或间接子类,或者是其接口的实现类,结果result 都返回 true,否则返回false。总结就是: 只要判断对象obj 在 属于Class的继承链上,就返回true o..原创 2021-08-15 22:39:27 · 177 阅读 · 0 评论 -
JavaScript new 关键词解析及原生实现 new
Java里面,new 运算符是用来实例化一个类,从而在内存中分配一个实例对象。但在 javascript 中,原型语言没类,只有对象与原型链继承JavaScript 中 new 表达式的作用是生成一个对象。new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作: 创建一个空对象(即{}); 链接该对象(即设置该对象的构造函数)到另一个对象 ; 将步骤1新创建的对象作为this的上下文 ; 如果该函数没有返.原创 2021-08-15 22:27:53 · 196 阅读 · 0 评论 -
JavaScript new 关键词解析及原生实现 new
java里面,new 运算符是用来实例化一个类,从而在内存中分配一个实例对象。但在 javascript 中,原型语言没类,只有对象与原型链继承JavaScript 中 new 表达式的作用是生成一个对象。new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作: 创建一个空对象(即{}); 链接该对象(即设置该对象的构造函数)到另一个对象 ; 将步骤1新创建的对象作为this的上下文 ; 如果该函数没有返.原创 2021-08-15 22:20:18 · 304 阅读 · 0 评论 -
html5鼠标拖动排序及resize实现方案分析及实践
对列表进行拖动排序,尺寸改变。之前一般会使用jQuery-UI。其通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。vue-drag-resize vuedraggable等包也大抵如此:https://codepen.io/lujun-zhou/pen/LYybXNx。而HTML5中直接提供了拖放的API,只要通过监听元素的拖放事件就能实现各种拖放功能。拖放(Drag和 drop)是 HTML5 标准的组成部分。相比之前用jquery-UI等库实现原创 2021-07-13 22:09:04 · 501 阅读 · 0 评论 -
GIS坐标系测绘原理:大地水准面/基准面/参考椭球体/EPSG/SRI/WKT
预热文章系列:《GIS历史概述与WebGis应用开发技术浅解》、《GIS坐标系:WGS84,GCJ02,BD09,火星坐标,大地坐标等解析说与转换》、《OGC标准WMTS服务概念与地图商的瓦片编号流派》、《GIS基础知识 - 坐标系、投影、EPSG:4326、EPSG:3857》我们过一遍如下概念: 地理坐标系是球面坐标,参考平面是椭球面,坐标单位是经纬度; 投影坐标系是平面坐标系,参考平面是水平面,坐标单位是米、千米等。 地理坐标系转换到投影坐标系的过程理解为投影,即将不规则的地.原创 2023-04-13 09:48:47 · 2361 阅读 · 1 评论 -
再谈BOM和DOM(7):HTML DOM Event 对象属性及DOM事件详细列表
之前写《再谈BOM和DOM(4):HTML DOM Event 对象》时候,对event对象及各种dom事件没有详细道来,这里些表格。备查。Event 对象Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会在事件发生前被执行!事件句柄 (Event Handlers)HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript原创 2021-07-13 21:51:43 · 208 阅读 · 0 评论 -
再谈BOM和DOM(6):dom对象及event对象位值计算—如offsetX/Top,clentX
总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀。。。。)event对象位置信息获取先总结下区别:event.clientX、event.clientY鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性event.pageX、event.pageY类似于event.clientX、event.cl.原创 2021-07-13 21:43:30 · 214 阅读 · 0 评论 -
再谈BOM和DOM(5):各个大流浪器DOM和BOM里面的那些坑—兼容性
三大不冒泡事件所有浏览器的focus/blur事件都不冒泡,万幸的是大部分浏览器支持focusin/focusout事件,不过可恶的firefox连这个都不支持。 IE6、7、8下 submit事件不冒泡。 IE6、7、8下 change事件要等到blur时才触发。 万恶的滚轮事件滚轮事件的支持可谓是乱七八糟,规律如下: IE6-11 chrome mousewheel wheelDetla 下 -120 上 120 firefox DOMMouseScroll原创 2021-07-13 21:33:53 · 247 阅读 · 0 评论 -
再谈BOM和DOM(2):DOM节点层次/属性/选择器/节点关系/操作详解
DOM模型将整个文档(XML文档和HTML文档)看成一个树形结构,并用document对象表示该文档。根据W3C DOM规范,DOM是HTML与XML的应用编程接口(API),DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。DOM规定文档中的每个成分都是一个节点(Node),可以说HTML文档是由节点构成的集合,常见DOM节点有: 文档节点(Document):代表整个文档 元素节点(Element):文档中的一个标记 文本节点(Tex原创 2021-07-13 21:06:53 · 164 阅读 · 0 评论 -
再谈BOM和DOM(1):BOM与DOM概述
JavaScript的实现包括以下3个部分: ECMAScript(核心):描述了JS的语法和基本对象。 浏览器对象模型(BOM):与浏览器交互的方法和接口 文档对象模型 (DOM):处理网页内容的方法和接口 DOM-文档对象模型DOM(文档对象模型)是HTML和XML的应用程序接口,是操作文档出现的 API,是为了操作文档出现的接口。DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网页的地图(或者说模型),而我们可以通过js去读取这张地图。...原创 2021-07-13 20:43:06 · 403 阅读 · 0 评论 -
vue keep-alive(2):剖析keep-alive的实现原理—学习笔记整理
前言:本篇主要内容来自以下文章 彻底揭秘keep-alive原理https://github.com/qiudongwei/blog/issues/4(此文的主要来源) Vue源码解析,keep-alive是如何实现缓存的?https://juejin.cn/post/6862206197877964807(此文的主要来源) keep-alive实现原理https://www.jianshu.com/p/9523bb439950 http://blog.m...原创 2021-06-30 22:28:35 · 638 阅读 · 1 评论 -
Preload与Prefetch的区别以及webpack项目中如何优化
preload 与prefetch 的区别 preload是一个声明式 fetch,可以强制浏览器在不阻塞 document 的 onload 事件的情况下请求资源。 preload 顾名思义就是一种预加载的方式,它通过声明向浏览器声明一个需要提交加载的资源,当资源真正被使用的时候立即执行,就无需等待网络的消耗。 prefetch告诉浏览器这个资源将来可能需要,但是什么时间加载这个资源是由浏览器来决定的。 若能预测到用户的行为,比如懒加载,点击到其它页面等则相当于提前预加载了需要..原创 2023-04-13 09:48:55 · 1239 阅读 · 0 评论 -
图表列表性能优化:可视化区域内最小资源消耗
之前写过《懒加载优化:JavaScript IntersectionObserver API监听元素是否可见》,基于上一篇文章,做个滚动懒加载完全不是问题。但是,如果页面定时自动刷新,不可见区域内的刷新完全是浪费前后端的资源。本篇在上篇的基础,通过自己的一个改版案例,来看IntersectionObserver+ResizeObserver+getBoundingClientReact+Object.freeze是如何提升项目的整体性能与用户体验的案例如下:这个页面,不只是简单的滚动加载原创 2021-06-26 17:23:05 · 202 阅读 · 0 评论 -
echarts图表X轴文字过长解决解决方案:根据文字长度自动旋转
Echarts 标签中文本内容太长的时候怎么办 ?关于这个问题搜索一下,有很多解决方案。无非就是 省略(间隔显示)、旋转文字方向、竖排展示前面两种解决方案,就是echarts暴露的:{axisLabel:{interval:0,//如果设置为1,表示『隔一个标签显示一个标签』,如果值为2,表示隔两个标签显示一个标签,以此类推。rotate:'45',//刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。},};用...原创 2021-01-28 21:52:39 · 2077 阅读 · 0 评论 -
DarkMode(5):深色模式不同实现方案切换
sass自定义函数转 sass预处理在《DarkMode(2):深色模式解决方案——css颜色变量实现Dark Mode》与《DarkMode(3):深色模式解决方案——颜色反转与函数》,如果使用@mixinthemeify{@each$theme-name,$theme-mapin$themes{$theme-map:$theme-map!global;body[data-theme=#{$theme-name}]&{@co...原创 2020-12-11 22:57:47 · 990 阅读 · 0 评论 -
DarkMode(4):css滤镜 颜色反转实现深色模式
在《DarkMode(1):产品应用深色模式分析》提过,单纯反转是不行的。但是,把不需要反转的,在反转过来。或者用js,给想要反转的,加上反转样式,再对其他的做微调。这样个人觉得,开发成本是最低的@media(prefers-color-scheme:dark){//one.app{filter:invert(1)hue-rotate(180deg);img,button,.active{//filter:brightness(.8)contrast(1...原创 2020-12-11 22:52:06 · 940 阅读 · 0 评论 -
DarkMode(3):sass函数实实现深色模式操作
上文《DarkMode(2):深色模式解决方案——css颜色变量实现Dark Mode》,完全基于样色抽离变量,然后使用预处理其,生成两套样式。切换样式文件。sass自定义函数与mixin指令实现暗黑模式其实还是变量抽离,只是不是两个variable 变量文件,而是一个map文件。首先声明函数@mixinthemeify{@each$theme-name,$theme-mapin$themes{$theme-map:$theme-map!global;...原创 2020-12-11 22:47:17 · 485 阅读 · 0 评论 -
DarkMode(2):深色模式解决方案——css颜色变量实现Dark Mode
暗黑模式实现,最初的设计,就是参考之前的主题模式。所谓多套主题/配色/皮肤,就是我们很常见的换肤功能。换肤简单的实现就是更换 css实现不同样式呈现不同肤色。之前做不同颜色的皮肤,暗黑模式可以单做其中的一种黑色暗黑主题。通用的方法,就是less、sass、post-css,把颜色抽离出变量。然后打包输出不同的样式,即:CSS预处理直接生成多套主题样式 利用Less,stylus 或 sass 的变量代替颜色值 配置多个主题颜色配置 利用grunt/gulp/webpac原创 2020-12-11 22:39:23 · 2659 阅读 · 0 评论 -
DarkMode(1):产品应用深色模式分析
为什么Dark Mode变得越来越流行2018 年的 macOS Mojave 率先支持了深色外观,紧接着 Windows 10 在 2018 年的 10 月份大版本更新中,也引入了 Dark Mode。iOS 13 的发推出了深色模式(Dark Mode),不仅可以大幅减少电量的消耗,减弱强光对比,还能提供更好的可视性和沉浸感。Android Q 重点推出了Dark Mode目前主流的操作系统也都在逐步支持 Dark Mode。像Facebook 、Slack、WhatsApp、Ch.原创 2020-12-11 21:52:43 · 984 阅读 · 0 评论 -
从java注解漫谈到typescript装饰器——注解与装饰器
之前整理过《Java注解(批注)的基本原理》,在java里面,,注解(Annotation)是油盐,对于JavaScript来说,还中世纪欧洲的东方香料装饰器和注解装饰器和注解之前也搞不清他们的具体理念,觉得都是基于元编程实现,注解就是装饰模式的一种吧。 注解(Annotation):仅提供附加元数据支持,并不能实现任何操作。需要另外的 Scanner 根据元数据执行相应操作。 装饰器(Decorator):仅提供定义劫持,可以对类,类的方法,类的属性以及类的方法的入参进行修改。不提原创 2020-09-18 21:46:10 · 374 阅读 · 0 评论 -
TS数据类型:从C++/Java/Python到TS看元组tuple—元组的来龙去脉
在C++有Java这种强类型语言中,常用的Array、List、Set ,在集合中只能是一种类型(可以复习下:《再谈Java数据结构—分析底层实现与应用注意事项)。intdata[]=newint[3]List<String>person=newArrayList<>();Set<Integer>test=newTreeSet<>();如果需要一个固定大小的不同类型值的集合,我们需要使用元组C++元组简介tuple是一...原创 2020-09-18 21:40:05 · 773 阅读 · 0 评论 -
联合枚举类型:从C语言看枚举与联合类型到TypeScript/Python
枚举,还是从hello world 开奖,大部分的人应该是从C开始的,比如我。当然,这部分也可以跳过。详说枚举类型:C语言中的enum计算机入门时候有点印象:enum是C语言中的一个关键字,enum叫枚举数据类型。枚举类型(enumerated type)是一种代表整数常量的数据类型。通过关键字enum,可以创建一个新“类型”并指定它的值。枚举类型的语法与结构体的语法相类似。为什么需要使用枚举类型在实际编程中,有些数据的取值往往是有限的,只能是非常少量的整数,并且最好为每个值都.原创 2020-09-18 21:34:22 · 328 阅读 · 0 评论