JavaScript
文章平均质量分 67
JavaScript 是属于 HTML 和 Web 的编程语言。
米斯特曹、
互联网时代、吾辈当自强!
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
JavaScript - 递归:将平级结构转为树状结构。
5、遍历一级数据,递归调用listToTree工具函数,判断父级id是否与当前递归项的id相等,找到子级继而push到每项的children子级。在前端日常开发中,会频繁的重组来自服务端的基础数据结构,本篇文章记录采用递归的方式,将平级数据结构转为树状数据结构。4、筛选出一级数据,并且给每一级添加 children 字段,用于存储子级。2、该工具函数接收三个值,分别是:重组前的数据、数据ID、重组后的数据。1、减少服务器压力,繁琐的数据结构重组交给客户端处理。4、优化用户对系统的整体体验感。原创 2021-12-07 23:03:10 · 2561 阅读 · 5 评论 -
Vue移动端 / PC端适配解决方案:postcss-px-to-viewport
本文介绍一款移动端 / PC端非常不错的适配解决方案:postcss-px-to-viewport 【进入官网】在此之前为解决适配问题“普遍”会给html根节点设置font-size来计算单位值,兼容多端适配问题。开发者需要实时换算单位、还需要精确到六七位小数点。这样的解决方案在现在看来似乎不是最简洁高效的方案。希望有这样一种方案:首先、不论转换是否方便,我就是不想在开发代码的时候换算这些单位,更不想去操心什么转换系数(根节点单位) 我会考虑某些属性不需要转换为REM、VW等,如果统一...原创 2021-08-09 18:09:21 · 4411 阅读 · 6 评论 -
Vue实现前端页面缓存、分页记忆、性能最大化
前言:产品性能优化是每个开发者老生常谈的话题,优秀的产品之所优秀,绝不单单只是因其功能强大、背景稳定,用户对于产品的交互体验、视觉效果恰恰占很大的分值。试想以下两款产品,作为用户的你更倾向于使用哪款?产品A:界面简洁清晰,色系搭配完美,既能体现各模块数据增长趋势,又能迅速把使用者眼球聚集到绿色增长的具体数字重点区域。产品B:一眼瞅上去全是满屏文字在密密麻麻排挤,操作栏根本不知道可以点击,页面按钮采用的原生样式,菜单全部展开给用户增加了很多额外操作。web前端已..原创 2021-06-05 16:24:30 · 2311 阅读 · 5 评论 -
如何在Vue中使用Echarts可视化库
前言:由于最近项目需要做可视化数据展示,也就是用图表展示数据,他还有一个很高端的名字:“大数据可视化”(参考图一),首先考虑选择什么图表库来作为基础开发,被认可的目前有三个:介绍:Hcharts:国外的一款图表库,是图表库的领头羊Echarts:百度开发的数据可视化库,国内图表库的 “领军人物”AntV:是蚂蚁金服开发的数据可视化库总结出以下几个优略点区别Echarts、Hcharts哪个比较合适:1、学习容易程度:只要懂JS,那么相信你能很快上手。两者打分相同。但是百原创 2020-10-18 15:12:47 · 10784 阅读 · 37 评论 -
踩坑:Vue sass-loader V10配置全局变量
本文字数:349 预计阅读时间:1.5分钟问题:Vue中使用 scss 配置全局变量时 报错 ~版本信息:Vue 2.6.11 Cli4.5.00sass-loader10.0.2node-sass4.14.1Sass、Less是强化 CSS 的辅助工具,它并不是一门语言,但能有效提高开发效率,最直白的感受是大幅度减少了各种寻找Class,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mix...原创 2020-10-09 16:23:20 · 8152 阅读 · 13 评论 -
ES6 - 手摸手教你解构后台特定字段的正确姿势
前言:如果你是一名前端开发者,那么请确保下文能够一字不落的看完,因为接下来的问题你曾经100%遇到过、且高达90%的人会忽略或者处理方式不够简洁....应用场景:在处理来自后台的数据时,字段名不匹配、掺杂了多余数据。假设现有一个编辑功能,编辑时需要做数据回显,即根据id向后台查询该条数据的关联数据,把结果赋值给视图绑定的数据模型。ok,一切看起来并没有什么问题,接着往下看:数据模拟:// 模拟后台接口返回的数据let res = { id: "21432423523", .原创 2020-07-21 10:27:11 · 2441 阅读 · 7 评论 -
JavaScript-ES6 神秘的解构赋值
写这篇文章之前早已有“提笔画西游”的冲动,苦苦翻阅很多资料终于理解了神秘感十足的解构赋值,可奈何最近忙于工作上的事情挤不出时间更新博客。话不多说、先请JS祖师爷 - Douglas Crockford!解构赋值:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。1、数组解构赋值:通常定义变量并赋值的时候只能一个一个定义之后再赋值,例如:let...原创 2020-04-28 17:33:49 · 585 阅读 · 1 评论 -
ES6中Promise、async&await从入门到精通!
1、Promise 对象①:Promise可以看作为一个容器,容器内部装着未来才会结束的异步操作;②:Promise用于三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败);③:状态一旦开始,只有两种可能:从 pending 变为 fulfilled 和从 pending 变为 rejected,且只会有一个最终结果;④:Promise对象是...原创 2020-03-18 17:18:55 · 1583 阅读 · 10 评论 -
JavaScript之ES6数组排序 高逼格!
前言:针对于前端开发者来讲、数组排序的应用场景其实并不多,大多数情况下都是后台数据排序之后再返回给前端。但是很多面试题中会经常遇到数组排序的问题,经典案例有冒泡排序、插入排序、选择排序等等... 逻辑性比较强硬。为了追求完美、拒绝花里胡哨,所以今天写一篇以ES6相关知识实现排序的文章、并且挂载至原型链上方便使用,希望对大家的开发有所帮助!技术点:ES6中 sort()方法、箭头函数,p...原创 2020-01-17 14:17:04 · 23206 阅读 · 11 评论 -
JavaScript之call()、apply()、bind() 详解!
作为一名合格的前端开发者,大家都知道JavaScript中的this指向问题是一件很苦恼的事情,因为你稍不留意他就跳来跳去 很多Bug就是在不经意间this上下文出错导致。call()、apply()、bind()的作用也恰恰与this有关,因为在项目开发中很少用到,大家只知道他们是为了:“改变this指向”,但是这样草草了事的答案,只会暴露出你对它们“根本不了解”!!OK,先来看一段简单的代码...原创 2020-01-05 13:24:43 · 3321 阅读 · 7 评论 -
JavaScript之递归 详解!
作为一位名副其实的前端菜鸡,不懂递归肯定是不符合气质的。今天就深究一下递归的定义以及如何运作的,他的内部到底干了什么不可告人的事情?首先了解一下递归的定义:递归:递归函数自己调用自己,且函数内部必须有结束条件、否则就是一个死循环;递归案例:求 n的阶乘 (循环 || 递归)阶乘公式先了解一下:即n的阶乘 = n*(n-1)的阶乘,如归使用for循环来做这件事件就很...原创 2020-01-02 15:04:04 · 3816 阅读 · 5 评论
分享