@小倪同学-优快云博客

原创 data 为什么是一个函数

在前端开发中，特别是在使用Vue.js框架时，"data" 通常是一个函数，而不是一个变量。这是因为在Vue组件中，"data" 是一个函数，用于返回包含组件状态的对象。

2023-12-24 19:37:45 1389 2

高阶组件（HOC）是一个将组件作为参数并返回一个新组件的函数。由于高阶组件接受他的组件参数来动态创建子组件，且不会修改或复制其组件中的任何行为，因此他与纯组件较为类似。由于 Mixins 产生的问题比其带来的价值要大的多，因此我们要么避免过早的抽象，要么可以使用高阶组件。不要在 render 方法内使用高阶组件，否则每一次渲染都会创建一个新的组件，并引起该组件的卸载和渲染。高阶组件返回的新组件中将没有参数组件中的任何静态方法。高阶组件可以用来作为状态的抽象和管理、属性的管理、组件的渲染等。

2023-12-13 20:54:55 609

原创 react中的setState是同步还是异步

setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState ， setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新。setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。

2023-12-13 19:04:26 577

原创 cookies，sessionStorage 和 localStorage 的区别

sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，可以方便的在 web 请求之间保存数据。sessionStorage、localStorage、cookie 都是在浏览器端存储的数据，其中 sessionStorage 的概念很特别，引入了一个“浏览器窗口”的概念。关闭窗口后，sessionStorage 即被销毁。Firefox 和 Safari 允许 cookie 多达 4097 个字节，包括名（name）、值（value）和等号。

2023-12-12 17:30:09 482

原创 es6 中的箭头函数和普通函数有什么区别？

