公告:携程招聘java、前端、测试、产品等,请发简历至374947554@qq.com,帮内推!

js查找树结构某元素,并找到其所有祖先

前言

写了一个类似element ui的级联面板的那个组件,不同的是,组件可以类似tree选择,选择某个子元素,就返回单个子元素,选择所有子元素,返回父元素。回头整理一下。开源出来。

难点

感觉难点就是数据回填,数据操作倒是不是很难。

数据操作思路:

小tips,注意vue深度监听对象新老值如何保持不一样

前言

假如你用vue监听复杂对象的时候,新旧值通常是一样的,vue官方也给出了解释:

注意:在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。

那么,问题来了,如何让vue深度监听对象新老值如何保持不一样?

Vue官方也给出了方案:

js处理大数据数组循环的一些性能优化

前言

上一节我写了观察者模式,是一种设计模式。这些设计模式就是一些思路。当然,关于排序,有快速排序法,关于查找有二分查找法等等,这些都为我们提供了一些思路。那么对于避免不了的大数据循环,分类,查找,有什么更加提高性能,或者说是降低内存消耗的方法吗?

案例

假设后端返回数据如下:

Proxy和defineProperty实现数据观察(观察者模式)

前言

说到vue的原理,大家都知道是通过defineProperty实现对数据的的观察,也知道vue3.0改成了Proxy。关于代理模式(其实也是一种设计模式),最新es6 有实现代理的方法,即我们可以用Proxy。

关于Proxy,文档还是阮一峰老师的es6,可以结合reflect一起学习。这里就不多用语言来描述了。

defineProperty

我们知道,vue中,有$set方法来强制视图更新,当然也有数组的一些操作。其实这是defineProperty 来观察对象或者数组的一些缺陷。简单实现一个defineProperty观察数据的方法。