xun__xing的博客

DebugValueHook一、DebugValueHook一、DebugValueHookuseDebugValue：用于将自定义Hook的关联数据显示到调试栏function useTest(){ const [students, ] = useState([]) return students;}export default function App() { useState(0) useState("abc") useEffect(() =>

Diff算法—前端框架的基石一、Diff算法一、Diff算法什么是Diff算法——比较差异算法（找出必须要更新的DOM的办法）。比较什么差异——DOM树差异。如何比较——用js模拟真实dom（virtual dom—虚拟DOM），比较DOM树变化前后的差异虚拟DOM就是利用js运行速度快的这一优点对操作DOM进行优化的，用js模拟DOM树把DOM的对比，放在Js层来做。提高重绘性能。真实DOM虚拟DOMDiff算法的作用是用来计算出 Virtual DOM 中被改变的部分，然后针对该部

JavaScript中this的四种绑定形式一、this的默认绑定1.正文二、this的隐式绑定1、正文三、this的显式绑定：(call和bind方法)1、正文四、new绑定1、正文一、this的默认绑定我们通过故事的形式来引出this的绑定原理（可能不太贴切，见谅）【故事-开始】有一个年轻人叫"迪斯"（this）,有一天，迪斯不小心穿越到一个叫 “伽瓦斯克利”（javascript）的 异世界，此时此刻迪斯身无分文， 他首先要做的事情就是——找到他的住宿的地方——调用函数的对象。【故事-线路1

Array一、Array1.Array属性1.constructor2.length 属性3.prototype2.Array 对象方法1.concat2.copyWithin3.entries4.every5.fill6.filter7.find8.forEach9.includes10.join11.map12.pop13.push14.reduce15.reverse16.shift17.slice18.sort19.splice一、Array1.Array属性1.constructor在 J

详解offset、client、scroll一、offset属性：二、scroll属性：三、client属性：一、offset属性：offsetWidth = width + border + paddingoffsetHeight = height + border + paddingoffsetTop = 元素相对于浏览器顶部的距离offsetLeft = 元素相对于浏览器左边的距离功能：只读（获取）不写（设置）子元素的offsetTop和offsetLeft：关键看父元素是否设置了定

String对象一、String对象1.String 对象属性1.constructor2.length 属性3.prototype2.String 对象方法1.charAt2.charCodeAt3.concat4.fromCharCode5.indexOf6.includes7.lastIndexOf8.match9.replace10.slice11.split12.startsWith13.toLowerCase14.toUpperCase15.trim16.valueOf17.toString3.

babel预设一、babel预设1.babel预设二、babel插件1.`@babel/plugin-proposal-class-properties`2.`@babel/plugin-proposal-function-bind`3.`@babel/plugin-proposal-optional-chaining`4.`babel-plugin-transform-remove-console`5.`@babel/plugin-transform-runtime`三、webpack中运行一、babe

babel的安装和使用一、babel的安装1.babel简介2.babel的安装二、babel的使用1.babel的使用2.babel的配置一、babel的安装官网：https://babeljs.io/民间中文网：https://www.babeljs.cn/1.babel简介babel一词来自于希伯来语，直译为巴别塔巴别塔象征的统一的国度、统一的语言而今天的JS世界缺少一座巴别塔，不同版本的浏览器能识别的ES标准并不相同，就导致了开发者面对不同版本的浏览器要使用不同的语言，和古巴比伦

背景色变换一、实现一、实现var bg = document.getElementsByClassName('bg')[0];var dg = 0, timer = null;function changeColor(clear){ timer = setInterval(function(){ if(dg < 360){ bg.style.background = "linear-gradient("+dg+"deg,rgb(255,1

重力场一、实现一、实现var timer;function gravity(dom){ clearInterval(dom.timer); var g = 10,//重力加速度 speedX = 5,//初速度 speedY = 10; dom.timer = setInterval(function(){ speedY +=g; var newTop = dom.offsetTop + speedY;//计算当前位置

弹性运动一、实现一、实现var timer;function sprmove(dom,target){ clearInterval(timer); var a;//加速度 var speed = 0; var uf = 0.9;//摩擦系数 timer = setInterval(function (){ a = (target - dom.offsetLeft)/6; speed +=a; speed *=uf;

加速运动一、实现一、实现var timer;function speedup(dom){ clearInterval(timer); var a = 2;//加速度 var speed = 20; timer = setInterval(function(){ speed = speed + a; div.style.left = div.offsetLeft + speed + 'px'; },50)};...

属性运动+回调执行一、执行一、执行var div1 = document.getElementsByTagName('div')[0];var div2 = document.getElementsByTagName('div')[1];div1.onclick = function(){ movetion(this,{width: 400,height: 400,opacity: 70,top: 300,left: 300},function(){ movetion(div2,{

type方法封装，返回对象类型问题引出问题引出我们有时会遇到下面的问题：那么我们怎样准确判断一个对象的准确类型呢，特别是遇到类数组时，这里我们介绍三种常见方法：1.第一种: [ ].constructor / { }.constructor2.第二种：[ ] instanceof Array / { } instanceof ArrayA instanceof B,看A对象原型链上，有没有B的原型3.第三种：Object.prototype.toString.call([ ])

字符串字节长度一、求字符串字节一、求字符串字节var str = 'jg78*笑笑';//只有中文的Unicode编码大于255function getByteLength(str){ var count = 0; for(var i = 0;i < str.length;i ++){ if(str.charCodeAt(i) > 255){//charCodeAt返回参数Unicode编码 count +=2;//中文为2Byte }else{ count ++;

多物体运动一、实现一、实现var div = document.getElementsByTagName('div');for(var i = 0;i < div.length;i ++){ div[i].onmouseenter = function(){ cushion(this,800);//利用this，防止形成闭包 }; div[i].onmouseleave = function(){ cushion(this,100);

物体透明度变换一、实现一、实现var div = document.getElementsByTagName('div')[0];var btn = document.getElementsByTagName('button')[0];btn.onclick = function(){ cushion(div,0.8)}function getStyle(dom,attr){ if(window.getComputedStyle){ return window.g

缓冲运动一、实现一、实现var timer;//起开关作用function cushion(dom,target){ clearInterval(timer);//防止多次点击 var speed; timer = setInterval(function(){ speed = (target - dom.offsetLeft)/7;//控制速度大小 speed = speed > 0 ? Math.ceil(speed) : Math.floor(s

匀速运动一、实现一、实现var timer;//起开关作用function nuition(dom,target){//运动的元素，运动的距离 clearInterval(timer);//防止多次点击变成加速运动 var speed = target - dom.offsetLeft > 0 ? 7 : -7; //判断物体当前位置，决定运动方向 timer = setInterval(function(){ if(Math.abs(target

getElementsByClassName一、方法封装一、方法封装Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = function(name){ var allDomArray = document.getElementsByTagName('*'); //获取所有标签名 var lastDomArray = []; //声明数组保存符合条件的类

总结一、浏览器的基本组成二、渲染引擎-渲染模式1.网址到页面的内部过程2.渲染模式的历史意义三、Label标签四、属性和特性五、预加载+懒加载一、浏览器的基本组成用户界面浏览器引擎渲染引擎网络UI后端Js引擎数据存储二、渲染引擎-渲染模式1.网址到页面的内部过程输入网址：DNS解析，域名-IP地址负载均衡：找到那一方服务器处理请求Tomcat服务器创建连接：TCP三次握手，建立SocketTomcat中connection组件监听端口获取数据流：创建request.resp

这里写目录标题一、BOM了解1.BOM组成2.window 对象属性2.window 对象属性一、BOM了解window对象是BOM的顶层(核心)对象，玩转BOM，就是玩转window的属性和方法。Window对象它具有双重角色，既是通过js访问浏览器窗口的一个接口，又是一个全局对象。这意味着在网页中定义的任何对象，变量和函数，都是window的属性。1.BOM组成1.Window JavaScript 层级中的顶层对象表示浏览器窗口2.Navigator包含客户端浏览器的信息3.Histor

优化页面请求一、引出一、引出函数防抖就是在函数需要频繁触发情况时，只有足够空闲的时间，才执行一次。(即：多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。)举例：百度搜索时，不会打一个字就会提示相关搜索，而是隔一段时间再进行提示var int = document.getElementsByClassName('intp')[0];function debounce(handle,delay){ var timer = null; return functi

bind方法上期答疑一、网络性能上期答疑function add() { // 第一次执行时，定义一个数组专门用来存储所有的参数 var _args = Array.prototype.slice.call(arguments); // 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值 var _adder = function() { _args.push(...arguments); return _adder; }

函数式编程柯里化一、引出二、实现三、习题练习一、引出接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。二、实现function add(a,b,c,d){ return a + b + c + d;};function FixedParmasCurry(fn){ var _arg = [].slice.call(arguments,1);//0:fn,剪切后面的 return function(){/

bind方法上期答疑一、引出二、原理上期答疑1.30CAC0040取出40,3SFASDF92取出92var reg = /\d{2}$/g;2.使字符串内空格统一，如:蓝 色 理 想——蓝 色 理 想var reg = /\s+/g;str.replace(reg,' ');3.判断字符串是不是由数字组成var reg = /^\d+$/g;4.手机电话号码正则表达式reg = /^1\d{10}$/;5.只能输入数字和.reg = /^[0-9\.]+$/g;6.只能

正则表达式一、正则表达式创建1.`var reg = /test/;`2.`var reg = new RegExp('test');`3.正则表达式的exec方法二、正则表达式模式1.一片两片三四片，落尽正则全不见{n},{n-1,n},{1,}。2./^开头,结尾$/3.点“.”4.或“|“5.括号6.字符集合[abc]7.反字符集合[^abc]8.边界与非边界9.数字与非数字10.空白11.单词字符12.反向引用13.不记录子正则表达式的匹配结果14.正向预查15.匹配元字符三、正则表达式修饰符四、正

键盘事件上期答疑一、键盘事件二、keydown和keypress的区别三、键盘事件属性上期答疑1.实现一个方块可以拖拽的小demovar div1 = document.getElementsByClassName("box1")[0];function getStyle(elem,prop){ if(window.getComputedStyle){ return window.getComputedStyle(elem,null)[prop]; }else{

web发展史的初步了解上期答疑一、鼠标事件二、区分鼠标按键三、mousedown和click的冲突四、习题练习上期答疑1.实现事件对象和事件源对象兼容ele.onclick = function(e){ var event = e || window.event; var target = event.target || event.srcElement; }2.封装兼容性事件绑定方法。function addElement(elem,type,handle){//传入绑定的对象，事件类

事件绑定、分类上期答疑一、浏览器的初步了解上期答疑1.封装兼容性方法getStyle(obj,prop)返回元素计算样式;一、浏览器的初步了解Web就是互联网。Mosaic，是互联网历史上第一个普遍使用和能够显示图片的网页浏览器，于1993年问世。1.后更改为Netscape Navigator（即网景）。2. 而JavaScript作为Netscape Navigator 的一部分首次出现在1996年。初命名为LiveScript，后来因为市场宣传的原因改为：JavaScript，版权归O

脚本化CSS一、读写元素css属性二、查询计算样式一、读写元素css属性dom.style.prop：可读写行间样式，没有兼容性问题，碰到float这样的关键字属性，前面应加css（float ~ cssFloat）复合属性必须拆解，组合单词变成小驼峰式写法（background-color~backgroundColor）且写入的值必须是字符串格式。var div = document.getElementsByTagName('div')[0];div.style = 'width: 200

窗口属性上期题目解答一、滚动条1.滚动条滚动距离2.查看视口的尺寸二、元素尺寸1.查看元素的几何尺寸2.查看元素的尺寸位置三、滚动条滚动1.window上有三个方法上期题目解答1.封装函数insertAfter()；功能类似insertBefore()，即将目标元素放在指定元素后面。Element.prototype.insetAfter = function(targetNode,afterNode){//原型上封装，节点都能够调用 var dressNode = afterNode.nex

DOM操作上期题目解答一、DOM操作1.增加2.插入3.删除4.更换二、Element节点的一些属性三、Element节点的一些方法上期题目解答1.遍历元素节点树，要求不能用children属性Element.prototype.retElementChild = function(){//在Element上定义,节点都能调用 var temp = {//定义一个类数组 length : 0,//类数组必须有length属性 push : Array.prototype.push

DOM操作一、查找元素节点二、遍历节点树三、元素节点树的遍历四、节点的四个属性五、习题练习DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系一、查找元素节点首先我们要了解什么是document:通过下图我们能够了解到，document代表整个文档，就算html标签都是它的子元素以下标签有实时性（先找到元素，后面再动态添加时，结果中依旧可以找到）1.document.getElementById() :元素id 在Ie8以下的浏览器，不区分id大小写，而且也返回匹配

web发展史的初步了解一、数组属性二、数组方法以下方法会改变原数组1.pop方法：将数组的最后一位剪切并返回，且无法传参2.shit/unshit方法：删除并返回数组的第一个元素/向数组的开头添加一个或更多元素，并返回新的长度3.reverse方法:返回逆反一个数组后4.splice方法:添加或删除数组中的元素5.sort方法:数组排序6.push方法:向数组的末尾添加一个或多个元素，并返回新的长度以下方法不改变原数组1.concat方法：连接两个或多个数组二.toString方法：把数组转换为字符串，并返

继承上期题目解答一、传统形式——原型链二、借用构造函数三、共享原型四、圣杯模式（面试时问继承的标答）五、其他上期题目解答1.请输出下面构造该对象的构造函数的名function A(){};function B(){};function CreateObj(){ var n = Math.random(); if(n < 0.5){ return new A(); }else{ return new B(); }}var obj = CreateObj();console

原型、原型链一、原型二、\_\_proto\_\_三、原型链四、call和apply五、练习巩固一、原型原型是function对象的一个属性，定义了构造函数制造出来的对象的‘公共祖先’。（js中万物皆对象，原型也是对象）1.普通对象和函数对象var test1 = {}/[];var test2 = new Object();var test3 = new Test();//test1-3都是普通对象//Function Object 是通过 New Function()创建的functi

web发展史的初步了解上期答疑一、定义一个对象二、构造函数的内部原理三、包装类四、练习题上期答疑var x = 1;if(function f(){}){//if的()使函数成为立即执行函数，执行后就销毁 x += typeof f;//判断成功后立即执行函数就已经销毁，这里typeof返回'undefined' console.log(x);//X+'undefined'='1undefined'}一、定义一个对象plainObject 对象字面量/对象直接量var obj = {

web发展史的初步了解一、闭包二、闭包的作用一、闭包当a函数已经执行完了，b函数才开始。此时a函数要销毁自己的执行期上下文b被保存到了外部，同时保存了a的劳动成果所以内部被保存到了外部，必定生成闭包。闭包会导致原有作用域链不释放，造成内存泄漏（被占用）二、闭包的作用1.累加器的应用函数每被调用一次。实现一次累加。2.缓存应用obj保存着两个函数被return返回到了外...

作用域、域链上期题目解答上期题目解答题目解析答案