- 博客(45)
- 收藏
- 关注
RSS订阅原创 React的JSX语法中常用的数组方法
当使用search传参时，我们需要将urlencoded字符串转化为一个对象，可以使用qs库，此时对象的第一个参数是？如果需要同时满足多个条件语句，由于JSX中只能写js表达式，我们可以。当我们需要统计某个列表中被勾选的项和所有项，推荐使用数组的。当我们需要根据id获取content展示时，可以使用数组的。，当传过来的id和当前数据中的id匹配时，直接拿即可。当我们需要遍历数组成员的时候，推荐使用数组的。和对象/数组的扩展运算符。和数组的length属性。reduce()方法。
2023-12-13 09:10:45
548
原创 JavaScript实现浮点数计算
JavaScript 中的数字类型采用的是 IEEE 754 标准的双精度浮点数表示法，即 64 位二进制格式。由于浮点数在二进制中的表示方式有限，有些十进制小数无法精确转换为二进制表示。这就导致了某些小数在计算机内部以近似值进行存储，从而引发了精度问题。
2023-12-05 13:22:11
1038
原创 Vue3新组件：Fragment、Teleport、Suspense
Fragment、Teleport和Suspense是Vue.js 3 中的新特性，用于更好地组织和管理组件的结构和交互。
2023-12-05 12:52:53
779
原创 Vue2、Vue3父子组件通信
父组件给子组件传数据：子组件使用props配置项（Vue3是 defineProps API）接收来自父组件传出来的数据。子组件给父组件传数据：方法一：父组件需要给子组件提前传一个函数，子组件使用props接收单项绑定的函数，给子组件绑定键盘事件调用这个函数，这样父组件就会受到函数的返回值。
2023-12-05 12:48:04
468
原创 Axios、Axios实例、Axios配置、Axios拦截器
axios是一个基于Promise的网络请求库，作用于浏览器和node.js中 ，经常用在Vue和React框架中发送AJAX请求。支持 Promise，使用Promise管理异步，告别传统callback方式拦截请求与响应，比如：在请求前添加授权和响应前做一些事情。转换请求数据和响应数据，比如：进行请求加密或者响应数据加密。取消请求自动转换JSON数据客户端支持防御XSRF可以使用 npm i axios -D 安装开发依赖，也可以使用CDN。
2023-12-05 12:42:23
432
原创 CSRF跨站请求伪造、XSS跨站脚本攻击
XSS属于客户端攻击，受害者最终是用户。攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。CSRF通常从第三方网站发起，被攻击的网站无法防止攻击发生，只能通过增强自己网站针对CSRF的防护能力来提升安全性。跨站请求可以用各种方式：图片URL、超链接、CORS、Form提交等等。
2023-12-05 12:36:51
430
原创 对比CommonJS、AMD、CMD、ES6模块
CommonJS通过 require 来引入模块，通过 module.exports 定义模块的输出接口。是服务器端（Node.js）的解决方案，它是以同步的方式来引入模块的，因为在服务端文件都存储在本地磁盘，所以读取非常快，所以以同步的方式加载没有问题。但如果是在浏览器端，由于模块的加载是使用网络请求，因此使用异步加载的方式更加合适。
2023-12-05 12:33:07
400
原创 JavaScript实现快速排序、归并排序、堆排序
快速排序（Quick Sort）：通过选择一个基准元素，将数组划分为左右两个子数组，左边的元素小于等于基准，右边的元素大于基准，然后递归地对左右两个子数组进行快速排序，直到排序完成
2023-12-05 12:24:50
466
原创 JavaScript实现冒泡排序、插入排序、选择排序
冒泡排序（Bubble Sort）：通过相邻元素的比较和交换来将最大的元素逐步冒泡到数组末尾，重复这个过程直至排序完成。平均情况时间复杂度：O(n^2)插入排序（Insertion Sort）：将数组分为有序区和无序区，每次从无序区取出一个元素，插入到有序区中的正确位置，直到无序区为空为止。O(n^2)选择排序（Selection Sort）：将数组分为已排序部分和未排序部分，每次从未排序部分选择最大的元素，放到已排序数组部分的末尾，重复这个过程直至排序完成。O(n^2)
2023-12-05 12:20:02
361
原创 JavaScript事件、事件流、事件监听器、event、事件委托
JavaScript 与 HTML 之间的交互是通过事件实现的。事件是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用事件监听器来预定事件，以便事件发生时执行相应的代码。事件流是从页面中接收事件的顺序。DOM事件流规范规定事件流分为 3 个阶段：事件捕获阶段：事件从上往下查找对应元素，直到捕获到事件。到达目标阶段：到达目标元素后执行事件对应的处理函数。事件冒泡阶段：事件从目标元素开始冒泡。
2023-12-05 12:14:09
1215
原创 JavaScript闭包（超详细）
一个函数和对其周围状态（词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。其实和高阶函数的定义差不多，常见的闭包：将函数作为另一个函数的返回值将函数作为实参传递给另一个函数调用。
2023-12-05 12:06:47
411
原创 JavaScript实现模态框
获取模态框所在的元素，为控制模态框的按钮添加 onclick事件 / window.onload= function(){ }事件，在函数体中使用 modal.style.display= ‘block’或‘none’ 控制模态框的打开、关闭和反馈提交的逻辑。使用position:absolute 定位将其放在容器上方，使用top、left、transfrom将其居中，不设宽高，由content（HTML元素）将盒子撑开+padding+border。定义了模态框的结构，并包括一个按钮来触发模态框的显示。
2023-12-05 12:01:57
920
原创 JavaScript真实DOM和虚拟DOM（超详细）
网页加载时，浏览器解析 HTML 代码生成真实DOM，每个真实 DOM 都有对应的 JavaScript 对象表示。虚拟 DOM 基于 MVC模型，使视图和模型分离，是一个用 JavaScript 对象来表示真实 DOM 的轻量级副本。Vue和React 使用虚拟 DOM 来提高页面渲染性能。当数据发生变化时，Vue 首先会基于新数据生成新的虚拟 DOM 树，然后通过 diff 算法比较新旧虚拟 DOM 树的差异，并将差异部分应用到真实 DOM 上，从而实现局部更新而非整体更新。
2023-12-05 11:59:31
635
原创 JavaScript数据类型转化（数字——字符串——数组）
数字——字符串——数组三种数据类型的转化中，字符串是桥梁。String对象的split('')中的参数是更改前的字符，更改后数组默认是逗号分隔；Array对象的join('')中的参数是更改后的字符，更改前数组默认是逗号分隔。
2023-12-05 11:55:23
401
原创 JavaScript正则表达式RegExp对象（速记）
RegExp对象有2种创建方法。有new（对象实例）无new（变量）都能使用RegExp对象的属性和方法。当使用new关键字创建RegExp对象时，需要将正则表达式中的特殊字符转义，即在特殊字符前加反斜杠 \
2023-11-29 20:15:39
385
原创 TypeScript类与接口的关系（超详细）
一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用。另外，除了构造函数是不包含的，静态属性或静态方法也是不包含的（实例的类型当然不应该包括构造函数、静态属性或静态方法）。所以「接口继承类」和「接口继承接口」没有什么本质的区别。接口，既能报警，也能开关车灯。
2023-11-29 19:52:32
548
原创 JavaScript事件循环、同步、异步、宏任务、微任务（超详细）
javascript从诞生之日起就是一门单线程（setTimeout()的回调函数是在主线程执行的）的非阻塞（事件循环）的脚本语言。在同一个时间只能做一件事情，这就导致后面的任务需要等到前面的任务完成才能执行，如果前面的任务很耗时就会造成后面的任务一直等待。当主线程中的任务执行完毕，就从任务队列中取出任务放进主线程中来进行执行。由于主线程不断重复的获得任务、执行任务、再获取再执行，所以者种机制被叫做异步任务主要分为与两种。
2023-11-29 19:40:38
683
1
原创 JavaScript模拟UI框架的表单验证
表单可以收集用户提交的信息，例如姓名、邮箱、电话等。使用 JavaScript 来验证提交数据（客户端验证）相比将数据提交到服务器再进行验证（服务器端验证）用户体验要更好，因为客户端验证发生在用户浏览器中，无需向服务器发送请求，所以速度更快，而服务器端验证，需要先将数据提交到服务器，然后服务器再将结果返回给浏览器，用户需要等待服务器响应结果才能知道哪里出了问题。而在实际应用中，无论是否进行客户端验证，都需要进行服务端验证，因为用户可以在浏览器中禁用 JavaScript。
2023-11-29 19:30:52
349
原创 JavaScript 错误和异常
错误（Error）一般是在代码运行前出现的。在运行程序之前，JavaScript 解释器会先对代码进行检查，如果代码有误，例如某些语法错误，浏览器就会报出相应的错误，只有将错误修正后，代码才能运行。JavaScript 中支持以下几种错误类型：异常（Exception）（也被称为运行时错误），是在代码运行中出现的，例如调用未定义的方法、读取不存在的文件等，在出现异常之前，代码的运行并不受影响，当出现异常时，会在浏览器控制台输出错误信息，并终止程序的运行。
2023-11-29 19:24:06
881
原创 TypeScript类class（超详细）
类（Class）：定义了一件事物的抽象特点，包含它的属性和方法- 对象（Object）：类的实例，通过 `new` 生成- 面向对象（OOP）的三大特性：**封装、继承、多态**- 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据- 继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
2023-11-29 19:19:23
1834
原创 TypeScript枚举（超详细）
枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。TS枚举的灵感来源于C#
2023-11-13 21:37:38
773
原创 TypeScript的三种声明文件、@types、.d.ts、declare、interface、type（超详细）
我们可能在 TypeScript 项目中使用一些全局变量，这些变量没有通过模块导入的方式引入，而是直接通过 `标签引入的脚本文件。这些脚本文件可能会扩展全局命名空间，例如在浏览器环境中的 `window` 对象上添加新的属性或方法。为了让 TypeScript 编译器正确地理解这些全局变量，并提供类型检查和代码提示，我们需要编写相应的全局变量声明文件（通常命名为 `.d.ts`）
2023-11-13 18:33:48
5018
2
原创 TypeScript类型断言（超详细）
类型的变量，它们可能是由于第三方库未能定义好自己的类型，也有可能是历史遗留的或其他人编写的烂代码，还可能是受到 TypeScript 类型系统的限制而无法精确定义类型的场景。我们知道，TypeScript 是结构类型系统，类型之间的对比只会比较它们最终的结构，而会忽略它们定义时的关系。断言为精确的类型，亡羊补牢，使我们的代码向着高可维护性的目标发展。），接口是一个类型，不是一个真正的值，它在编译结果中会被删除，当然就无法使用。类型，为了实现这样一个函数，它的参数的类型肯定得是比较抽象的父类。
2023-11-13 18:24:39
1862
原创 TypeScript数组的类型（超详细）
只要索引的类型是数字时，那么值的类型必须是数字。虽然接口也可以用来描述数组，但是我们一般不会这么做，因为这种方式比前两种方式复杂多了。不过有一种情况例外，那就是它常用来表示。在这个例子中，我们除了约束当索引的类型是数字时，值的类型必须是数字之外，也约束了它还有。类数组（Array-like Object）不是数组类型，比如。我们也可以使用数组泛型（Array Generic）类型的参数，所以报错了。类型的参数，但是却传了一个。上例中，arguments。
2023-11-13 18:19:00
648
原创 TypeScript对象的类型——接口interface
在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对对象的形状（Shape）进行描述。
2023-11-13 18:16:06
123
原创 一文读懂vite.config.ts常用配置项
vite.config.ts 是 Vite 项目中用来配置构建选项和插件的配置文件。defineConfig 函数是在 Vite 中用于创建配置对象的常见方法，它通常用于定义开发环境和生产环境的配置选项。以下是一些常用的配置项：
2023-11-10 17:28:04
5286
1
原创 一文读懂tsconfig.json配置文件
tsconfig.json是TypeScript编辑器的配置文件，通常存在于项目的根目录中，TypeScript编译器可根据它的信息来对代码进行编译。
2023-11-10 11:07:24
1357
1
原创 React的jsx语法规则
JSX是一种JavaScript的语法扩展、是一种嵌入式的类似XML的语法,常应用于React架构中,但也不仅限于此.应该说JSX因React框架而流行
2023-10-27 19:19:57
75
1
原创 indexOf()、lastIndexOf()、findIndex()的区别
indexOf()，查找第一个索引。用法是arr.indexOf(searchElement[, fromIndex = arr.length - 1])，返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回-1。默认从数组的前面向后查找，如果有第二个参数则从 fromIndex 处开始查找。
2023-09-06 11:11:29
871
1
原创 JavaScript的 for...in...、for...of...区别
for...in...用于遍历对象的可枚举属性。它会迭代对象中的每个属性，并且会迭代原型链上的属性。可枚举是用来描述对象的属性是否可以通过遍历枚举出来的特性。如果一个属性被标记为可枚举，那么它可以在某些操作中被遍历或迭代到。
2023-09-01 21:47:37
75
1
原创 前端工程化的定义
前端工程化是指将前端开发中的项目管理、构建、测试、部署等环节进行规范化和自动化，以提高开发效率、代码质量和团队协作能力的一种开发方式。
2023-08-20 23:12:41
149
1
原创 浏览器页面渲染过程（回流重绘）（超详细）
页面渲染的7个阶段：1. 构建DOM树，浏览器无法识别html文件，需要将html解析成DOM树，解析过程是一个深度遍历的过程，只有当某个节点下所有子节点都遍历完成了才会去解析下一个兄弟节点。DOM 是文档对象模型 (Document Object Model) 的缩写。它是
2023-08-20 23:09:52
1194
1
原创 Promise对象（超详细）
Promise是异步编程的一种解决方案，比回调函数和事件更合理且更强大。可以理解为一个容器，里面保存着某个未来才会结束的事件的结果
2023-08-20 22:54:59
1129
1
原创 JavaScript箭头函数（超详细）
箭头函数没有自己的this，它里面的this关键字指向定义该函数的上下文。所以箭头函数中this的指向在它被定义的时候就已经确定了，之后不再改变
2023-08-02 23:46:01
151
原创 getElement 和 querySelect的区别（超详细）
getElement得到的是动态的集合，每使用一次都要去dom节点中调用一次，在使用添加节点的时候会因为使用循环而导致无限的死循环（卡死）
2023-08-02 23:40:31
718
原创 前端—浏览器的内核（超详细）
通常小的功能更新或者修改BUG重编译后会改动靠后的部分，越大的更新或者重大BUG修正就会更改前面的部分。（排版引擎），用于在浏览器窗口中显示所请求的内容，通俗点说，就是决定了浏览器该如何显示网页内容以及页面的格式信息。因此，版本号的数字越大，就代表版本越新，功能越多，速度越快，安全性更高，兼容性更强，上网体验可能就更好。优点：无广告、不易崩溃，速度快，几乎隐身，搜索简单，标签简单，更加安全。优点：风格简单，速度快，安全性高，拓展性强、程序员第二大浏览器等。优点：速度快，对标准的支持很强，资源占用少。
2023-08-02 23:35:35
319
原创 CSS的BFC（格式化上下文）
BFC (Block Formatting Context)格式化上下文。是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
2023-08-02 23:30:26
33
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人