czlj1998的博客

原创 解决jsonp跨域中的安全漏洞(包含meta解释)

head> 中的 <meta> 标签用于设置关于网页的元信息和配置，其中包括页面字符集、关键词、描述、作者、视口（Viewport）等等。：设置页面的字符编码，通常使用 UTF-8 编码来支持多语言和特殊字符。：定义网页的关键词，。：提供网页的描述，用于搜索引擎结果中的显示。：指定网页的作者。：用于移动端适配，告诉浏览器使用设备的宽度作为布局宽度，并将初始缩放级别设置为 1，以确保页面在不同屏幕大小上正确显示。

原创 为什么说jsonp解决跨域只支持get请求

JSONP 利用动态创建 `<script>` 标签来请求数据，而浏览器对于 `<script>` 标签的跨域请求并不受同源策略的限制。因为 `<script>` 标签没有访问 DOM 的权限，所以可以用来加载外部数据而不受同源策略的阻碍。由于 JSONP 只是通过 `<script>` 标签加载数据，所以只能用于 GET 请求，以绕过浏览器的同源策略，实现跨域请求。如果需要进行其他类型的请求，应该使用 CORS（Cross-Origin Resource Sharing）或其他跨域请求方法。

原创 react中hooks闭包

该函数中通常包含了一些副作用代码，它捕获了组件内部的状态和 props，并且可以在组件渲染周期中执行异步操作。这个函数形成了闭包，捕获了组件的作用域和状态。它允许在函数组件中处理副作用时，访问和操作组件内的状态和 props，而不需要担心作用域问题。这就是闭包的用途，它允许函数保持对其定义时所在的作用域的引用，即使该作用域已经执行完毕。组件的函数作用域内，并在组件的返回值中使用。在上面的 React 组件中，闭包的具体体现在。在这里，箭头函数内部使用了外部作用域中的。变量，因为它是在组件函数内部定义的。

原创 深拷贝优化代码

【代码】深拷贝优化代码。

原创 前端工程化

持续集成和持续部署：通过使用持续集成和持续部署工具（如Jenkins、Travis CI、GitLab CI等），可以自动化构建、测试和部署应用程序，提高开发团队的协作效率和交付速度。综上所述，前端工程化不仅仅是构建工具的使用，它是一系列流程、方法和工具的综合应用，旨在提高前端开发的效率、质量和可维护性，使团队能够更好地协作、交付和维护项目。自动化测试：前端工程化可以通过自动化测试工具（如Jest、Mocha、Karma等）来编写和运行单元测试、集成测试和端到端测试，确保代码的质量和稳定性。

原创 Vue原理及源码设计模式

在每次数据变化时，Vue会创建一个虚拟DOM树，并通过比较新旧虚拟DOM树来确定需要更新的部分。然后，Vue只更新真正需要变化的部分，而不是直接操作真实的DOM。模板通过使用Vue指令和插值表达式来绑定数据，从而实现数据驱动的视图。在Vue实例初始化过程中，Vue会将模板编译成渲染函数，这个渲染函数负责将数据渲染成实际的DOM节点。：Vue基于一个重要概念，即"响应式数据"。当创建一个Vue实例时，Vue会遍历数据对象中的所有属性，并。这样，当数据发生变化时，Vue能够检测到，并在需要时更新相关的视图。

原创 vue2和vue3的dom diff

总的来说，虽然Vue 2和Vue 3的DOM diff算法在核心思想上是相似的，但Vue 3的算法在性能和复杂性方面进行了优化和改进，可以提供更好的性能和更精细的控制。此外，Vue 3还引入了一个称为"块提升"的新概念，可以将一个完整的DOM块作为一个整体进行比较和更新，而不是逐个比较块中的每个节点。Vue 2和Vue 3的DOM diff算法在很大程度上是相同的，但也有一些显著的区别。函数用于比较两个虚拟DOM树并找出它们之间的差异，然后将这些差异应用到实际的DOM树上。

原创 HTML5新特性以及主体构成

HTML5为表单控件提供了一些新的属性和类型，使得表单输入更加便捷和灵活。可以使用不同的标签来划分和组织页面的结构，如。对象在客户端存储数据，使得网页可以在本地保存数据，减少对服务器的请求。对象，可以使用浏览器获取用户的地理位置信息，用于开发基于位置的应用。元素，可以直接在网页上嵌入音频和视频文件，而无需依赖第三方插件。标签中，用于指定网页的标题，显示在浏览器的标题栏或标签页上。：HTML5提供了内置的表单验证功能，可以使用一些新的属性如。：在页面结构中，可以使用各种标签来包裹和展示文本内容，如。