箭头函数没有自己的 this,他的 this 永远指向其定义环境，任何方法都改变不了其指向，如 call()、bind()、apply()。变量提升：由于 js 的内存机制，function 的级别最高，而用箭头函数定义函数的时候，需要 var（let、const）关键字，而 var 所定义的变量不能得到变量提升。2、箭头函数中，this 指向其定义环境，任何方法都改变不了其指向，如 call( ）、bind（）等；箭头函数不能当作构造函数，也就是说，不能使用 new 命令，否则会报错。

2023-12-12 17:21:40 647

原创 http 与 websocket

他是一种协议，万变不离其宗，也是基于 TCP 协议的；和 HTTP 协议是并存的两种协议。客户端发起 http 请求，经过 3 次握手后，建立起 TCP 连接；http 请求里存放 WebSocket 支持的版本号等信息，如：Upgrade、Connection、WebSocket-Version 等；Websocket 是一个持久化的协议，http 不支持（长连接，循环连接的不算）；服务器收到客户端的握手请求后，同样采用 HTTP 协议回馈数据；都是一样基于 TCP 的，都是可靠性传输协议。

2023-12-12 11:50:50 609

原创 js 获取元素宽高的几种方法

功能与第二点相同，只存在于旧版本 IE 中(IE9 以下)，除了做旧版 IE 兼容，就不要用它了。除了能够获取宽高，还能获取元素位置等信息。可获取实时的 style。

2023-12-12 11:45:23 1161

原创 Ajax 请求的原理

由事件触发，创建一个 XMLHttpRequest 对象，把 HTTP 方法（POST/GET）和目标 URL 以及请求返回后的回调函数设置到 XMLHttpRequest 对象，通过 XMLHttpRequest 向服务器发送请求，请求发送后继续响应用户的界面交互，只有等到请求真正从服务器返回的时候才调用 callback()函数，对响应数据进行处理。简单的说，也就是 JavaScript 可以及时的向服务器提出请求并及时响应。，它是 IE5 中首先引入的，是一种支持异步请求的技术。

2023-12-12 11:40:53 1037

原创 typeof 使用以及 null 和 undefined 的判断区分

但是未被声明的变量不能用其他运算符运算，之外的其他运算符的话，会引起错误，因为其他运算符只能用于已声明的变量上。1.3.2 对象的创建方式是用关键字 new 后面跟上实例化的类的名字，当将一个函数通过 new 实例化之后，那么就创建了一个对象。== 运算符只比较值，不进行类型的比较，比较之前会进行隐式转化，null==undefined 返回 true.2.1 null 是一个表示"无"的对象，转化为数值的时候值为 0；用来和一个已经初始化的对象进行比较，这个变量可以是一个对象，也可以不是一个对象。

2023-12-11 21:14:38 726

原创什么是回调函数

一个回调函数，也被称为高阶函数，是一个被作为参数传递给另一个函数（otherFunction）的函数，回调函数在 otherFunction 中被调用。因为函数在 JavaScript 中是第一类对象，我们像对待对象一样对待函数，因此我们能像传递变量一样传递函数，在函数中返回函数，在其他函数中使用函数。当我们将一个回调函数作为参数传递给另一个函数时，我们仅仅传递了函数定义。能够将一个回调函数作为变量传递给另一个函数时，这个回调函数在包含它的函数内的某一点执行，就好像这个回调函数是在它包含的函数中定义一样。

2023-12-11 20:58:44 463

原创什么是Scss

Sass(Syntactically Awesome Style Sheets) ,是一种 css 预处理器和一种语言, 它可以用来定义一套新的语法规则和函数，以加强和提升 CSS. 它有很多很好的特性，但是它有类似 Ruby 的语法，没有花括号，没有分号，遵循严格的缩进。混合宏结合变量使用，是个很普遍的例子, 最常见的例子就是创建圆角按钮. 创建一段实现圆角代码的混合宏，用传入的变量来代替圆角值, 这样，可以根据传入变量值不同，实现不同的圆角按钮。可以把子元素放入父元素里面。

2023-12-11 20:36:59 784

原创重绘和回流(重排)的区别

填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变。重绘：改变页面样式的时候，不会影响其他元素在页面的配置。回流必定会引发重绘，但重绘不一定会引发回流。元素尺寸的改变——大小，外边距，边框。添加或删除可见的 DOM 元素。元素位置的改变，或者使用动画。页面渲染初始化(无法避免)浏览器窗口尺寸的变化。

2023-12-11 20:31:23 389

原创 JS 的作用域

代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域。作用域有上下级关系，上下级关系的确定就看函数是在哪个作用域下创建的。作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。在 Javascript 中，作用域分为。在固定的代码片段才能被访问。

2023-12-10 19:07:18 369

原创 forEach()和 map()的区别和理解

关于 forEach()敲黑板：没有返回值！！！！参数：value 数组中的当前项，index 当前项的索引，array 原始数组；数组中有几项，那么传递进去的匿名回调函数就需要执行几次理论上这个方式是没有返回值的，只是遍历数组中的每一项，不对原来数组进行修改，但是可以自己通过数组的索引来修改原来的数组关于 map()敲黑板：有返回值，可以 return 出来！！！！参数：value 数组中的当前项，index 当前项的索引，array 原始数组

2023-12-09 20:28:16 376

原创清除浮动的最常用的方法，以及优缺点

隔墙法该方法通过 div.cl h16 这堵墙将两个父类分隔,弥补了 clear:both 方法中 margin 无效的情况,可以通过设置墙的高度来控制间隙。这是最简单的清除浮动的方法，就是给盒子增加 clear:both；表示自己的内部元素，不受其他盒子的影响。,大意就是当父元素不给高度的时候,内部元素不浮动时会撑开,而浮动的时候，父元素变成一条线。的本意是将超出父类的部分隐藏。

2023-12-09 20:00:55 372

原创项目优化过程

1.在 constructor 改变 this 指向代替箭头函数和 render 内绑定 this，避免函数作为 props 带来不必要的 rerender。1.减少 Http 请求，合并页面资源，js，css 单一入口。js 特殊可以分为两个文件，一个业务逻辑，一个非业务逻辑。1.使用打包构建工具（webpack）清除注释，压缩页面资源，js、css、html、图片、字体等等。3.分离非业务逻辑相关 vendor 依赖，使用长缓存缓存和 CDN 分发网络。5.使用强缓存和协商缓存，减少资源重复请求。

2023-12-09 20:00:25 520

原创动画、过渡是什么？

2023-12-09 19:59:19 482

原创浅拷贝与深拷贝

概念：深拷贝就是在拷贝数据的时候，将数据的所有引用结构都拷贝一份。简单的说就是，在内存中存在两个数据结构完全相同又相互独立的数据，将引用型类型进行复制，而不是只复制其引用关系。利用 JSON 对象中的 parse 和 stringify---如果对象某个属性值是函数的话，这个函数的值不能被深拷贝。概念：浅拷贝只是复制指向某个对象的指针，而不复制对象本身，新旧对象其实还是同一个对象。使用 slice、concat 是数组的浅拷贝。对象浅拷贝 - Object.assign()。对象浅拷贝 - 扩展运算符。

2023-12-07 19:10:37 391

原创原型链是什么

属性查找机制: 当查找对象的属性时，如果实例对象本身不存在该属性，则沿着--proto--往自身的原型上查找，找到时则输出，不存在时，则继续沿着原型链往上一级查找，直至最顶级的原型对象 Object.prototype，如还是没找到，js 规定 Object.prototype.--proto 指向 null，查找结束。所有的对象 obj 都具有 proto 属性（null 和 undefined 除外 )，而且指向创造 obj 对象的函数对象（生成实例的构造函数）的 prototype 属性。

2023-12-07 19:07:26 527

