- 博客(143)
- 收藏
- 关注
RSS订阅原创 TypeScript 中的 interface
在 TypeScript 中，interface 是一种定义对象结构或“形状”（shape）的类型。它可以指定一个对象必须具有的属性、方法以及它们的数据类型。通过使用 interface，你可以确保对象实例遵循特定的模式或契约。
2024-07-07 15:49:52
232
原创 常见的TypeScript类型注解符号
用途: 基本数据类型。用途: 表示未知类型，比any更安全，需要明确的类型检查才能进行操作。用途: 表示可以是任何类型。使用时要小心，因为它会绕过类型检查。用途: 表示永远不会到达的终点，常用于抛出异常或无限循环的函数。用途: 用于指定类型。放在变量名或函数参数后面，紧接着是类型。用途: 告诉编译器你确定该值不是null或undefined。表示变量可以是多种类型之一。用途: 在泛型或条件类型中，表示类型约束。指定数组元素的类型。用途: 对象类型，指定对象属性的类型。用途: 在对象类型中表示可选属性。
2024-05-10 17:56:56
337
原创 TypeScript 的 interface
interface 在 TypeScript 中是非常强大的工具，它帮助你构建复杂的数据模型，确保类型安全，使得代码更加健壮。通过组合、继承和索引签名等功能，接口能够灵活地适应各种复杂的类型定义需求。
2024-05-03 15:44:21
380
原创 将SSH密钥添加到GitHub账户
首先，您需要在本地计算机上生成一个新的SSH密钥对。打开终端或命令提示符，然后运行以下命令。请确保替换your_email@example.com为您GitHub账户关联的电子邮件地址。这里我们使用Ed25519算法，因为它既安全又高效。按照提示操作。当询问您要保存密钥的文件时，按Enter键接受默认路径（通常是~/.ssh/id_ed25519），并设置一个可选的密钥 passphrase（密码短语）以增加安全性。
2024-04-30 15:27:42
977
原创 JavaScript 中的类型转换机制
JS 中有六种简单数据类型：undefined、null、boolean、string、number、symbol，以及引用类型：object但是我们在声明的时候只有一种数据类型，只有到运行期间才会确定当前类型上面代码中，x的值在编译阶段是无法获取的，只有等到程序运行时才能知道虽然变量的数据类型是不确定的，但是各种运算符对数据类型是有要求的，如果运算子的类型与预期不符合，就会触发类型转换机制常见的类型转换有：● 强制转换（显示转换）● 自动转换（隐式转换）
2024-04-25 19:08:28
674
原创 Decorator
Decorator，即装饰器，从名字上很容易让我们联想到装饰者模式简单来讲，装饰者模式就是一种在不改变原类和使用继承的情况下，动态地扩展对象功能的设计理论。最初，装饰器作为一个Stage 2的提案存在于ES7（ECMAScript 2016）以后的规格草案中。即使到了2024年，装饰器仍未正式成为ECMAScript的标准部分，但已经被广泛应用于一些框架和库中，通过Babel等转译工具来实现装饰器的语法。
2024-04-24 19:32:37
729
原创 Module
模块，（Module），是能够单独命名并独立地完成一定功能的程序语句的集合（即程序代码和数据结构的集合体）。两个基本的特征：外部特征和内部特征● 外部特征是指模块跟外部环境联系的接口（即其他模块或程序调用该模块的方式，包括有输入输出参数、引用的全局变量）和模块的功能● 内部特征是指模块的内部环境具有的特点（即该模块的局部数据和程序代码）
2024-04-24 18:10:27
893
原创 Promise
Promise ，译为承诺，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强大在以往我们如果处理多层异步操作，我们往往会像下面那样编写我们的代码阅读上面代码，是不是很难受，上述形成了经典的回调地狱现在通过Promise的改写上面的代码瞬间感受到promise解决异步操作的优点：● 链式操作减低了编码难度● 代码可读性明显增强。
2024-04-23 18:11:12
865
原创 Set Map
用一句话来描述Set和MapSet是一种叫做集合的数据结构，Map是一种叫做字典的数据结构什么是集合？什么又是字典？● 集合是由一堆无序的、相关联的，且不重复的内存结构【数学中称为元素】组成的组合● 字典是一些元素的集合。每个元素有一个称作key 的域，不同元素的key 各不相同区别？● 共同点：集合、字典都可以存储不重复的值● 不同点：集合是以[值，值]的形式存储元素，字典是以[键，值]的形式存储。
2024-04-23 17:31:11
747
原创 ES6 函数新增的扩展
上面的foo函数，当参数为对象的时候才能进行解构，如果没有提供参数的时候，变量x和y就不会生成，从而报错，这里设置默认值避免。参数默认值应该是函数的尾参数，如果不是非尾部的参数设置默认值，实际上这个参数是没发省略的。如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了。一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域。● 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
2024-04-23 15:56:15
389
原创 ES6 中对象新增的扩展
● Object.getOwnPropertyNames(obj)：回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。● Reflect.ownKeys(obj)：返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。● Object.keys(obj)：返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。在解构赋值中，未被读取的可遍历的属性，分配到指定的对象上面。
2024-04-22 18:31:16
869
原创 Grid 布局
grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素。上述代码实例中，.container元素就是网格布局容器，.item元素就是网格的项目，由于网格元素只能是容器的顶层子元素，所以p元素并不是网格元素。align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。这时，浏览器会自动生成多余的网格，以便放置项目。
2024-04-22 17:46:42
938
原创 CSS3 新增的新特性
当我们设置背景图片时，图片是会以左上角对齐，但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐?新增了几个关于背景的属性，分别是background-clip、background-origin、background-size和background-break。元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。
2024-04-22 17:00:33
960
原创 CSS3 实现动画
属性含义transition（过度）用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同transform（变形）用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”translate（移动）只是transform的一个属性值，即移动animation（动画）用于设置动画属性，他是一个简写的属性，包含6个属性。
2024-04-22 16:16:27
552
原创 回流 重绘
当我们对 DOM 的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘。当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来。合并之后，等于我们将所有的更改一次性发出。在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变。
2024-04-22 15:14:15
950
原创 响应式设计
响应式布局优点可以看到：● 面对不同分辨率设备灵活性强● 能够快捷解决多设备显示适应问题缺点：● 仅适用布局、信息、框架并不复杂的部门类型网站● 兼容各种设备工作量大，效率低下● 代码累赘，会出现隐藏无用的元素，加载时间加长● 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果● 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。
2024-04-21 23:08:21
539
原创 CSS 性能优化
每一个网页都离不开css，但是很多人又认为，css主要是用来完成页面布局的，像一些细节或者优化，就不需要怎么考虑，实际上这种想法是不正确的作为页面渲染和内容展现的重要环节，css影响着用户对整个网站的第一体验因此，在整个产品研发过程中，css性能优化同样需要贯穿全程css实现性能的方式可以从选择器嵌套、属性特性、减少http这三面考虑，同时还要注意css代码的加载顺序。
2024-04-21 22:43:36
648
原创 如何实现 单行 / 多行 文本溢出的省略样式
在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号单行文本溢出多行文本溢出。
2024-04-21 22:23:29
724
原创 CSS 实现视差滚动效果
● 滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。● perspective: css3 属性，当元素涉及 3d 变换时，perspective 可以定义我们眼睛看到的 3d 立体效果，即空间感。● 子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样。
2024-04-14 23:24:59
1191
原创 CSS 画一个三角形
在前端开发的时候，我们有时候会需要用到一个三角形的形状，比如地址选择或者播放器里面播放按钮通常情况下，我们会使用图片或者svg去完成三角形效果图，但如果单纯使用css如何完成一个三角形呢？实现过程似乎也并不困难，通过边框就可完成。
2024-04-13 23:15:14
596
原创 Vue 中 CSS scoped 原理
在日常的Vue项目开发过程中，为了让项目更好的维护一般都会使用模块化开发的方式进行。也就是每个组件维护独立的template，script，style。今天主要介绍一下使用为什么在页面渲染完后样式之间并不会造成污染。
2024-03-28 15:37:54
897
原创 webpack loader和 plugin 实现原理
入口文件内容被放到一个数组中，总共有六个Node节点，我们可以看到，每个节点有一个type属性，其中前两个的type属性是ImportDeclaration，这对应了我们入口文件的两条import语句，并且，每一个type属性是ImportDeclaration的节点，其source.value属性是引入这个模块的相对路径，这样我们就得到了入口文件中对打包有用的重要信息了。但是如果import和export的内容非常多，这会是一个很麻烦的过程，这里我们借助babel提供的功能，来完成入口文件的分析。
2024-03-26 17:57:23
1038
原创 HTTP3
TCP、UDP是我们所熟悉的传输层协议，UDP比TCP相比效率更高但并不具备传输可靠性。而QUIC便是看中UDP传输效率这一特性，并结合了TCP、TLS、HTTP/2的优势，加以优化。于是在QUIC上层的应用层所运行的HTTP协议也就被称为HTTP/3。
2024-03-26 15:42:37
543
原创 什么是自定义 Hook
通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。可以理解成Hook就是用来放一些重复代码的函数。下面我将做手动实现一个列表渲染、删除的组件，然后把它做成自定义Hook。一般可以将自定义Hook给单独放在一个文件中，如果要使用，就引过来在需要使用的App组件中执行自定义Hook并接收API//这里接收return出来的查、删APIreturn (... //这里跟最开始的App组件里是一样的，为了页面整洁，就不贴代码了。
2024-03-24 17:42:18
255
原创 arguments 这种类数组如何遍历
要说到类数组对象，Arguments 对象就是一个类数组对象。Arguments 对象只定义在函数体中，包括了函数的参数和其他属性。在函数体中，arguments 指代该函数的 Arguments 对象。我们可以看到除了类数组的索引属性和length属性之外，还有一个callee属性，接下来我们一个一个介绍。传入的参数，实参和 arguments 的值会共享，当没有传入时，实参与 arguments 值不会共享。除此之外，以上是在非严格模式下，如果是在严格模式下，实参和 arguments 是不会共享的。
2024-03-24 17:23:12
382
原创 什么是 CSS 工程化
CSS 代码如何组织、如何拆分、模块结构怎样设计？：怎样写出更好的 CSS？：如何处理我的 CSS，才能让它的打包结果最优？：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？
2024-03-24 15:57:46
1225
原创 什么是跨平台
我们知道，cpu 有不同的架构和指令集，上层也有不同的操作系统，一个系统的可执行文件在另一个系统上就是不可执行的，比如 windows 的 exe 文件在 mac 上就不能直接执行。不同的系统就是不同的运行平台。可执行文件是不跨平台的。不同平台提供的 api 不同，所以代码逻辑可能也不同，需要不同平台单独维护代码。所以出现了跨平台的一些技术，目标是一份代码跑在任意平台。
2024-03-22 17:47:14
774
原创 遍历数组的方式有哪些
在可迭代对象（具有 iterator 接口）（Array，Map，Set，String，arguments）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句，不能遍历对象。由于foreach是Array型自带的，对于一些非这种类型的，无法直接使用(如NodeList)，所以才有了这个变种，使用这个变种可以让类似的数组拥有foreach功能。最简单的一种遍历方式，也是使用频率最高的，性能较好，但还能优化。对数组中的每一项运行给定的函数，会返回满足该函数的项组成的数组。
2024-03-19 17:45:11
723
原创 如何提高 webpack 的构建速度
在开发环境中使用较轻量的source map，例如cheap-module-eval-source-map，在生产环境中禁用或使用更轻量的source map。： 在Webpack配置中指定resolve的modules和extensions，以减小Webpack在文件系统中搜索文件的范围。： 使用Webpack Bundle Analyzer等工具来分析你的构建输出，找出体积较大的模块，以便进一步优化。： 可以考虑使用一些轻量级的Webpack插件，避免引入过多的不必要的功能。
2024-03-19 17:06:23
472
原创 setTimeout 延时设置为 0，一般在什么场景下使用
例如，在处理大量数据或循环迭代时，通过将每个迭代步骤延迟到0延时的setTimeout中，可以分批处理，减少单次操作的执行时间，从而避免长时间的JavaScript执行阻塞。通过将操作放置在0延时的setTimeout回调中，可以使其成为下一个事件循环周期的微任务，并确保在其他异步操作之后执行。当我们需要在当前事件循环结束后，等待浏览器完成UI渲染后再执行回调函数时，可以使用0延时。将setTimeout的延时参数设置为0通常用于创建一个宏任务，使用0延时仍然会导致一些延迟，但它比较接近于立即执行。
2024-03-19 16:54:05
559
原创 什么是渐进式框架
当然不是，如果你只是使用VUE做些基础操作，如：页面渲染、表单处理提交功能，那还是非常简单的，成熟技术人员上手也就一两天。并不需要你去引入其他复杂特性功能。场景二：我们的项目规模逐渐的变大了，我们可能会逐渐用到前端路由、状态集中管理、并最终实现一个高度工程化的前端项目。也可以在新项目启动初期，有限的使用Vue的功能特性，从而降低上手的成本。更直白一点就是，用你想用或者能用的功能特性，你不想用的部分功能可以先不用。渐进式的含义：没有多做职责之外的事，只做了自己该做的事，没有做不该做的事，仅此而已。
2024-03-19 16:48:04
228
原创 前端面试题10
MVVM（Model-View-ViewModel）是一种软件架构模式，用于构建用户界面，特别是在基于GUI的应用程序中。Model（模型）：模型代表应用程序的数据和业务逻辑。在MVVM中，模型通常是一个简单的类或数据结构，负责管理数据的获取、存储和处理。View（视图）：视图是用户界面的结构和外观。它负责展示模型中的数据，并将用户的输入和操作传递给ViewModel处理。在MVVM中，视图通常是由XML、HTML、XAML等标记语言定义的。ViewModel（视图模型）：视图模型是视图和模型之间的连接器。
2024-03-19 16:40:22
529
原创 可迭代对象
可迭代对象是指实现了迭代器协议（Iterator Protocol）的对象。迭代器协议要求对象包含一个名为[Symbol.iterator]的方法，该方法返回一个迭代器对象。迭代器对象包含一个next()方法，用于按照定义的顺序返回序列中的下一个值。如果一个对象没有实现迭代器协议（没有[Symbol.iterator]方法），它将被视为不可迭代。of循环遍历可迭代对象外，你还可以使用Symbol.iterator和next()方法手动迭代可迭代对象。
2024-01-13 20:02:47
364
原创 防止用户快速连续点击，造成数据多次提交的方法
增加变量控制，当变量满足条件时才执行点击事件的后续代码（比如给按钮的点击事件增加防抖）为了防止重复提交，前端一般会在第一次提交的结果返回前，将提交按钮禁用。如果按钮使用 button 标签实现，可以使用 disabled 属性。加遮罩层，比如一个全屏的loading，避免触发按钮的点击事件。css设置 pointer-events 为 none。
2024-01-05 20:56:58
642
原创 ES6 中的 Set 和 Map
用一句来描述：Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构什么是集合？什么又是字典？集合是由一堆无序的、相关联的，且不重复的内存结构【数学中称为元素】组成的组合字典是一些元素的集合。每个元素有一个称作key 的域，不同元素的key 各不相同共同点：集合、字典都可以存储不重复的值不同点：集合是以[值，值]的形式存储元素，字典是以[键，值]的形式存储。
2024-01-03 22:23:07
886
原创 Vue 中 v-show 和 v-if 的区别
但是，根据条件的值，v-show 会通过 CSS 控制元素的显示和隐藏，不会从 DOM 中移除元素。v-if 在条件切换时，如果条件从 true 切换为 false，会销毁并重新创建元素，这涉及到 DOM 的删除和重新插入，可能会有一定的性能开销。v-show 在条件切换时，只是简单地通过 CSS 控制元素的显示和隐藏，不会销毁和重新创建元素，因此切换的开销较小。v-if 在初始渲染时，如果条件为 false，元素不会被渲染到 DOM 中，因此在初始渲染时可能会有一定的性能优势。
2024-01-03 21:40:54
335
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人