原创 页面首次进入时可能会有白屏的问题

如果页面中的脚本和样式表是通过同步加载的方式加载的，当某个脚本或样式表下载和执行时，会阻塞后续资源的加载和渲染，导致白屏。：当页面中的资源（如CSS、JavaScript、图片等）过多或者过大时，浏览器需要更长的时间来加载这些资源，导致页面出现白屏。：如果页面中的JavaScript代码在页面加载过程中执行的时间过长，会导致页面无法正常渲染，出现白屏。针对这些原因，可以采取相应的解决方案，例如：优化资源加载、异步加载脚本和样式表、优化JavaScript代码、合理设置缓存策略等，以减少白屏问题的发生。

原创 Vue与React//双绑问题

响应式原理：Vue使用基于模板的方式进行双向绑定，其中使用了Vue自己实现的响应式系统。而React采用了虚拟DOM（Virtual DOM）来进行页面更新，通过比较新旧虚拟DOM的差异来最小化DOM操作，从而提高性能。相比之下，Vue采用双向绑定可以使得开发更加方便快捷，数据的变化能够自动触发更新，不需要手动处理。Vue使用Vue单文件组件（.vue文件），将模板、样式和逻辑都集中在一个文件中，易于维护和开发。学习曲线：Vue相对来说更容易上手，其语法更接近传统的HTML和模板语法，更易于理解和学习。

原创 虚拟列表实现原理，滚动出现白屏怎么解决

举例：假设我们有一个长度为1000的数据列表，每个列表项的高度是50像素，我们的可视区域高度为500像素，这个时候进行滚动。当数据加载完成后，占位符即可被真实的数据替换，完成完整的数据渲染展示，用这种方法，我们可以更好的控制数据的展示，并提高页面的性能。在上述代码中，我们定义了每个列表项的高度以及可见区域的高度，根据这些参数计算出可见区域内的列表项数量。我们通过滚动事件监听器实时计算出当前可视区域内的列表项，并根据这些列表的下标值渲染列表，最后将占位符元素移除。虚拟列表是一种优化长列表性能的机制。

原创 less与sass

在这个例子中，两者都支持选择器的嵌套，这可以减少代码的重复并且提高代码的可读性。注意在Sass中，需要使用&符号来表示父选择器。在这点上，Less和Sass的变量概念基本相同，都是以声明的方式存储值，然后在样式中引用。在这点上，两者都支持定义可重用的样式块，这些块可以在样式表中重复使用，并且可以接受参数。在这个例子中，两者都支持基本的数学运算，包括除法。这些运算可以用于任何数字的计算。

原创 webpack优化策略

【代码】webpack优化策略。

原创 v-for中的key

是为了优化Vue的性能，特别是在循环的元素可能会发生变化的情况下。尽管在某些情况下可能不会立即看到影响，但这是Vue推荐的做法，也是为了代码的健壮性和可维护性。的作用是为每个循环的元素提供一个唯一的标识符，以便Vue能够跟踪和管理这些元素的状态。是一个推荐做法，尤其是在循环的元素可能会被重新排序、添加或删除的情况下。来判断哪个元素是新的，哪个元素是被删除的，以便进行高效的DOM更新。通常，我们可以使用循环的索引或循环的元素的唯一标识符作为。是一个简单的方式，因为索引值在循环中是唯一的。

原创 v-model的双向绑定如何通过v-bind和v-on手动实现

在上面的示例中，使用v-bind将数据message绑定到input元素的value属性上，这样可以实现数据的单向绑定。在上面的示例中，使用v-bind将数据message绑定到input元素的value属性上，然后使用v-on指令监听input事件，并在事件处理函数updateMessage中更新数据message的值。这样，数据和DOM元素的值会保持同步。另外，如果你想实现双向绑定的效果，并且不使用v-model指令，你可以手动实现双向绑定，即在v-on的事件处理函数中同时更新数据和DOM元素的值。

原创 回调地狱的产生=＞Promise链式调用解决

