- 博客(65)
- 收藏
- 关注
RSS订阅原创 实时通信的方式——WebRTC
WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。
2024-05-21 20:13:24
1807
原创 ECharts底层原理
eCharts 是一款开源的 JavaScript 图表库，由百度前端技术部推出并维护，用于构建交互式的数据可视化界面。eCharts提供了丰富的图表类型和灵活的配置选项，使用户可以轻松创建各种各样的图表，例如折线图、柱状图、散点图等等。eCharts不仅可以在网页中展示图表，还可以通过导出图片的方式进行分享与嵌入。
2024-03-26 17:40:56
1396
原创 mixin和extends的区别和联系以及他们的覆盖逻辑
时能够灵活地覆盖和定制选项，同时保留了组件自身的特定配置。都是 Vue.js 中用于组件复用和扩展的方式。在 Vue.js 中，无论是。这个合并规则确保了组件在使用。
2024-03-20 21:39:33
749
2原创 react+ProComponents简单实现表格
在组件设计阶段，将组件的灵活性和易用性作为首要目标（当然终极目标肯定是要实现基础功能，不然做组件的意义何在），因此将每一个模块作为单独的组件，最终实现了筛选栏、操作栏、表单项三个组件，后来随着业务需求的增加，也在不断扩展组件的能力，目前相对比较成熟，可以满足基础的列表/表单页面功能。页通常有N+表单项（eg: 输入框、下拉框、级联框、单选按钮、多选按钮等等）。之前也考虑将高重复性的代码抽离成组件，通过配置参数，来实现相对应的功能。、等，依旧需要写大量高度重复性的代码，比如列表页通常会有。
2024-01-31 17:21:38
789
原创 scoped原理、穿透原理、哈希计算
当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前组件，通过该属性，可以使组件之间的样式不相互污染。也就是实现组件私有化，起到样式隔离的作用。
2024-01-29 19:54:59
1178
原创 vue-clipboard一键复制到粘贴板
Vue-Clipboard3 是一个跨平台的剪贴板插件，可以在 Vue.js 2.x 或 3.x、JavaScript 或 TypeScript 项目中使用这个插件有一个toClipboard方法，大概长这样。
2024-01-28 09:35:16
491
原创 babel
在 Babel 7 及以上版本中，推荐使用 @babel/preset-env 配合 core-js 来实现类似的功能，而不再直接使用 babel-polyfill。babel-polyfill（或者 core-js + regenerator-runtime 的组合）的主要作用是在目标环境中提供缺失的 ECMAScript 新特性和原生 API，使得开发者可以在较旧的浏览器或环境中使用最新的 JavaScript 语言特性。举例来说，ES6 在Array对象上新增了Array.from方法。
2024-01-23 20:07:10
488
原创 npm run serve和npm run dev的区别
1. 功能：通常，"npm run serve"用于启动开发服务器，提供实时的开发环境，支持自动重新加载和热模块替换。而"npm run dev"可以是一个自定义的指令，用于执行其他与开发相关的任务，如编译代码、运行测试等。3. 环境：通常，"npm run serve"是在开发环境中运行，用于提供开发服务器和实时的开发体验。而"npm run dev"可以在开发环境或生产环境中运行，具体取决于项目的配置和定义。而"npm run dev"可以根据项目的需要自定义指令和配置，用于执行各种开发相关的任务。
2024-01-22 15:50:42
3876
原创 简单但全面了解一下webSocket
传统通信： 电子邮件、网页浏览存在延迟，需要用户主动请求来获取更新数据。实时通信： 即时消息传递（即时聊天）、音视频通话、在线会议和实时数据传输等，可以实现即时的数据传输和交流，不需要用户主动请求或刷新来获取更新数据。
2024-01-22 10:02:24
1607
原创 支线任务遇到的怪——并发请求
这些请求基本上是同时发出的，但由于网络延迟和服务器处理速度的差异，这些请求可能会在不同的时间点得到响应。如果你的请求之间没有依赖关系，那么这种做法可能会降低程序的性能，因为不能充分利用网络的并发性。：如果有太多的请求同时发送，可能会对服务器造成负担，也可能会受到浏览器或服务器对并发连接数的限制。：如果一个请求的处理结果依赖于另一个请求的结果，那么我们就需要确保这两个请求的执行顺序。对于超出限制的并发请求，我们还可以使用一些。在处理并发请求时，如果需要保证请求的顺序性，则通常意味着请求之间存在。
2023-11-06 15:31:50
255
原创 项目实战之安装依赖npm install
前言：有些人看着还活着其实已经凉了好一会儿了。初拿到项目肯定是先看配置的啦，看看都需要安装什么依赖，然后,OK结束皆大欢喜。开玩笑的啦，公司的项目还有点点点点点点点点点复杂，挺不容易的那就先说一个最大的坑吧node的版本或许。
2023-11-02 21:55:49
6530
原创 强缓存与协商缓存
为了减少资源请求次数，加快资源访问速度，浏览器对资源文件如图片、css文件、js文件等有一个缓存功能。而浏览器缓存策略又分为强缓存和协商缓存。
2023-10-21 11:23:05
958
原创 this指向输出题
没有什么东西调用 所以就指向全局window，也就是window调用的这个fn(),全局作用域下，222的输出就是windowsName，就是因为window调用的fn，所以！fn的this指向其实是指向window！所以444的输出this.name其实是指向window的，也就是全局作用域下的name，也就是windowsName。我对这句话的理解就是 innerFunction的this是继承了fn的this所以也指向全局，所以333 的输出调用innerFunction也是windowsName。
2023-10-19 14:23:49
204
原创 TS和JS 的区别
在TypeScript推出之前，JavaScript社区已经存在一些解决JavaScript一些问题和限制的工具，例如Babel和Flow。Babel是一个JavaScript编译器，它可以将新版的JavaScript转换成老版本的JavaScript，以支持更多的浏览器和环境。它通过在JavaScript语言基础上添加了静态类型、类、接口、模块、泛型等特性，提供了更强大的工具和功能来增强JavaScript的开发过程。，使得JavaScript更适合构建大型项目，并提供了更好的代码组织和架构。
2023-10-15 19:18:18
264
原创 Web Worker
Web Worker 是一种在Web应用程序中运行后台线程的技术，它可以使Web应用程序更加响应并避免阻塞主线程。同源策略（Same-Origin Policy）是一种Web浏览器的安全策略，它是为了保护用户的隐私和数据安全而设计的。：两个URL被认为是同源的，如果它们具有相同的协议（例如http://或https://）、主机名（例如example.com）、和端口号（例如80或443）。：与其他Web技术一样，Web Worker 受到同源策略的限制，这意味着它们只能与相同域的脚本通信。
2023-10-08 09:23:28
165
原创 SSR服务器端渲染
与传统的客户端渲染（Client-Side Rendering）不同，SSR 是在服务器上生成完整的 HTML 页面，并将其发送给浏览器，然后浏览器只需显示已经生成好的页面，而不是在客户端执行 JavaScript 来构建页面。更好的性能：虽然首次加载可能会更快，但 SSR 通常也会在后续交互中提供更好的性能，因为部分页面内容可以在服务器上被缓存，减少了客户端的工作负担。更快的首次加载时间：由于浏览器在接收到服务器生成的 HTML 后即可显示页面，因此首次加载时间更快，用户能够更快地看到内容。
2023-10-05 20:56:58
201
原创 $nextTick的原理及作用
1、Vue⽣命周期的created()钩⼦函数进⾏的DOM操作⼀定要放在Vue.nextTick()的回调函数中，原因是在created()钩⼦函数执⾏的时候,DOM 其实并未进⾏任何渲染，⽽此时进⾏DOM操作⽆异于徒劳，所以此处⼀定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。而当我们自己调用nextTick的时候，它就在更新DOM的那个micro task后追加了我们自己的回调函数，从而确保我们的代码在DOM更新后执行。JS 执行是单线程的，它是基于事件循环的。
2023-10-04 17:11:24
488
原创 事件循环机制
事件循环（Event Loop）是用于管理和调度异步任务执行的一种机制，通常在浏览器中，也在其他 JavaScript 运行环境中存在。事件循环确保 JavaScript 单线程的执行模型下能够处理非阻塞的异步任务，以避免程序阻塞和提高性能。js引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起（交给webapi处理），继续执行执行栈中的其他任务。
2023-10-04 16:53:33
236
原创 比较react和vue的响应式原理
当组件状态发生变化时，React会构建新的虚拟 DOM 树，然后通过比较前后两棵虚拟 DOM 树来确定需要更新的部分，最终只更新必要的 DOM 元素。：Vue 支持组件化开发，每个组件有自己的状态和行为，组件之间通过 props 和 events 进行通信。：Vue 也使用虚拟 DOM 来提高性能，但与 React 不同，Vue 的虚拟 DOM 是更高级的，它可以跟踪数据变化并自动更新视图，无需手动操作。：Vue 中的状态是响应式的，当数据变化时，Vue 会自动更新相关的组件。：Vue中的状态是响应式的。
2023-10-04 15:23:52
1082
原创 函数执行上下文
函数执行上下文是在 JavaScript 中用来跟踪和管理函数执行的环境。每当函数被调用时，都会创建一个新的函数执行上下文，它包含了函数的参数、局部变量、以及函数在执行过程中的其他信息。函数执行上下文是按照调用栈的方式管理的，最近被调用的函数处于栈的顶部。当函数执行完毕时，它的执行上下文会从栈中弹出，控制权返回给调用它的函数。：类似于变量环境，但在某些情况下，它可以包含外部函数的变量，形成了作用域链。：表示函数执行时的上下文对象，它在不同情况下有不同的值。JavaScript 中的函数执行上下文中的。
2023-10-04 13:20:50
217
原创 git stash
是 Git 中一个非常有用的命令，用于临时保存当前工作目录中的修改，以便你可以切换到其他分支或处理其他任务而不丢失你的修改。：一旦你的修改被保存在存储区中，你可以切换到其他分支，进行其他工作，而不会影响原来的分支。命令将未提交的修改（包括已修改的文件和暂存区的文件）保存到一个临时的工作区中。：你可以随时从存储区中恢复之前保存的修改，继续你之前的工作。：将当前的修改保存到一个新的存储区，可选地添加一条描述信息。：应用指定的存储，但不删除它。：应用最新的存储并从存储区中删除它。：列出存储区中的所有存储。
2023-10-04 12:19:41
271
原创 display有哪些值
属性的一些常见值，还有其他一些值和一些组合值，可以用来创建复杂的布局和显示效果，具体取决于需要。属性用于控制元素的显示方式，它可以设置多种不同的值，以决定元素在文档中的呈现方式。值会影响元素的布局和行为，因此在选择时需要根据设计。
2023-10-04 11:16:25
212
原创 网页加载有哪些事件
这些事件可以通过 JavaScript 监听，并在适当的时候执行相应的操作，以实现更好的用户体验和页面交互。不同的事件适用于不同的场景，开发者可以根据需求选择合适的事件来处理页面加载和用户交互。在网页加载过程中，浏览器触发多种事件，这些事件可以用来监控和控制页面的加载和交互。
2023-10-04 11:01:52
1218
原创 所有的引用类型都有自由可拓展性怎么理解
然而，需要注意的是，虽然这种灵活性是 JavaScript 的强大之处，但也可能导致一些问题，比如属性名的命名冲突、意外的属性覆盖等。因此，在开发中需要谨慎使用这种自由可拓展性，确保不会引发意外的行为。，而不受严格的结构限制。：对象是可拓展的，这意味着你可以在不改变对象的原型的情况下，为对象添加新的属性和方法。：可以在运行时随时向对象添加新的属性或方法，而不需要在对象创建时定义所有属性和方法。：引用类型的对象可以根据需要随时进行修改，适应不同的数据和功能要求。
2023-10-04 10:50:53
115
原创 深拷贝与浅拷贝
根据具体需求，可以自定义深拷贝函数，针对特殊数据类型或对象结构进行处理。这需要更多的编码工作，但可以满足特定需求。实现深拷贝时需要考虑如何处理循环引用以避免无限递归。
2023-10-04 10:33:27
245
原创 JS中的强制类型转换
强制类型转换可以帮助你在不同数据类型之间进行合适的操作，但需要注意在使用时确保转换的安全性和正确性。隐式类型转换则是 JavaScript 中的特性之一，它在某些情况下可以方便地进行类型转换，但也可能引发一些意外的行为，因此需要小心处理。JavaScript 中有多种强制类型转换的方式，可以将一个数据类型转换为另一种数据类型。隐式类型转换是 JavaScript 自动进行的类型转换，通常发生在不同数据类型之间的操作时。显式类型转换是通过特定的函数或操作符来明确指定要进行的类型转换。将一个值转换为字符串。
2023-10-03 22:23:51
469
原创 instanceof` 的基本工作原理
对象的原型链是一系列链接到对象的原型对象，形成一个链式结构。这个原型链上包括了对象的直接原型、原型的原型、依此类推。原型链的概念在 JavaScript 中非常重要，它使得对象之间可以共享属性和方法，同时也支持对象的继承。会不断向上遍历对象的原型链，直到找到指定的构造函数或达到原型链的末端。如果找到匹配的构造函数，它返回。操作符用于检查对象是否是特定类或构造函数的实例。它的原理是基于对象的原型链来进行判断。接受两个参数：要检查的对象和要检查的构造函数（或类）。，表示对象是该构造函数的实例。
2023-10-03 21:45:29
458
原创 双token登录
这提高了系统的安全性。降低对资源服务器的负载： 由于AccessToken的有效期较短，资源服务器（通常是后端服务器）需要验证AccessToken的有效性。使用RefreshToken可以减少对资源服务器的请求次数，因为AccessToken过期后不需要每次都请求资源服务器进行验证，只需使用RefreshToken获取新的AccessToken即可。Token 刷新： 在前文提到的身份验证和令牌管理方案中，响应拦截器可以用于检查令牌的有效性，如果令牌过期，它可以自动请求新的令牌，并重新发送之前的请求。
2023-09-28 09:42:33
455
原创 vue3 和vue2 的比较
因此，在使用 Vue 2 中的 Mixin 时，需要谨慎考虑，尽量避免上述问题的出现。总的来说，Composition API 提供了一种更灵活、可组合、可控的方式来组织组件的逻辑，相比于 Vue 2 的 Mixin，可以更好地解决了命名冲突、依赖关系不清晰等问题，使得组件的代码更容易理解、维护和复用。相比于Vue2，Vue3整体体积变小了，移除了一些不常用的API，任何一个函数，比方说ref、reavived、computed等，仅仅在用到的时候才打包，没用到的模块都去掉，打包整体体积变小，最重要的是。
2023-09-27 16:23:37
273
原创 react中为什么用箭头函数来定义事件处理函数
这里的箭头函数在点击事件发生时会调用 this.switchTab(tab.type)，并且它可以正常传递事件对象 e（如果需要的话，你可以在函数内部访问事件对象 e）。如果像这样处理函数，那么问题是，事件处理函数在渲染时立即执行，而不是在点击事件发生时执行。这意味着 this.switchTab 会在渲染期间立即执行，并且无法传递事件对象 e，因为它只在点击时才会创建。为了解决这个问题，可以使用箭头函数，它会在点击事件发生时才执行，因此可以传递正确的参数和事件对象。正确写法(使用箭头函数)
2023-09-13 10:18:27
278
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人