Thinking
文章平均质量分 74
奋飛
乐观、勇气、专注、果断、好奇、公正、慎思、真诚、追求极致追求完美、诚信!独立撰写了多个前端专题模块,访问量达百万级。多次负责组织大数据可视化前端架构平台开发工作。对前端新技术、新潮流具有很强的敏锐力和洞察力!
展开
-
Thinking--在应用中添加动态水印,且不可删除
水印是一种用于保护版权和识别内容的技术,通常用于图像、视频或文档中。它可以是文本、图像或两者的组合,通常半透明或以某种方式嵌入到内容中,使其不易被移除或篡改。静态水印易于实现,且不会影响页面的加载和渲染性能;但容易被移除,且不能动态调整文案(在应用系统中,水印往往是登录者信息)。动态水印可以根据用户行为或特定条件动态显示或隐藏水印原创 2024-07-09 20:16:50 · 491 阅读 · 0 评论 -
Thinking--Promise解决动态挂载静态资源重复问题
循环过程会产生多个 `` 组件实例,进而产生多个获取资源 `loadResources()` 的调用。加载资源是异步过程,`window.videojs` 资源加载完才会追加。解决思路:1. 将实例创建改成串行,确保第二个初始化时,第一个已经处理完毕(存在),这样 `window.videojs` 的判断可以生效。=> 可以解决,但不是最佳方案,整体页面渲染效率下降 2. 初始化多个 `` 实例(并行加载),确保资源只加载一份。=> 资源全局单例原创 2024-07-02 19:05:37 · 989 阅读 · 0 评论 -
echarts 中如何将 legend 设置成「直线」
echarts 中如何将 legend 设置成「直线」原创 2023-10-09 21:06:25 · 2766 阅读 · 3 评论 -
URL存储解锁数据管理的新思路,重新定义数据传输与共享(@vue/repl)
通过 URL 存储最大的便利是:无需服务端且通过URL可以分享。好的技术方案一定是根据场景来的!且通过阅读源码,我们可以获取到一写比较不错且小巧的开源库,如上述的 fflate。原创 2023-07-31 16:41:46 · 1136 阅读 · 0 评论 -
Thinking -- vue性能优化:保持 props 稳定
在 Vue 中,组件 props 的改变会导致组件更新。由此,确保组件 props 保持稳定,可以有效减少更新次数,提高效率。这个技巧的核心思想就是让传给子组件的 props 尽量保持稳定。原创 2023-03-30 14:20:57 · 338 阅读 · 0 评论 -
Thinking -- CSS从根解决选择前一个兄弟元素
何选中特定class的前一个兄弟元素。了解了浏览器正常情况下的流布局形式(从左到右,从上到下),我们就可以得知:CSS 之所以不支持,是由于其流布局导致。如果可以通过当前元素选择前一个兄弟元素,可能会导致额外的重绘操作!"既然没有选择前一个兄弟元素的选择器",那就布局反向(从右向左),这样问题就变为了”如何选择后一个兄弟元素“。解决这个问题的方式并不难,但思路值得延伸。原创 2023-03-21 18:07:06 · 5332 阅读 · 4 评论 -
Thinking--复杂逻辑多分支判断优雅写法
Array.prototype.find() 方法返回数组中满足提供的测试函数的第一个元素的值。原创 2023-02-20 19:14:44 · 403 阅读 · 0 评论 -
Thinking--FastDom消除浏览器布局抖动
对于大量操作 DOM 的场景,页面时常会出现卡顿现象,导致用户体验不佳。卡顿的原因是由于丢帧导致!FastDom 通过批处理 DOM 读/写操作 消除布局抖动。每一个 measure(读)/mutate(写) 操作任务都会被添加到对应的队列中。队列在下一帧使用 window.requestAnimationFrame() 执行。其目标是在应用程序的所有模块中像一个单例,返回相同实例,统一对 DOM 进行 读/写 操作。原创 2023-02-14 18:43:24 · 641 阅读 · 0 评论 -
别把对象当Map
使用JavaScript开发过程中,我们经常会借助对象Object来存储数据,从某种意义上,其作用类似Map,均为key-value键值对的方式存储。JavaScript 中的对象是糟糕的 map,只能使用字符串类型作为 key,并且存在访问原型属性的风险。因此,使用内置的 Map 集合!!!...原创 2022-07-27 19:19:32 · 668 阅读 · 1 评论 -
Thinking--validatorjs中isIP的巧妙实现
Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想。isIP 是 validatorjs 中经常被使用到的验证方法,关于该验证方法具体是如何实现的?validatorjs 中又有哪些好的点可以借鉴?方法说明isIP(str [, version])check if the string is an IP (version 4 or 6)version 作为可选项,如果不传递任何值,需要进行 v4 或 v6 的判断,任何一个通过即可。模拟实现编写两个.原创 2022-05-04 23:18:20 · 761 阅读 · 0 评论 -
thinking--javascript 中如何使用记忆(Memoization )
Memoization 是一种常用的技术,可以帮助显着加快代码速度。这种技术依赖于缓存来存储先前完成的计算或执行的结果。缓存的目的是避免多次执行相同的工作。基于当前处理的方案,很容易清晰界定使用的边界:用: Memoization 主要用于加速性能缓慢、成本高或耗时的函数在相同情况下的多次调用的场景弃: Memoization 将结果存储在内存中,因此在不同的情况下多次调用同一函数时应避免使用以 斐波那契 为例:连续调用 fibonacci(32)10次。const fibonacci = (原创 2021-12-25 11:09:02 · 718 阅读 · 0 评论 -
Thinking--javascript 多类目创建(npm源码解读)
Npm 获取配置的顺序(由高到低):Command Line Flags > Environment Variables > npmrc Files > Default ConfigsCommand Line Flags:--flag1 --flag2 bar -- flag3 结果:flag1=true,flag2=bar,flag3为命令参数。Environment Variables:以 npm_config_ 开头的环境变量将被解释为配置参数。npm_config_flag原创 2021-12-08 20:08:47 · 809 阅读 · 0 评论 -
JavaScript移除对象中不必要的属性
Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想。业务开发中,我们经常会遇到:基于后端返回接口数据,前端保存到对象 Object 中,前端开发过程中为了一些场景的便利性,需要在该对象中增加相应的属性,但这些属性对于后端没有意义,保存提交时希望删除掉。真实业务代码:保存前需要删除对应的 *Value 字段async saveData (type, data) { // 提交时删除多余字段 delete data.isCommonValue delete data.is.原创 2021-10-24 20:12:18 · 9274 阅读 · 2 评论 -
你不知道的 forEach(javascript)
forEach 为何会跳过不存在的元素?callback 中变更元素又有哪些问题?如何终止执行?异步执行顺序如何保障?结合ecma262规范一一解答。原创 2021-09-22 18:21:30 · 885 阅读 · 3 评论 -
纯CSS实现拖拽--resize、scale、包裹性
Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想或解决方案。今天看了一篇关于 CSS 的文章,文章用到的几个点,想和大家聊聊。 附「原文地址」大家可自己查阅。原文题目:CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能原文地址:https://www.cnblogs.com/coco1s/p/15151338.html示例源码:https://codepen.io/Chokcoco/pen/bGqWJZL<div class='picA'>.原创 2021-08-29 20:13:09 · 3844 阅读 · 2 评论 -
Thinking--异步请求函数return应不应该加await?
Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想或解决方案。在 codereview 代码中,发现了这样的两种写法。写法一:async function fn () { return await someAsyncReq()}写法二:function fn () { return someAsyncReq()}有哪些区别呢?从写法上,直观可以看到的是写法一:返回的是执行结果(异步执行过程在 fn 函数内部)写法二:返回的是 Promise(异步执行过.原创 2021-08-23 18:46:42 · 1555 阅读 · 6 评论 -
Thinking--JavaScript延迟加载属性数据(性能提升)
Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想。Vue 遍历对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。getter/setter 对用户来说是不可见的,但是在内部 Vue 能够追踪依赖,在 property 被访问和修改时通知变更,依此做到了数据的响应式。vue 通过 Object.defineProperty 的实现思路,值得我们思考。下面提到的属性延迟加载就是其中一个引发.原创 2021-08-16 19:51:20 · 751 阅读 · 4 评论 -
JavaScript 函数回调风险
Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想。引用某第三方模块某函数:// 将一些数字转换为可读的字符串import { toReadableNumber } from 'some-library'const readableNumbers = someNumbers.map(toReadableNumber)toReadableNumber 的实现:export function toReadableNumber(num) { // 例如 10000000 转.原创 2021-08-04 21:06:54 · 861 阅读 · 4 评论 -
Thinking--函数式编程pipe&compose
Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想。业务场景描述:A函数执行完毕后,将结果传递给B函数,然后执行B函数。如:(x+1)∗10(x+1)*10(x+1)∗10// 加1function addOne (x) { return x + 1}// 乘2function multiTwo (x) { return x * 2}链式调用链式调用侧重于 oop 风格:先有对象,再调用对象方法。class Calculate { construct.原创 2020-08-14 15:38:24 · 352 阅读 · 0 评论 -
Thinking--函数同时支持 callback & promise
Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想。function fn (cb?: Function, ctx?: Object) { // 函数内部逻辑 console.log('...') // promise if (!cb && typeof Promise !== 'undefined') { return new Promise(resolve => { resolve(ctx) }) } //.原创 2020-07-16 18:48:46 · 432 阅读 · 0 评论 -
Thinking--return退出多重循环
Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想。假设在函数体内有一个两重循环语句,需要在内层循环中判断,当到达某个临界条件时退出外层循环。方式一:引入控制标记变量function test1 () { let isBreak = false for (let i = 0; i < 10; i++) { for (let j = 0; j <...原创 2020-04-23 22:46:33 · 529 阅读 · 0 评论 -
清明节网站变灰是如何实现的
为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,国务院今天发布公告,决定2020年4月4日举行全国性哀悼活动。在此期间,全国和驻外使领馆下半旗志哀,全国停止公共娱乐活动。4月4日10时起,全国人民默哀3分钟,汽车、火车、舰船鸣笛,防空警报鸣响。各大网站响应国家号召,将页面色调变为了灰色。作为一个技术仔,特别是前端技术仔必须一探究竟。取证图片本身依然是彩色,但呈现...原创 2020-04-04 21:56:17 · 1824 阅读 · 0 评论 -
文件权限777
最近,在使用 pkg 对 vue 工程进行打包生成二进制可执行文件过程中,在传输生成的可执行文件中,在其他小伙伴电脑上无法运行,报错:~ /Users/xxx/Desktop/fusion-smartV-mockzsh: permission denied: /Users/xxx/Desktop/fusion-smartV-mock究其原因,文件没有可执行权限(-rw-r--r--);所以...原创 2020-03-17 22:39:16 · 1412 阅读 · 0 评论 -
Thinking--函数参数重载
前段时间分享过 Thinking–函数参数Normalize思想在前端中的应用 ,对于函数多类型参数很是实用。今天 ,阐述一种更小范围,业务中也更容易出现的场景 – “函数可接收数组或字符串,数组中每个元素的处理逻辑同字符串。”实现常规方式function test (data : string | Array<string>): void { if (Array.is...原创 2019-12-26 22:15:37 · 364 阅读 · 0 评论 -
Thinking--函数强制参数
Thinking 的两个点:默认值的作用reduce 达到 map + filter 效果JavaScript 是弱类型语言,对于函数的参数不会做强制限制,如果需要限制,我们如何处理?实现if 判断对于一些必须参数,我们通常采用 if 判断,给出相关警告。function test (name) { if (!name) { throw new Error('Missi...原创 2019-12-06 20:02:37 · 465 阅读 · 0 评论 -
Thinking--从尾到头打印链表
递归本质上就是一个栈结构,通过递归可以实现反过来输出链表原创 2019-11-20 23:35:50 · 239 阅读 · 0 评论 -
2019Thinking(上) -- 一个前端开发者的个人思考
以下内容多为自己平时积累而来,思考和结论正确与否纯个人观点,希望对大家有所感悟和触发~~~先写下两个观点和感悟:每一项技术的诞生都是为了解决现有技术的一些弊端或满足现有发展的诉求;技术的发展会推动行业发展;行业的变革会衍生技术的变革!前端行业是第二次信息产业浪潮的新产物!第三次、乃至第四次浪潮会带来怎样的变革以及淘汰哪些已有的观念,值得我们思考~~回顾 17年9月刚到公司,感...原创 2019-07-15 21:54:52 · 1507 阅读 · 0 评论 -
Thinking--快速找出故障机器(异或)
Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想。假设一个机器仅存储一个标号为ID(数值)的记录,且该数据会保存备份(即,两个机器存储了同样的数据;类似于双节点部署)。在某个时间,如果得到一个数据文件ID的列表,是否能够快速找出这个列表中仅出现一次的ID?如果已知道有一台机器死机呢?如果两台呢?const originList = [123, 456, 789,...原创 2019-06-23 14:48:16 · 377 阅读 · 2 评论 -
Thinking--AOP思想在前端中的应用
AOPAOP(Aspect Oriented Programming),面向切面编程。其从主关注点中分离出横切关注点是面向侧面的程序设计的核心概念。分离关注点使得解决特定领域问题的代码从业务逻辑中独立出来。具体到 Javascript 来说,由于语言本身的特性,天生就具有运行时动态插入逻辑的能力。重点在于在原函数上增加其他功能并不改变函数本身。Spring中的Advice:前置通知(Befo...原创 2019-06-02 16:28:38 · 425 阅读 · 0 评论 -
Thinking--函数参数Normalize思想在前端中的应用
Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想。Normalize标准化:Normalize发组件过程中,为了提高组件的灵活性,我们通常需要支持多种传参格式,如何优雅的控制和组件内部解耦变得尤为重要!示例: Vue的 clip-board 指令,支持两种传参方式。如果是字符串,则为要拷贝的文本内容如果是对象,对象中的text属性,为要拷贝的文本内容<...原创 2019-06-02 14:16:57 · 455 阅读 · 0 评论 -
Thinking--IOC思想在前端中的应用
Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想。IOC系统中,经常会出现 A 模块,依赖 B 模块,同时也依赖 C 模块的情况。我们通常的处理方式是将 B、C 模块直接引入到 A 模块中,这个获取过程都在 A 模块中实现,随着业务的扩充,A 模块可能还需要 D、E、F… 等等模块,这将导致代码高度耦合并且难以维护和调试。且未来想要删除某模块,需要删除模块的代码,同时需...原创 2019-06-02 10:52:37 · 374 阅读 · 0 评论