上述代码中，我们使用了三个嵌套的定时器，每个定时器的回调函数都会在一定的延时后执行。例如，当一个网络请求的结果返回后，需要根据返回的数据进行下一步的操作，这时就会嵌套多个回调函数，导致代码难以维护和理解。上述代码中，我们首先读取文件1的内容，在回调函数中获取到文件1的数据。最后，我们将合并后的数据写入一个新的文件，并在写入完成后的回调函数中打印成功消息。每个异步任务的结果可以通过resolve传递给下一个.then中的回调函数，而错误情况可以通过reject传递给.catch中的回调函数进行处理。

原创 vue3相比vue2的优点

（2）vue3：引入Proxy拦截==>通过以下两点实现ref将值包装成响应式（比如常见的布尔值）reactive将对象包装成响应式的vue3利用。

原创 watch()监听vue2项目角色权限变化更新挂载

可以获取到父组件传递的role属性的值。在mounted钩子函数中，将父组件传递的role赋值给了updateRole，然后在watch中监听role的变化，一旦role发生变化，就更新updateRole的值，并将选中的菜单项更新到checkedKeys中。是来自父组件通过props传递给子组件的role属性。在子组件的props属性中定义了。数组中的索引值来勾选树形控件中对应的节点，实现了将之前选中的权限重新勾选的效果。数组中的值设置为树形控件中的选中项。，表示子组件接收一个名为role的属性。

原创 computed()实战vue3项目计算总价

这个computed属性用于计算购物车中选中商品的总价格。它首先通过过滤函数筛选出包含在data.result中的购物车商品，然后遍历计算每个商品的价格乘以数量，累加得到总价格。当store.state.cartList或data.result。发生变化时，allPrice会自动重新计算。在这个代码片段中，computed是基于。

原创 TCP协议与UDP协议

这意味着在使用TCP进行通信时，发送和接收端需要先建立连接，然后才能进行数据传输；而使用UDP时，发送端可以直接将数据报发送给接收端，不需要建立连接。：TCP保证数据的顺序性，即发送的数据按照发送的顺序到达接收端。而UDP则不保证数据的顺序性，接收端可能会以不同的顺序接收到数据。，它使用确认和重传机制来确保数据的完整性和可靠性。速度和效率：由于TCP提供了可靠性和顺序性保证，以及进行连接建立和数据校验的额外开销，因此。，它只是简单地将数据报发送出去，不关心是否到达接收端。

原创 防御XSS攻击的方法

在上述代码中，escape-html库的escapeHtml函数用于对用户名进行HTML转义，以防止其中包含的特殊字符被解析为HTML标签或脚本代码。在后端，也可以使用相应的转义函数或库来对数据进行HTML转义。在上述代码中，validateEmail函数使用正则表达式对邮箱进行验证，如果邮箱格式不符合要求，则弹出提示。在上述代码中，escapeHtml函数使用正则表达式和替换函数来对特殊字符进行转义，并返回转义后的文本。在上述代码中，通过判断用户名的长度是否在指定范围内来进行验证和过滤。

原创 axios和fetch的区别

语法和用法：axios是一个基于Promise的HTTP客户端，具有更简洁和直观的语法，可以方便地发送GET、POST、PUT等各种请求，并提供了更多的请求配置选项。拦截器和取消请求：axios提供了拦截器的功能，可以在请求发送前和响应返回后进行一些处理，例如添加全局的请求头、处理错误等。综上所述，axios在功能和使用上更加强大和方便，适用于大多数的HTTP请求场景。而fetch作为浏览器原生API，可以在一些简单的请求场景中使用，但对于复杂的请求和错误处理等方面，可能需要额外的处理和兼容性考虑。

原创 不同标签点击动作触发以后的reducer渲染page更新

原创 前端路由与后端路由的区别

后端路由是指在后端服务器上定义的处理请求的路由规则。后端路由根据客户端发送的请求路径和 HTTP 方法来确定要执行的逻辑处理。后端路由处理请求的过程涉及路由匹配、执行相应的处理函数、并返回响应给客户端。前端路由是指在前端应用程序中，通过改变 URL 路径来实现页面之间的切换和导航。前端路由主要用于在前端应用程序中实现页面导航和切换，而后端路由用于在服务器端处理客户端请求并返回相应的响应。前端路由和后端路由是两种不同的路由机制，用于在前端和后端之间进行页面导航和请求处理。

原创 token

当用户输入完用户名和密码后，客户端会将这些凭据发送到后端服务器进行验证。后端服务器会根据用户名和密码的正确性来生成一个 token。这样的流程可以保证用户的身份验证，并且在后续的请求中使用 token 来进行身份认证和授权。token:加密和解密的过程。

