JavaScript 链式调用实现原理
实现 jQuery 这种链式调用,每个方法返回 this 即可 const count = { value:0, add(num){ this.value += num return this }, del(num){ this.value -=…
vue-router 中如何保护路由?
Vue Router 提供路由守卫的功能,可以在路由守卫里做判断逻辑,校验用户的权限,实现路由访问的控制 路由的模式 hash 模式利用 location.hash 作为路…
简单实现一个 Redux 并在 React 中应用
Redux 架构模式的基本概念其实并不太复杂,而 React-Redux 就是 Redux 架构在 React 中的实现。初识 Redux 是在刚开始学 React 的那段时间接触状态管…
React 组件基本优化实践记录
最常用的 shouldComponentUpdate 通过 shouldComponentUpdate 判断组件状态更新时是否重新渲染组件,如果 props 中数据对象数组有太多层慎用 <Compo…
使用 Async 异步函数提升 Promise 的易用性
在写 JS 的时候我目前较常用到的两大语法糖分别是 ES2015 中的 Class 与 ES2017 中的 Async。Async 目前处在 ECMAScript Proposals 的 stage4 阶段(…
z-index 简单介绍
阐述 z-index 属性,并说明如何形成层叠上下文(stacking context),z-index 值是指CSS用于控制元素在页面中的堆叠顺序的属性,具有较高值的元素会覆…
找出链条中其对应的所有的父级 name
已知数据格式,实现一个函数 fn ,给一个 id 找出链条中其对应的所有的父级 name,使用 JS 分别用 DFS 和 BFS 数据格式 const data = [ { id: 1, name…
JavaScript 里的 this 关键字
由 new 调用?绑定到新创建的对象。由 call、apply 或 bind 调用?绑定到指定的对象。由上下文对象调用?绑定到那个上下文对象。默认:在严格模式下…
Fiber Reconciler 简单介绍
在 React 官方文档中,对 Reconciler 的定义是两个 DOM 树 diff 过程的算法。当用户界面第一次渲染界面时,React 会创建两颗树,一颗是节点树,每个节…
mouseover/mouseout 和 mouseenter/mouseleave 的区别
mouseover/mouseout 和 mouseenter/mouseleave 都是鼠标事件,但它们的触发方式和效果略有不同。 mouseover/mouseout 触发方式:当鼠标指针从元素外部…