axios使用基本流程
主要4点
css 中~的作用：选择当前选择器后代的所有元素
封装一个简易版的promise
function Promise(ex) { this.PromiseState = 'pending' this.PromiseResult = null const that = this this.callBacks = [] function resolve(data) { if(that.PromiseState !== 'pending') return that.PromiseResult = data that.PromiseState = 'resolve' // if(that.callBack.onResolve) { // that.callBack.onResolve(data) // } that.callBacks.forEach(element => { element.onResolve(data) }) } function reject(data) { if(that.PromiseState !== 'pending') return that.PromiseResult = data that.PromiseState = 'reject' // if(that.callBack.onreject) { // that.callBack.onreject(data) // } that.callBacks.forEach(element => { element.onreject(data) })
}
try { ex(resolve, reject)} catch(e) { reject(e) }
}
Promise.prototype.then = function (onResolve, onreject) { if (this.PromiseState === 'resolve') { onResolve(this.PromiseResult) } if (this.PromiseState === 'reject') { onreject(this.PromiseResult) } if (this.PromiseState === 'pending') { this.callBacks.push({ onResolve, onreject }) } }
8.29
手写call
Function.prototype.myCalls = function(context) context =context | window; let agr = [...arguments].slice(1); context.fn = this; let result = context.fn(...agr); return result
Tranistion组件实现动画
CprU6.png
//使用Tranistion组件实现动画，一个元素或者组件的(显示|隐藏，创建|移除 //进入前v-enter (v-enter-from)VUE3 //进入中 v-enter-active // 进入后v-enter-to //离开前v-leave (v-leave-from)VUE3//离开中 v-leave-active //离开后 v-leave-to //需求:一个盒子再显示隐藏的时候做淡入淡出动画// 1．准备盒子 // 2．控制显示隐藏// 3．加入动画
8.31
IntersectionObserver 浏览器视口监视
// 创建观察对象实例 const observer = new IntersectionObserver(callback[, options]) // callback 被观察dom进入可视区离开可视区都会触发 // - 两个回调参数 entries , observer // - entries 被观察的元素信息对象的数组 [{元素信息},{}]，信息中isIntersecting判断进入或离开 // - observer 就是观察实例 // options 配置参数 // - 三个配置属性 root rootMargin threshold // - root 基于的滚动容器，默认是document // - rootMargin 容器有没有外边距 // - threshold 交叉的比例
// 实例提供两个方法 // observe(dom) 观察哪个dom // unobserve(dom) 停止观察那个dom
本文使用 markdown.com.cn 排版
