学习笔记(7)
学习笔记(7)
文章目录
- 学习笔记(7)
- 移动端手势缩放
- requestAnimationFrame
- requestAnimationFrame优势
- 节流和防抖的区别
- offsetWidth clientWidth等区分
- 无状态组件,纯组件的一些理解
- 无状态组件
- 纯组件
- api sdk的理解
- API
- SDK
- 通俗语言解释：
- API：
- SDK:
- 405状态码
移动端手势缩放
pinchzoom能够实现，但它大量的操作dom节点，在react中引入时不能控制组件的添加和卸载，因为是在另一个文件里操作了dom节点，导致在父组件移除子组件的时候会报错，所以建议使用hammer.js
react和hammer.js结合：https://www.npmjs.com/package/react-hammerjs
react中使用hammer.js实现手势缩放/移动等功能：https://github.com/LynnWonder/dva-router-demo
requestAnimationFrame
References：requestAnimationFrame 知多少？
requestAnimationFrame优势
- **由系统来决定回调函数的执行时机。**具体一点讲就是，系统每次绘制之前会主动调用 rAF 中的回调函数，如果系统绘制率是 60Hz，那么回调函数就每16.7ms 被执行一次，如果绘制频率是75Hz，那么这个间隔时间就变成了 1000/75=13.3ms。换句话说就是，rAF 的执行步伐跟着系统的绘制频率走。它能保证回调函数在屏幕每一次的绘制间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。
那么关于setInterval 它的缺点很明显就是可能不是按间隔来执行函数，但是我们用setTimeout来模拟它不就规避了这个问题吗？为什么还会出现动画卡顿？
理由：
实现动画 setTimeout setInterval requestAnimationFrame
在游戏引擎中，如果使用setTiemout方法，那么它就是使用CPU去计算更新的。有一点需要注意的是：CPU计算更新的任务完成后，并不代表这些更新就能立刻显示在浏览器上，因为还必须等待浏览器的下一次刷新，才能显示更新后的动画。因此，如果CPU的的更新频率和浏览的刷新频率存在误差，那么势必会影响动画的流畅性。
因此用requestAnimationFrame会和浏览器刷新频率一样，避免卡顿问题 - CPU节能：
使用 setTimeout 实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，而且还浪费 CPU 资源。而 rAF 则完全不同，当页面处理未激活的状态下，该页面的屏幕绘制任务也会被系统暂停，因此跟着系统步伐走的 rAF 也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了 CPU 开销。
- 函数节流
移动端 touchmove高频事件与requestAnimationFrame的结合优化
function raf_throttle(fn){ //touchmove scroll节流
var ticking=false;
var that=this;
return function(e) {
var ev=e||window.event;
// console.log("正1确的e",e);
if(!ticking) {
ticking = true;
requestAnimationFrame(function(){
//console.log("正2确的e",ev);
fn(ev);
ticking = false;
});
}
}
};
在我的demo中用法和上面相同；
下面重新写了一个demo来实现一个方格的移动：包含css动画，以及js实现包含setTimeout和requestAnimationFrame
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animationtitle>
<style>
.box{
position:relative;
left:10px;
width:100px;
height:100px;
border:solid 2px red;
/*这是鼠标过渡效果*/
transition: width 1s;
/* 下面是纯粹css动画*/
animation: box 2s infinite;
}
@keyframes box {
from {left:0;}
to {left:100px;}
}
.box:hover{
width:200px;
}
style>
head>
<body>
<div class="box">div>
<script>
// 写一个方块平移动画
// use setTimeout
/** const my_interval=(func,delay)=>{
return setTimeout(()=>{
func();
my_interval(func,delay);
},delay);
};
const move=(dom)=>{
let left=(dom.style.left);
if (parseInt(left)<=100){
console.info(left,parseInt(left));
dom.style.left=`${parseInt(left)+1}px`;
}
// requestAnimationFrame-用
requestAnimationFrame(()=>{
move(dom);
});
};
let box=document.querySelector('.box');
box.style.left=`${0}px`;
// my_interval(()=>{
// move(box);
// },16.7);
requestAnimationFrame(()=>{
move(box);
console.info('123');
})**/
// test my_interval function
// my_interval(()=>{
// console.info(new Date());
// },1000)
script>
body>
html>
节流和防抖的区别
函数节流与函数防抖的区别
- 防抖：debounce，将一些高频事件如scroll滚动事件合并成一个事件，比如说滚动结束才去执行或者说隔一段时间执行，函数特点是如果有timer就先清除timer保证事件只运行一次。
将若干函数调用合成为一次，并在给定时间过去之后，或者连续事件完全触发完成之后，调用一次。 - 节流：throttle，将一些高频事件变成低频事件，函数特点是：如果!flag就置flag为true，同时执行函数，函数内部将flag置为false，如果有flag说明还在执行上次的函数。（即通过设置标志位的方式实现节流）
当达到了一定的时间间隔就会执行一次；可以理解为是缩减执行频率
demo:https://github.com/LynnWonder/javascript_prac/blob/master/debounce_throttle.html
const debounce=(fn,delay)=>{
let timer=null;
return (...args)=>{
if(timer) clearTimeout(timer);
timer=setTimeout(()=>{
fn.apply(this,args);
},delay)
}
}
// 节流函数还有一种是通过时间戳实现，这里不再赘述
const throttle=(fn,delay)=>{
let timer=null;
return (...args)=>{
if(!timer){
timer=setTimeout(()=>{
fn.apply(this,arguments);
timer=null;
},delay)
}
}
}
const throttle2 = function(fn, delay) {
let preTime = Date.now()
return function() {
const context = this
let args = arguments
let doTime = Date.now()
if (doTime - preTime >= delay) {
fn.apply(context, args)
preTime = Date.now()
}
}
}
const throttle_flag=(fn,delay=500)=>{
// 通过设置标志位的方式实现节流效果
let flag=false;
return (...args)=>{
if (!flag){
flag=true;
setTimeout(()=>{
fn.apply(this,args);
flag=false;
},delay);
}
}
};
offsetWidth clientWidth等区分
scrollTop、offsetHeight和offsetTop等属性用法详解以及兼容性的解决
javascript中top、clientTop、scrollTop、offsetTop的讲解
| clientWidth | offsetWidth | scrollWidth |
|---|---|---|
| width+padding | width+padding+border | 可视区域宽度+被隐藏区域宽度 |
我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：
一、== offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。==
二、== offsetTop 只读，而 style.top 可读写。==
三、== 如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。==
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
无状态组件,纯组件的一些理解
组件高级知识（受控组件，无状态组件，高阶组件，纯组件）
无状态组件
本质：就是一个单纯的render函数，没有shouldComponentUpdate生命周期函数，所以每次state更新，它都会重新绘制render函数。通常，我们写的renderMyxxx就是一个无状态组件。(它就是一个render函数)
特点：只关注UI层
- 它自身的一切只与props相关，一切需要定义state的地方，你都应该抽离到容器组件上面，或者使用redux之类的东西，进行抽离。
- 它自身没有this的概念，因为本身就是一个函数，而class类型的组件是要进行实例化的，所以会有this的概念。
- 它不能使用生命周期钩子函数。
纯组件
特点：通过控制shouldComponentUpdate生命周期函数，减少render调用次数来减少性能损耗的。
- 减少了手动判断
state变化的繁琐操作，但该组件也具有一定的缺陷，因为它只能进行一层浅比较，简单来说，它只比较props和state的内存地址，如果内存地址相同，则shouldComponentUpdate生命周期就返回false。 PureComponent中如果有数据操作最好配合一个第三方组件——Immutable一起使用。- 大部分情况下都可以使用pureComponent组件来替换Component
api sdk的理解
什么是API，SDK和API之间有什么关系呢？
API
application programming interface：
API即“应用程序编程接口”，是一些预先定义的函数，目的是作为“介面”沟通两个不同的东西，提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
其实就是别人已经写好的可以实现特定功能的函数，而你只需要根据他提供好的接口，也就是调用他的方法，传入他规定的参数，然后这个函数就会帮你实现这些功能。
SDK
Software Development Kit
SDK即“软体开发工具包”，一般是一些被软件工程师用于为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件的开发工具的集合。通俗点是指由第三方服务商提供的实现软件产品某项功能的工具包。
通常SDK是由专业性质的公司提供专业服务的集合，比如提供安卓开发工具、或者基于硬件开发的服务等。也有针对某项软件功能的SDK，如推送技术、图像识别技术、移动支付技术、语音识别分析技术等，在互联网开放的大趋势下，一些功能性的SDK已经被当作一个产品来运营。
通俗语言解释：
API：
前端调用后端数据的一个通道，就是我们俗说的接口，通过这个通道，可以访问到后端的数据，但是又无需调用源代码。
SDK:
工程师为辅助开发某类软件的相关文档、范例和工具的集合，使用SDK可以提高开发效率，更简单的接入某个功能。
举例说明：一个产品想实现某个功能，可以找到相关的SDK，工程师直接接入SDK，就不用再重新开发了。
405状态码
405：禁用请求中指定的方法；