原创 React的thunk中间件

这个返回的函数可以接收 dispatch 和 getState 作为参数，并且可以在函数内部进行异步操作。当使用 Thunk 中间件时，在触发 action 的时候并不会自动触发 reducer，而是先触发这个返回的函数。在这个函数内部，你可以进行异步操作，然后再手动调用 dispatch 来触发 reducer。这个函数接收 dispatch 作为参数，在函数的内部可以进行异步操作，并最终手动调用 dispatch 来触发相应的 reducer。因此，Thunk 中间件提供了一种方便处理异步操作的方式。

原创 函数组件也可以通过connect获取react-redux的数据（reducer）

需要注意的是，connect函数会在内部创建一个新的组件，并将原始的函数组件作为这个新组件的子组件。在使用Redux的情况下，函数组件可以通过connect函数来连接Redux store，并从store中获取所需的数据。在不使用hooks的前提下，你可以在函数组件的外部使用connect函数来连接Redux store，并将所需的state和action creators映射到组件的props中。mapStateToProps是一个函数，它将Redux store中的state映射到组件的props中。

原创 e.preventDefault()阻止默认行为

因此，通过在输入框的onKeyUp事件中检查keyCode是否为13（回车键的keyCode为13），如果是，则使用preventDefault()方法阻止默认行为，即阻止表单提交。例如，你可以在按下回车键时阻止表单的默认提交行为，或者在按下空格键时阻止滚动页面的默认行为。，可以阻止链接的默认跳转行为，从而允许你在点击链接时执行自定义操作，比如打开一个模态框或执行一些其他逻辑。按钮点击：在处理按钮点击事件时，有时你可能希望阻止按钮的默认提交行为或页面刷新行为。表单提交：在处理表单提交事件时，通过调用。

原创 js的宏任务与微任务

当用户与页面进行交互时，浏览器会触发相应的事件，并执行对应的事件处理函数。具体来说，当一个宏任务执行完毕后，会立即检查微任务队列中是否有待执行的微任务。如果有，则按照先进先出的顺序依次执行所有的微任务，直到微任务队列为空。然后才会执行下一个宏任务。这意味着，即使有多个宏任务在排队等待执行，在执行下一个宏任务之前，都会先执行完所有的微任务。在事件循环中，微任务比宏任务具有更高的优先级，因此微任务会先于宏任务执行。因此，在这个例子中，微任务先于宏任务执行，输出顺序是1、4、3、2。

原创 babel原理

用户可以根据自己的需求编写自定义的转换规则，或使用已有的插件来实现特定的转换操作。Babel是一个非常流行的JavaScript编译器工具，其主要功能是将新版本的JavaScript代码转换为旧版本的代码，以便能够在旧版本的浏览器或环境中运行。生成：在转换过程完成后，Babel将转换后的AST重新生成为可执行的JavaScript代码。Babel的工作原理是通过将JavaScript代码解析为抽象语法树（AST，Abstract Syntax Tree），然后对。

原创 页面初始化要做的操作

页面交互效果：在页面初始化后，可以通过JavaScript实现一些交互效果，如动画、轮播图、表单验证等。加载所需资源：在页面初始化时，需要加载所需的资源，如CSS文件、JavaScript文件、字体文件、图片等。可以使用HTML标签和属性来定义页面的结构和内容。样式初始化：在页面初始化时，可以对一些基本样式进行初始化，如设置默认字体、颜色、边距等。在前端开发中，页面初始化是一个重要的步骤，它涉及到一些常见的操作。标签中可以设置页面的标题和描述，以便在浏览器的标签页和搜索结果中显示正确的信息。

原创 浏览器输入url后回车展开过程

当你在浏览器中输入一个URL并敲下回车后，浏览器会执行一系列步骤来访问并展示网页。如果HTML中包含了JavaScript代码，浏览器会执行这些代码，对页面进行交互和动态效果的实现。浏览器根据DOM树和CSSOM树构建渲染树，并进行布局和绘制，最终将页面内容显示在屏幕上。一旦资源文件被下载完毕，浏览器会对HTML文件进行解析，构建DOM树。，其中包含了请求的资源以及其他的响应头信息。同时，还会解析CSS文件构建CSSOM树。浏览器接收到服务器发送的响应后，，会根据请求的内容和路径，解析为对应的IP地址。

原创 js中reduce()的使用