原创原型 / 构造函数 / 实例

原型(prototype): 一个简单的对象，用于实现对象的属性继承。可以简单的理解成对象的爹。每个 JavaScript 对象中都包含一个--proto-- (非标准)的属性指向它爹(该对象的原型)，可 obj.--proto--进行访问。构造函数: 本质上是一个普通的函数，只是可以通过 new 来新建一个对象的函数。实例: 通过构造函数和 new 创建出来的对象，便是实例。指向原型，通过 constructor 指向构造函数。

2023-12-07 19:03:44 560

原创 js 执行机制-eventloop--轮询

什么是异步 1、为了避免 dom 渲染冲突，js 是单线程的，也就是同一时间只能做一件事。让同步代码先执行，等一段时间再执行异步的内容 2、常见的异步操作微任务：promise、process.nextTick、宏任务：setTimeout、setInterval、setImediate、2、当指定的事件完成时，event-table 会将这个函数移入 event-queue。3、主线程内的任务执行完毕，会去 event-queue 读取对应的函数，进入主线程执行。4、先执行微任务，再执行宏任务。

2023-12-06 19:15:13 414 1

原创 get 和 post 请求的区别是什么？

get 一般会走缓存，为了防止走缓存，给 url 后面每次拼的参数不同；后面，一般用个时间戳。get 请求如果需要传递参数，那么会默认将参数拼接到 url 的后面；get 请求传递参数大小是有限制的；是浏览器的地址栏有大小限制；post 传递参数，需要把参数放进请求体中，发送给服务器；post 请求参数放进了请求体中，对大小没有要求；post 一般用于发送数据。post 请求不会走缓存；get 一般用于获取数据。post 安全性比较高；

2023-12-06 19:04:50 411 1

原创 js 数据类型有哪些？

代表一切未知的事物，啥都没有，无法想象，代码也就更无法去处理了。判断数据类型的几种方法 1、typeof2、prototype3、instanceof4、constructor5、Object.prototype.toString.call(a)注意： typeof null === Object。注意：typeof(Null)返回 Object，但 Null 并非 Object，具有 Null 值的变量也并非 object。:布尔类型，true or false，是就是，非就非，没有疑义。

2023-12-06 19:03:49 454 1

原创数组的一些方法用法

(index,len,[item]) 删除元素，并向数组添加一个新元素。() 把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分割。() 删除数组最后一个元素并返回该元素的值。() 在数组后添加元素，并返回新的长度。() 把数组转换为本地数组，并返回结果。() 从某个已有的数组返回选定的元素。() 把数组转换为字符串并返回结果。() 删除并返回数组中第一个元素。() 颠倒数组中元素的顺序。() 在数组最前添加元素。() 对数组元素进行排序。() 返回该对象的源代码。() 返回对象的原始值。

2023-12-06 19:02:52 485 1

原创什么是混合 mixin？

在 mixin 中值是对象的选项,比如:methods,computed,components 等,会合并,键名冲突的话会被覆盖,组件会覆盖混入对象中的属性;混入对象:引入到组件里面进行使用的时候,会和当前组件进行融,相当于扩展了当前组件的选项方法,共同形成了一个新的组件;2.mixins 可以进行定义共同的状态,引入到组件之后,各个变量之间是相互独立的,在组件中互不影响;公共组件:在父组件里面引入,注册,使用,通过 props 传递不同的值,父组件,公共组件,互相独立的;

2023-12-06 19:02:19 423 1

原创 async/await

async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。async/await 使得异步代码看起来像同步代码，明显节约了不少代码，大大地提高可读性。await 可以认为是 async wait 的简写，等待一个异步方法执行完成。async 用于申明一个 function 是异步的，它是可以理解为 promise 的语法糖,

2023-12-05 19:37:57 404

原创 promise 的 API

Promise.prototype.then : 实例方法，为 Promise 注册回调函数，函数形式：fn(vlaue){}，value 是上一个任务的返回结果，then 中的函数一定要 return 一个结果或者一个新的 Promise 对象，才可以让之后的 then 回调接收。Promise.race ：类方法，多个 Promise 任务同时执行，返回最先执行结束的 Promise 任务的结果，不管这个 Promise 结果是成功还是失败。

2023-12-05 19:35:58 985

原创 promise 的原理

Promise 上还有 then 方法，then 方法就是用来指定 Promise 对象的状态改变时确定执行的操作，resolve 时执行第一个函数（onFulfifilled），reject 时执行第二个函数（onRejected）构造一个 Promise 实例需要给 Promise 构造函数传入一个函数。传入的函数需要有两个形参，两个形参都是 function 类型的参数。2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。基于上面的应用场景发现 promise 可以有三种状态，分别是。

2023-12-05 19:34:50 444

NXZ13419918873的博客