- 博客(79)
- 收藏
- 关注
RSS订阅原创 编程规范（保姆级教程）
上一小节中我们使用了git cz来代替了git commit实现了规范化的提交诉求，但是依然存在着有人会忘记使用的问题。我们应该如何去进行解决？先来明确一下我们最终要实现的效果：我们希望：当《提交描述信息》不符合约定式提交规范的时候，阻止当前的提交，并抛出对应的错误提示而要实现这个目的，我们就需要先来了解一个概念，叫做Git hooks（git 钩子 || git 回调方法）**git**** 在执行某个事件之前或之后进行一些其他额外的操作，**而我们所期望的阻止不合规的提交消息。
2024-04-11 22:03:59
1080
原创 前端路由hash && history
前端路由，是指前端应用中管理页面导航和url的机制。前端路由使得单页面应用能够在用户交互时动态的加载不同的视图，而不需要每次都重新加载整个页面，即刷新页面。vue-router，React Router等都属于前端路由库，这些库提供了一组api和组件，用于定义路由规则、处理导航事件和渲染相应的视图。
2024-04-01 19:46:36
1052
原创 vue3性能提升主要通过哪几方面？
编译优化的策略与具体实现是由框架的设计思路决定的，不同的框架具有不同的设计思路，因此编译优化的策略也不尽相同。但优化的方向是基本一致的，就是尽可能的区分和，并根据不同的内容采用不同的优化策略。
2024-04-01 19:33:00
1291
1
原创 pnpm比npm、yarn好在哪里？
其实这样设计的目的是解决“幽灵依赖”问题，只有声明过的依赖才会以软链接的形式出现在node_modules目录中，在实际项目中引用的是软链接，软链接指向的是 .pnpm 的真实依赖，所以在日常开发中不会引用到未在 package.json 声明的包。npm3+ 和 yarn 是通过铺平的扁平化的方式来管理 node_modules，解决了嵌套方式的部分问题，但是引入了幽灵依赖的问题，并且同名的包只会提升一个版本的，其余的版本依然会复制多次。这样不会有复制多次的磁盘空间浪费，而且也不会有路径过长的问题。
2024-03-31 22:05:31
707
原创 JSX基础语法
默认情况下是undefined，因为在正常的DOM操作中，监听点击，监听函数中的this其实是节点对象（比如说button对象），但是因为React并不是直接渲染成真实DOM，我们所编写的button只是一个语法糖，它的本质React的Element对象，那么在这里发生监听的时候，react在执行函数时并没有绑定this，默认情况下就是一个undefined。在React中并没有像Vue模块语法中的v-for指令，而且需要我们通过JavaScript代码的方式组织数据，转成JSX，那到底如何展示列表呢？
2023-10-26 09:41:24
125
原创 浏览器缓存机制
如果不命中则根据头信息向服务器发起请求，使用协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器直接使用本地资源的副本，如果协商缓存不命中，则服务器返回最新的资源给浏览器。浏览器第一次向服务器发起该请求后拿到结果，会根据响应报文中HTTP头的缓存标识，决定是否缓存结果，如果是就将请求结果和缓存标识存入浏览器缓存中。所谓浏览器缓存值得是浏览器将用户请求过的静态资源，存储到电脑本地磁盘中，当浏览器再次访问时，就可以直接从本地加载，不需要在向服务端请求了，这样就大大减少了请求的次数，提高了网站的性能。
2023-10-05 16:53:54
154
原创 深入理解浏览器渲染原理
reflow的本质就是重新计算layout树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发布局。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当JS代码全部完成后再进行统一计算。所以，改动属性造成的reflow是异步完成的。也同样因为如此，当JS获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器在反复权衡下，最终决定获取属性立即reflow。
2023-10-04 20:51:42
338
原创 由浅入深学习Tapable
他们通过注入插件的方式，来监听webpack的所有生命周期，插件的注入离不开各种各样的Hook，而他们的Hook是如何得到的呢？的机制与Event类似，它可以用来定义各种各样的钩子，相当于Event中的事件注册，但是与Event不同的是，Event中各个事件之间相互不关联，互不影响，但是tapable注册的事件之间可以是有关系的，这种关系通过。Tapable的每个子类都是一个用于注册和触发事件的钩子，我们可以查看一下SyncHook实例身上有哪些属性，找到它注册事件和触发事件的属性。的核心就是这些钩子类。
2023-08-12 16:48:18
621
原创 webpack性能优化
介绍Terser是一个JavaScript的解释（Parser）、Mangler（绞肉机）/Compressor（压缩机）的工具集；早期我们会使用 uglify-js来压缩、丑化我们的JavaScript代码，但是目前已经不再维护，并且不支持ES6+的语法；Terser是从 uglify-es fork 过来的，并且保留它原来的大部分API以及适配 uglify-es和uglify-js@3等；Terser可以帮助我们压缩、丑化我们的代码，让我们的bundle变得更小。安装。
2023-08-10 22:49:21
572
原创 babel
babel是一个工具链，主要用于就旧浏览器或者环境中将ECMAScript2015+代码转换为向后兼容版本的JavaScript，包括语法转换、源代码转换、polyfill实现目标环境缺少的功能等，以便能够运行在当前和旧版本的浏览器或其他环境中。
2023-07-24 00:13:23
91
原创 让浮动元素在一行显示
2. 1190 = box盒子宽度 + -10px + 0。因为box盒子是个div，默认宽度是1190px，而设置了。之后，强行将box盒子的宽度拉到1200px了。3. 所以box盒子宽度为1120px。🧑💻座右铭：道阻且长，行则将至💗。wrap盒子宽度=box盒子宽度+
2023-07-05 15:28:25
229
原创 vue中的diff算法
当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁通过进行判断，相同则调用patchVnode方法patchVnode做了以下操作：找到对应的真实dom，称为el如果都有都有文本节点且不相等，将el文本节点设置为Vnode的文本节点如果oldVnode有子节点而VNode没有，则删除el子节点如果oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el如果两者都有子节点，则执行函数比较子节点主要做了以下操作：设置新旧VNode。
2023-05-20 23:25:48
436
1
原创 ES6新特性
关于ES6和JavaScript的关系ES6是对于ES2015+的俗称，也可以说是通常叫法，那么，ES6是什么呢？ES 全称是ECMAScript，它是JavaScript基础构建的一种语言，JavaScript正是建立在ECMAScript语言的基础规范中建立使用的，那么，ECMAScript的使用，对于JavaScript至关重要！
2023-05-02 01:31:36
775
5
原创 为什么要清除浮动？清除浮动的方式
非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面影响布局。这种现象被称为浮动（溢出）。
2023-04-27 11:08:06
2236
2
原创 队列的定义、基本操作、案例
/入队 this . dequeue = dequeue;//出队 this . front = front;//查看队首元素 this . back = back;//查看队尾元素 this . toString = toString;//显示队列所有元素 this . clear = clear;//清空当前队列 this . empty = empty;//判断当前队列是否为空 }希望我的文章能对你学习队列有所帮助！
2023-04-24 21:22:12
591
1
原创 【LeetCode刷题笔记】反转链表、移除链表元素、两两交换链表中的节点、删除链表的倒数第N个结点
希望我的文章能对你学习链表的知识有所帮助！
2023-04-23 23:16:15
408
7
原创 【LeetCode刷题】最长回文子串
left指针前移，right后移，若left指向的元素和right指向的元素相同，构成新的回文串。然后通过比较，找出最长的回文串。枚举每一个子串，找回文串，然后通过比较，找出最长的回文串。截取字符串时，是[i,j)，左闭右开的。🧑💻座右铭：道阻且长，行则将至💗。
2023-04-22 19:17:45
429
1
原创 JavaScript如何实现继承？
以一张图总结：通过来划分不同的继承方式，最后的寄生式组合继承方式是通过组合继承改造之后的最优继承方式，而extends的语法糖和寄生组合继承的方式基本类似。
2023-04-21 18:47:33
528
5
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人