那么在每一次迭代中，累加器的初始值为0，然后依次将数组中的元素与累加器进行相加。（4）第四次迭代时，累加器的值为6，数组的第四个元素是4，所以计算结果为6 + 4 = 10。（1）第一次迭代时，累加器的值为0，数组的第一个元素是1，所以计算结果为0 + 1 = 1。（2）第二次迭代时，累加器的值为1，数组的第二个元素是2，所以计算结果为1 + 2 = 3。（3）第三次迭代时，累加器的值为3，数组的第三个元素是3，所以计算结果为3 + 3 = 6。需要注意的是，在上面的例子中，我们没有提供初始值，因此。

原创 React中的dispatch()

reducer函数会根据action的类型来更新store中的状态，并返回一个新的状态对象。Redux会自动将新的状态对象与旧的状态进行比较，并更新组件的状态或重新渲染相应的组件。函数，我们可以在React组件中发起状态更新的请求，而不需要直接操作store或组件的状态。这种方式可以帮助我们保持组件的纯粹性和可重用性，同时将状态的管理集中在Redux中，使代码更加清晰和可维护。它是Redux中的一个核心概念，用于将action传递给store，从而触发相应的状态更新。函数是Redux提供的一个方法，

原创 hashHistory和history

在服务器端，需要配置将所有路径都指向前端应用的入口文件，以便前端路由可以正确处理。这种模式适用于需要与服务器进行交互的应用。，而是通过监听URL变化来切换路由。在浏览器中，URL的哈希部分的变化不会导致页面刷新。适用于复杂的应用，需要与服务器进行交互，并且可以支持更加友好的URL。它使用真正的URL路径来表示不同的页面。是两种常见的路由模式，它们在实现方式和使用方式上有一些区别。这种模式可以实现更加友好的URL，但在切换路由时。会发送真正的HTTP请求，需要服务器端支持。：使用URL的哈希部分（

原创 React中的Hooks--useReducer()

或者，你可以自己编写相关的功能函数，并在reducer中调用它们。的设计目标是提供一种简洁的方式来管理复杂的状态逻辑，而不是为了提供中间件等功能。中间件通常用于在状态更新之前或之后执行某些额外的逻辑，例如日志记录、持久化存储或异步操作等。本身无法提供中间件等功能，但它是一个非常强大和灵活的工具，可以用于处理各种复杂的状态逻辑。是React提供的另一种状态管理机制，它可以用于更复杂的状态逻辑。是通过传递一个包含状态更新逻辑的reducer函数来管理状态的。本身并不提供这些功能，它只是用于状态的管理和更新。

原创 TS泛型的使用

TS

原创 toRefs

函数的作用是将响应式对象的属性转换为响应式引用。这意味着，当我们在模板中访问这些属性时，它们仍然是响应式的，并且能够正确地触发重新渲染。属性是一个只读的getter，它返回属性的实际值。将响应式对象解构为一个包含响应式引用的普通对象，可以确保在模板中正确地引用和更新这些属性。函数中返回这个响应式对象时，它会失去响应性。属性，并建立起对该属性的依赖关系，以便在属性的值发生变化时重新渲染模板。函数返回的对象中的属性保持响应性，并能够正确触发重新渲染。函数将响应式对象转换为一个包含响应式引用的普通对象。

原创 TS与JS的区别，TS好在哪

类型注解并不等同于泛型。类型注解是用于明确指定变量、函数、参数等的类型，而泛型是一种参数化类型的机制，可以在定义类或函数时使用类型参数，从而使其可以适用于不同类型的数据。泛型可以提高代码的重用性和灵活性，而类型注解是用于确定具体的类型。类型注解：TypeScript 支持类型注解，通过使用类型注解可以明确地指定变量的类型，并在编译时进行类型检查。静态类型：TypeScript 引入了静态类型系统，允许在开发过程中对变量、函数、参数等进行类型注解，以提供更严格的类型检查和类型推断，从而减少潜在的错误。

原创 js-闭包

闭包的价值在于它提供了一种机制，允许将私有变量存储在函数内部，并且只能通过内部函数来访问和修改。这种封装性使得代码更加模块化和安全。闭包还可以用于创建特殊的函数，例如工厂函数、单例模式等，这些模式能够有效地管理状态和数据，并提供对外界的封装。总结来说，闭包通过保留对外部函数的引用环境，使得内部函数可以访问外部函数的变量，从而实现了对内部变量的保护。闭包的价值在于提供了封装和模块化的能力，使代码更加安全和可维护。