- 博客(88)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Java学习（一）—— 初探Java
本系列文章皆为笔者学习韩顺平老师Java视频及阅读其他资料总结、感悟而来。笔者在学习 Java 之前是有学习过一段时间的 JavaScript 的，所以这一系列博客难免会涉及到两种语言之间的碰撞，但大概是不影响你对其的阅读的。希望在Java学习之路上不再孤单。欢迎志同道合的小伙伴一起学习。
2022-11-09 11:09:15
308
1
原创 Vue源码探秘（二）—— Vue 响应式原理模拟
步入Vue3，尤小右使用Proxy对其进行了改造，不仅抛弃了如 $delete 之类的鸡肋API（因为Proxy可以监听删除属性），还提升了性能。当data中有多个对象时，需要对其进行遍历，此时需要对上述代码进行一些改造。// 数据劫持，当访问或设置vm中的成员的时候，做一些操作。注：为简便起见，代码实现并未加入对传参的考虑。注：为简便起见，代码实现并未加入对传参的考虑。// 是否可配置，即delete删除。// 模拟Vue中的data选项。// 模拟Vue的实例。
2022-09-05 14:56:24
344
原创 Vue源码探秘（一）——Vue-Router原理实现
在看这篇文章的几点要求：需要你先知道Vue-Router是个什么东西，用来解决什么问题，以及它的基本使用。如果你还不懂的话，建议上官网了解下Vue-Router的基本使用后再回来看这篇文章。：插件、slot插槽、mixins混入、render函数、运行时和完整版的Vue。
2022-09-04 15:16:02
398
原创 深入剖析JavaScript（二）——异步编程
目前主流的JavaScript执行环境都是以单线程执行JavaScript的。JavaScript早期只是一门负责在浏览器端执行的脚本语言，主要用来操作DOM，如果其添加的同时又删除了DOM，浏览器就不知道该如何是好，所以其就被设计成为单线程模型。而随着JavaScript能做的事情越来越多，如果一直维持同步编程的话，就会导致浏览器卡在某个耗时操作无法进行下一步，造成浏览器假死的现象，影响用户体验。因此，异步编程应运而生。
2022-09-02 15:20:43
306
原创 深入剖析JavaScript（一）——函数式编程
函数式编程(Functional Programming, FP)，FP 是编程范式之一，我们常听说的编程范式还有面向过程编程、面向对象编程。面向对象编程：面向对象有三大特性，通过封装、继承和多态来演示事物之间的联系，如果更宽泛来说，抽象也应该算进去，但是由于面向对象的本质就是抽象，其不算是三大特性也不为过。函数式编程：函数式编程的思想主要就是对运算过程进行抽象，它更像一个黑盒，你给入特定的输出，进过黑盒运算后再返回运算结果。你可以将其理解为数学中的y = f(x)。
2022-09-01 18:41:07
363
1
原创 Mini-Vue之渲染系统实现（render）及diff算法
事实上，Vue源码包含三大核心：Compiler模块：模板编译系统；Runtime模块：也可以称之为Render（渲染）模块，真正的渲染模块；Reactivity模块：响应式系统。
2022-08-17 21:12:36
429
1
原创 v-for列表渲染有无key值对比-diff算法详解
在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。那么这个key属性有什么作用呢？
2022-08-14 15:54:32
984
1
原创 构建webpack知识体系 | 青训营笔记
前端项目是由很多资源文件组合而成，为了保证代码的正确运行，要考虑文件之间的引用关系，必须严格按照依赖顺序书写代码，除此之外，还有很多其他问题，大大影响开发效率。为了解决这些问题，市面上出现了很多工具，如gulp、rollup、vite等，其中目前最具影响力、应用最为广泛的当属webpack。webpack本质上是一种前端资源编译、打包工具。......
2022-08-11 17:13:33
306
1
原创 你真的精通HTML吗？——那些“看不见”的HTML标签及其使用场景
提到HTML，前端工程师的第一反应肯定是这么简单的语言，有什么不会的？如果你还抱有上述看法，建议你接着看下去。
2022-07-28 19:50:26
424
原创 深入理解Vue2响应式原理
本文内容是基于《剖析Vue.js内部运行机制》关于响应式系统部分整理而来。虽然说Vue3已经发布有两三年了，数据响应也已经用Proxy重构了，但无论是为了学习编程思想，或者是为了面试，都有必要了解Vue2响应式原理是什么。不出意外的话，以后我还会写一篇关于Proxy数据代理的文章。......
2022-07-28 08:14:51
200
原创 VSCode自定义代码片段——以生成Vue模板为例（图文版）
在日常开发中，经常需要编写大量具有相同重复代码，而vscode中的代码片段可以完美解决这个问题。这篇教程就以生成Vue模板为例。
2022-07-21 05:00:00
928
原创 JS面试题-原型及原型链、作用域及作用域链、闭包
JavaScript常被描述为一种基于原型的语言(prototype--basedlanguage)——每个对象拥有一个原型对象，对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型，并从中承方法和属性，一层一层、以此类推。这种关系常被称为原型链(prototypechain),它解释了为何一个对象会拥有定义在其他对象中的属性和方法。—如上内容摘自MDN简单理解原型链就是在当前对象中找不到定义的话，会在当前对象的原型对象上继续查找，直至undefined。name20};...
2022-07-16 09:00:00
4238
原创 CSS面试题-继承属性、单位、清除浮动、如何画一个三角形、CSS优化
css属性继承指的是，特定的css属性可以向下传递到后代元素。简而言之，有关字体的属性都是可以继承的。讲清楚如下三点：1、px,em,rem,vw,vh的概念—— 一绝三香（相）2、px em rem之间的转换关系3、 em和rem的使用场景父元素固定宽高：添加新元素:使用伪元素：触发父元素BFC1-9、如何用CSS实现一个三角形原理就是四个方向都加一个透明边框，箭头指向哪个方向就修改哪个方向的边框。...
2022-07-15 08:00:00
120
原创 CSS面试题-如何实现左边定宽，右边自适应
外层盒子宽度确定情况下，左侧盒子宽度不固定，右边盒子宽度自适应。非严格意义：inline-block calcposition padding严格意义：
2022-07-13 11:30:20
184
原创 CSS面试题-盒模型、BFC、选择器及优先级
1、什么是盒模型？CSS基础框盒模型是CSS规范的一个模块，它定义了一种长方形的盒子。2、盒模型的分类有？盒模型从标准定义上分为标准盒模型和替代（正）盒模型，从元素类型上分为块级盒子和内联盒子3、盒模型的切换：通过box-sizing属性进行切换：ie盒模型：box-sizing border-box标准盒模型：box-sizing content-boX4、盒模型属性设置，margin和padding值的设置：1个值的情况：如10px4个方向都为10px:2个值的情况：如10px20px上下10px
2022-07-08 16:40:18
189
原创 深浅拷贝之JavaScript不同方法的实现
简单来理解深浅拷贝就是：浅拷贝简单数据类型复制值，复杂数据类型复制引用；而深拷贝则无论数据类型是啥都复制值。下面来看两种拷贝的不同实现方法：
2022-07-04 16:43:24
185
原创 用JavaScript实现的排序算法（二）——归并排序、快速排序
上一篇文章讲了冒泡排序、选择排序、插入排序。这篇文章来讲归并排序和快速排序。归并排序是建立在归并操作上的一种有效，稳定的排序算法，该算法是采用分治法（Divide and Conquer）的一个非常典型的应用。将已有序的子序列合并，得到完全有序的序列；即先使每个子序列有序，再使子序列段间有序。若将两个有序表合并成一个有序表，称为二路归并。下面来看代码实现：时间复杂度为：O(nlogn)快速排序算法通过多次比较和交换来实现排序，其排序流程如下：(1)首先设定一个分界值，通过该分界值将数组分成左右两部分。(2
2022-06-28 13:15:06
104
原创 耗时8个小时用纯HTML和CSS写成的学成在线
这是我自己根据设计图写出来的学成在线首页.我会把项目所需要的设计图和我自己所写的代码放在末尾的网盘中，有需要可以直接划至末尾下载。
2022-06-25 06:00:00
104
原创 耗时10个小时用纯HTML和CSS写成的小兔鲜儿
根据黑马设计图自己用纯HTML和CSS写出来的小兔仙儿。我的代码以及所需图片都在网盘，需要可自取。
2022-06-24 06:00:00
1654
转载 CSS垂直居中指南
CSS中最简单的垂直居中方法是给容器相等的上下内边距，让容器和内容自行决定自己的高度。不管容器里的内容显示为行内、块级或者其他形式，这种方法都有效，但有时我们想给容器设置固定高度，或者无法使用内边距，因为想让容器内另一个子元素靠近容器的顶部或者底部。这在等高列中也是一个常见的问题，尤其是用浮动布局这种较传统的技术实现时。还好CSS表格和Flexbox能够轻松实现居中。（如果用传统的技术，需要用别的办法处理内容居中。）不同的情况有不同的处理方法，具体参考如下所示。在容器里让内容居中最好的方式是根据特定场景考虑
2022-06-23 04:00:00
46
原创 用JavaScript实现的排序算法（一）——冒泡排序、选择排序、插入排序
虽然JavaScript本身给我们提供了sort排序方法，但是了解并掌握其它的排序算法能让你在面试中底气更足。话不多说，来看看这些算法是如何实现的吧！
2022-06-22 04:00:00
417
原创 耗时5小时用纯HTML和CSS写成的博学谷
耗时5小时用纯HTML和CSS写成的博学谷。我会把项目所需要的设计图和我自己所写的代码放在末尾的网盘中，有需要可以直接划至末尾下载。
2022-06-21 04:00:00
521
原创 用六行CSS代码实现一个三角形
要实现一个三角形，可以先给一个块元素加上四个方向的边框。将另外三个边框的颜色变成透明，块元素的宽高都变为零，即可得到一个三角形。
2022-06-20 12:00:00
74
原创 JavaScript高阶函数的其他应用
所谓高阶函数，就是要满足以下两点条件之一：**柯里化（currying）**指的是将一个多参数的函数拆分成一系列函数，每个拆分后的函数都只接受一个参数（unary）。假设我们要编写一个计算每月开销的函数。在每天结束之前，我们都要记录今天花掉了多少钱。代码如下：实际上这是一个计算每月开销的程序，只需要保存前29天的数据，在第30天才开始求值计算。所以有如下代码：接下来我们编写一个通用的function currying(){}, functioncurrying(){}接受一个参数，即将要被curryin
2022-06-19 12:00:00
143
原创 Promise的四个相关面试题
宏队列：dom事件回调、ajax事件回调、定时器回调微队列：promise回调、mutation回调如对上述名词有不理解之处，请自行上MDN官方文档查询为了方便起见，代码行由最终的输出指定，如1代表第二行代码，2代表第五行代码。解析：promise为微队列，setTimeOut为宏队列，均为异步。先执行同步调用的最后一行代码。再执行2、4，最后执行1。所以对应的执行顺序为：3、2、4、1分析：所以对应的执行顺序为：2、5、3、4、1分析：所以对应的执行顺序为：3、7、4、1、2、5分析：所以对
2022-06-18 12:00:00
126
原创 重学CSS之相对单位（二）
上一篇文章介绍的em和rem都是相对于font-size定义的，但CSS里不止有这一种相对单位。还有相对于浏览器视口定义长度的视口的相对单位。视口——浏览器窗口里网页可见部分的边框区域。它不包括浏览器的地址栏、工具栏、状态栏。如果你不熟悉视口的相对单位，请先看下面的简单介绍。比如，50vw等于视口宽度的一半，25vh等于视口高度的25%。vmin取决于宽和高中较小的一方，这可以保证元素在屏幕方向变化时适应屏幕。在横屏时，vmin取决于高度；在竖屏时，则取决于宽度。视口相对长度非常适合展示一个填满屏幕的大图。
2022-06-17 12:00:00
161
原创 重学CSS之相对单位（一）
响应式——在CSS中指的是样式能够根据浏览器窗口的大小有不同的“响应”。这要求有意地考虑任何尺寸的手机、平板设备，或者桌面屏幕。如果给一个元素设置800px的宽度，在小窗口下会是什么样？水平菜单如果无法在一行显示会是什么样？在写CSS的时候，我们既要考虑整体性，也要考虑差异性。当有很多方法解决同一个问题时，我们要选择能够兼顾更多情况的方法。相对单位就是CSS用来解决这种抽象的一种工具。我们可以基于窗口大小来等比例地缩放字号，而不是固定为14px，或者将网页上的任何元素的大小都相对于基础字号来设置，然后只用改
2022-06-16 10:01:17
402
1
原创 重学CSS之层叠
CSS，即层叠样式表(英文全称：Cascading Style Sheets)，本系列第一篇就来讲CSS中的第一个C，即层叠（Cascading）。浏览器遵循三个步骤，即来源、优先级、源码顺序，来解析网页上每个元素的每个属性。你添加到网页里的样式表并不是浏览器唯一使用的样式表，还有其他类型或来源的样式表。你的样式表属于作者样式表，除此之外还有用户代理样式表，即浏览器默认样式。用户代理样式表优先级低，你的样式会覆盖它们。...
2022-06-14 22:26:32
745
原创 Top101-BM5 -合并K个升序链表 -(Leetcode23 ) -(JavaScript实现)
Top101-BM5 -合并K个升序链表 -(Leetcode23 ) -(JavaScript实现)
2022-05-31 20:20:54
66
原创 Top101-BM4 - 合并两个有序链表-(Leetcode21 ) -(JavaScript实现)
/** * Definition for singly-linked list. * function ListNode(val, next) { * this.val = (val===undefined ? 0 : val) * this.next = (next===undefined ? null : next) * } *//** * @param {ListNode} list1 * @param {ListNode} list2 * @return {Lis
2022-05-30 16:55:31
76
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人