面试文档
文章平均质量分 90
阿宇的编程之旅
本人擅长Ai、Fw、Fl、Br、Ae、Pr、Id、Ps等软件的安装与卸载,精通CSS、JavaScript、PHP、ASP、C、C++、C#、Java、Ruby、Perl、Lisp、python、Objective-C、ActionScript、Pascal、spss、sas等单词的拼写,熟悉Windows、Linux、Mac、Android、IOS、WP等系统的开关机
展开
-
重拾CSS,前端样式精读-函数(其他函数)
用于检索元素属性的值,并在CSS中使用。例如:attr(attribute-name type)。attribute-name是要检索的属性名称,type是一个可选的定义属性值数据类型的参数,如px、em或其他CSS单位。原创 2024-09-10 16:25:45 · 562 阅读 · 0 评论 -
重拾CSS,前端样式精读-函数(颜色,计算,图像和图形)
它接收两个参数,第一个是变量值。第二个是默认值,当变量不存在时就会默认使用第二个值。图像集背景效果可以使用鼠标滚轮对页面缩放来观察效果。原创 2024-07-22 10:48:39 · 985 阅读 · 0 评论 -
重拾CSS,前端样式精读-选择器
【代码】重拾CSS,前端样式精读-选择器。原创 2024-07-08 08:52:46 · 826 阅读 · 0 评论 -
TypeScript(十六)配置相关(tsconfig配置)
上篇文章,我们对TS配置中的命令行配置做了介绍,本文将对tsconfig.json配置做个解析tsconfig.json是TypeScript中用于配置编译器选项的配置文件。该文件通常位于TypeScript项目的根目录下,并告诉TypeScript编译器如何处理项目中的TypeScript文件。下面我将分享一些常用的配置,以及截止v5.3.3版本官方提供的配置参考常用配置全部配置原创 2024-05-08 16:06:28 · 1383 阅读 · 1 评论 -
TypeScript(十五)配置相关(命令行配置)
由于typescript配置涉及面相对复杂,所以放在较后的文章中,并不是它不重要,实际上配置项才是最重要的知识点,因为在开发中会遇到与逻辑无关的配置问题,如果熟悉配置或许用不了多久就可以解决。原创 2024-04-15 09:05:59 · 1197 阅读 · 0 评论 -
前端如何优雅的使用定时器?
前言在前端开发中,使用定时器可以处理一些循环操作或者延时操作,比如使用setinterval可以在指定的时间间隔重复执行函数,setTimeout则是用于在指定时间后执行一次函数,还有之前提到的requestAnimationFrame动画帧函数,在使用全局定时器时,可能不会关注其启用数量及优化操作,导致实际开发中遇到一些性能问题。借助本篇文章,与大家分享一个定时器的管理工具,希望各位看完后能有所收获。原创 2024-04-08 09:58:02 · 1481 阅读 · 0 评论 -
iframe动态操作标签分享
和webpack有些不同,webpack可以通过CopyWebpackPlugin或者IgnorePlugin等方式加载或排查文件,但是使用vite时遇到了。第一步是将静态资源打包进正式包中,这里可以使用rollup的插件rollup-plugin-copy来达到复制静态资源的目的。第二步是动态修改iframe中的link标签的href地址,达到资源替换的效果。原创 2024-03-20 18:12:58 · 974 阅读 · 0 评论 -
Web Components详解-HTML Templates
在前面Web Components系列文章的插槽中,我们使用直接在body中写入html标签的形式来承载shadowDOM中的元素,这么做会使标签在DOM多渲染一次,不仅降低了性能,还使标签直接暴露在页面中,遵循组件的可重用性、隔离性和封装性,Web Components提供了一种模板标签:template。它可以在DOM文档中定义模板,然后可以通过JavaScript动态地填充和显示这些模板,达到html组件封装的效果。原创 2024-02-18 10:51:59 · 950 阅读 · 2 评论 -
Web Components详解-Shadow DOM插槽
前言插槽实际上也属于组件通信的一种方式,但是由于其强大的api和实用性,我将其单独拆开来介绍。定义Slot(插槽)是Web Components中一个重要的特性,它允许在组件内部定义占位符,以便父组件可以向其中插入内容。换句话说就是将子组件或者标签传入父组件中,最终达到在父组件外部实现子组件的效果原创 2023-09-11 10:16:22 · 1198 阅读 · 28 评论 -
浏览器事件机制详解
浏览器的事件机制是web前端面试及开发过程中绕不开的话题,可以说一切用户操作或者浏览器的行为都离不了事件,它允许开发者通过JS处理用户的操作,并处理操作逻辑,将结果反馈给用户。本篇文章将深入浏览器事件的运行机制,和大家一起探讨其强大的功能及广泛的用法浏览器的事件可以分为以下几类:鼠标事件键盘事件表单事件窗口事件DOM事件原创 2023-09-18 10:22:18 · 1148 阅读 · 42 评论 -
Web Components详解-组件通信
我们常说到程序的运行和代码的实现遵循高内聚和低耦合,理解一下这句话,模块中的功能在逻辑上是有关联的,模块之间依赖关系较弱。前端的组件同样遵循这套原则,单个组件的功能逻辑是完整的,组件与组件之间也没有强关联,那么如何保证组件之间的联系呢?在Vue和React中一般使用props响应式通信、bus事件总线、Pinia,Vuex,Mobx全局状态等等方式进行数据传递,类似的本篇文章也将介绍Web组件的通信方式原创 2023-10-24 10:45:53 · 1155 阅读 · 45 评论 -
Web Components详解-Shadow DOM样式控制
前言本文继续Web Components系列文章,介绍一下Shadow DOM的样式及选择器。Shadow DOM的样式与外界是隔离的,即自定义元素的样式只会影响到Shadow DOM内部,不会影响到外部的页面元素,这点在之前有说到过。那么有什么办法可以在Shadow DOM中使用全局样式?样式选择器又有什么异同呢?请跟着本篇文章一起探究:host伪类作为伪类使用原创 2023-10-07 11:22:51 · 879 阅读 · 31 评论 -
Web Components详解-Shadow DOM基础
上篇文章的自定义标签中,我们使用customElements对象对原生标签进行拓展,达到组件的拓展性与复用性的效果,那么如何保证组件的属性、结构及样式的封装隔离便是本篇文章将要分享的内容,本篇文章不仅仅会介绍Shadow DOM,还会对前面说到的Custom Elements做一个使用场景的拓展及深入探究在JS作用域一文中,我们提到全局作用域和局部作用域的概念,如果全局作用域没有处理好可能会导致作用域污染,出现问题。如果单纯的使用Custom Elements实现自定义组件的功能可能会存在样式冲突,Dom干原创 2023-09-04 10:20:18 · 1981 阅读 · 30 评论 -
Web Components详解-Custom Elements
随着项目体量的增大,组件化和模块化的优势也愈发明显了,构建可重复使用、独立、可互操作的组件变得尤为重要,在JS中我们可以通过class和函数对代码解耦,使某段代码可以复用。在TS中我们也可以通过模块对代码进行模块化开发,在HTML页面中同样有一种技术可以实现独立的、可复用的组件,这便是本篇文章讲到的Web ComponentsWeb Components主要包括Custom Elements、Shadow DOM、HTML Templates和JavaScript这四部分,在后续的文章中我们会详细讲讲在熟悉原创 2023-08-28 14:20:34 · 1414 阅读 · 28 评论 -
JS案例:在浏览器实现自定义菜单
分享一下之前公司实现自定义菜单的思路,禁用浏览器右键菜单,使用自定义的菜单将其代替,主要功能有:鼠标右键调出菜单,双击选中/取消选中标签,新建标签,删除标签,调整位置,调整大小,取消拖拽,关闭菜单原创 2023-07-24 10:50:41 · 1921 阅读 · 40 评论 -
如何在CSS中写变量?一文带你了解前端样式利器
引言前端的变量写法大致可以分为三大类,分别是CSS-in-JS,CSS预处理器,和CSS原生变量。作为前端开发人员,我们应该了解并善用它们,以便实现更加灵活、可维护的样式。本篇文章将与大家分享一下原生CSS的变量写法概念CSS变量也叫自定义属性,在它出现之前,CSS中使用的值通常是硬编码的(静态编写),这导致了样式代码的重复和冗余,在管理和维护大型项目时存在一些困扰和隐患原创 2023-06-27 10:01:47 · 4987 阅读 · 19 评论 -
JavaScript作用域详解
作用域是JavaScript中一个重要的概念,它决定了变量和函数在代码中的可访问性和可见性。了解JavaScript的作用域对于编写高效、可维护的代码至关重要。本文将深入介绍JavaScript作用域的不同类型、作用域链以及闭包等相关内容。原创 2023-07-31 09:31:55 · 2000 阅读 · 30 评论 -
在?聊聊浏览器事件循环机制
JS是单线程语言,在某个时间段只能执行一段代码。这种单线程模型的好处是不会出现多线程的竞态条件和死锁等问题:在多线程中,某个资源同时被其他线程调度时可能会出现执行顺序不确定导致错误,或者资源占用等待这一类的问题。因此JS无法同时处理多任务,为了处理这类任务,JavaScript运行时使用了一种叫事件循环机制的异步编程模型JS的事件循环机制是一种异步编程模型,其特点是异步非堵塞,它决定了JavaScript的异步执行顺序和运行机制。JS的事件循环机制由调用栈(Call Stack)、任务队列(Task Que原创 2023-06-20 18:02:30 · 1882 阅读 · 20 评论 -
你真的了解JS垃圾回收机制吗?
垃圾回收是JavaScript中内存管理的重要组成部分。开发人员不需要手动分配和释放内存。垃圾回收机制可以自动处理内存的分配和释放,减轻了开发人员的负担,并且降低了内存泄漏的风险,它的主要目的是自动地检测和释放不再使用的内存,以便程序能够更高效地利用系统资源。它通过标记不再需要的对象,并回收它们所占用的内存空间,以便其他对象可以使用。本篇文章将与大家分享,介绍一下JavaScript垃圾回收的重要性和定义,并深入探讨内存管理的概念、JS垃圾回收机制的分类,以及如何避免内存泄漏以及性能优化。原创 2023-07-10 10:00:55 · 1621 阅读 · 26 评论 -
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
接着上文往下介绍,上篇文章我们对JS原生动画和贝塞尔曲线有了一个详细的认识,基于定时器或动画帧,我们可以实现元素的动画缓动,本文将分享浏览器中功能强大的Animations API,有兴趣的话就接着往下看吧Web Animations API于2016年成为Web标准的一部分,它的功能比之前提到的动画要丰富的多,它的核心理念是时间轴和动画效果。它提供了一组功能强大的方法和属性,用于定义、操作和管理动画效果。时间轴(Timeline)是Web Animations API中的核心概念之一。原创 2023-08-07 09:45:14 · 715 阅读 · 24 评论 -
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(上)
上篇文章我们详细的讲述了CSS中的原生动画技术,了解了过渡与动画属性。那么本文将与大家分享原生JS中的动画方案,有兴趣的同学请接着往下看JS实现动画的形式有定时器,动画帧以及动画API技术早期的JS中动画帧和动画API的概念尚不存在,开发者通常使用定时器生成对应动画我使用上面的代码实现了一个简单的匀速运动,其中按钮一控制运动和暂停,按钮二控制运动的方向,其中speed用于控制速度,frame控制帧数,下面是动画效果原创 2023-07-17 09:42:07 · 1475 阅读 · 40 评论 -
作为前端开发,你了解MutationObserver吗?
MutationObserver在开发中或许不常使用,但是特殊情况下确实可以解决某些问题。和addEventListener有些类似,当用户触发了某些事件操作时会调用对应的回调我也是前些天在需求迭代中第一次使用MutationObserver,由于Antd早期版本的弹窗没有做响应功能,以及代码中的弹窗许多没有进行二次封装,导致无法得知弹窗何时出现及消失,于是我使用前端Hack的方式取个巧,监听元素变化解决了此类问题,这里也是做个知识点分享原创 2023-06-12 10:51:29 · 3473 阅读 · 18 评论 -
JS的迭代器是啥?精读JS迭代器
在ES6中引入了迭代器的概念,它是一种遍历数据集合的机制,并且提供了一种简单而一致的方式来访问集合中的每个元素,在集合与映射这篇文章中,我们就已经初步认识了Symbol.iterator这个概念。迭代器是通过迭代协议实现的,每一个拥有该协议的对象都可以称作是可迭代的对象,这个协议的标识就是Symbol.iterator,它是ES6中引入的一个新的Symbol值,表示一个对象是否有可迭代性。可迭代对象的Symbol.iterator属性是一个函数,我们称为迭代器对象原创 2023-05-29 10:04:16 · 1621 阅读 · 11 评论 -
浅谈JS的映射和集合
Map(映射)和Set(集合)是ES6引入的数据结构,它们提供了更灵活、高效的方式来存储和访问数据。本文将介绍一下这两种数据结构以及WeakMap和WeakSet这两种新的数据结构的概念及使用。原创 2023-05-22 09:50:11 · 1419 阅读 · 10 评论 -
JS案例:前端Iframe及Worker通信解决思路
在前端开发中,经常会使用iframe来实现一些特殊的需求,比如将第三方的页面嵌入到自己的页面中,或者在同一页面中显示多个不同的内容。然而,由于iframe具有独立的文档结构和执行环境,所以在多个iframe之间进行数据交互和通信变得十分困难。此时iframe之间的通信就非常重要,为了让iframe与父级或其他页面共享数据和状态或使页面间达到联动的目的,我用JS实现了一个插件包,这里做个分享首先我们需要熟悉iframe的通信方式window对象提供了postMessage函数,使用postMessage给子页原创 2023-05-09 15:44:07 · 1860 阅读 · 4 评论 -
TypeScript(十四)变体(协变与逆变)
第一次接触到变体这个概念是在深入理解TypeScript中,类型之间的转换称为变体或者变型,在TS中,类型之间能否互相赋值,会不会报错,安不安全这些都与变体有关。本文将带大家了解ts中的变体在Java中,每一个类都是一个个体,比如,我们定义了一个Dog和Cat两个类,这二者的结构相同。在Java中,每一个类都是一个个体,比如,我们定义了一个Dog和Cat两个类,这二者的结构相同。原创 2023-05-15 18:08:38 · 866 阅读 · 4 评论 -
TypeScript(十三)声明合并
相信读过上篇文章TS模块后,大家对TS的模块机制有了一定的了解,那么本篇文章将给大家介绍重名模块或者类型的声明合并以及使用方式我们第一次接触到类似的概念是来源于函数这篇文章,其中函数的重载就是声明合并TS中的声明合并包含接口,类型别名,函数重载,命名空间,枚举,命名空间和类,类的合并。接下来我会深入介绍这几种合并方式原创 2023-05-01 08:11:24 · 2670 阅读 · 4 评论 -
使用TS+rollup打造一个npm工具库
说到Rollup,大家可能并不陌生,它是一款JS的模块打包器,适合对工具库和组件进行打包,将多个模块合并成单个文件,与Webpack,Browserify等不太一样,其对更小更快的库比较友好。此外,他可以生成ESM、CommonJS、AMD 和 UMD等输出格式,并且支持TS输入,可以检查TS类型及代码原创 2023-03-29 22:15:49 · 2229 阅读 · 2 评论 -
TypeScript(八)装饰器
在TS中,装饰器是一种特殊类型的声明。可以附加到类、方法、属性或参数上用于修改类的行为或属性。在面向对象编程中,有时需要对类的行为和功能做出修改,直接修改类的内部可能会使成本升高,或出现其他问题;此时可以使用装饰器来修改类,在保证类内部结构与功能不变的前提下对数据或行为进行迭代TS中装饰器可以分为类装饰器、方法装饰器、属性装饰器和参数装饰器。原创 2023-03-27 16:25:30 · 1959 阅读 · 8 评论 -
TypeScript(十二)模块
将体量大的程序拆分成多个小的,功能独立的模块是开发中不可或缺的一环,开发复杂程序的核心之一就是让其变得不复杂。模块化开发可以提高代码的可维护性、可重用性、可扩展性和可测试性,从而提高了开发效率和代码质量,TypeScript沿用了JS的模块概念,在之前文章中我介绍过Node环境下的两种类型兼容,顺带提了一下目前常用的模块导入导出方式:Commonjs和ES Module,这两种方式在TS中被称为是外部模块,除此之外TS还包含了内部模块和全局模块,本文将一一介绍参考文章命名空间和模块 - TypeScript原创 2023-04-18 16:54:42 · 10400 阅读 · 6 评论 -
TypeScript(十一)泛型工具类型
前面的文章我们对泛型的用法有了大概的认识,也通过泛型实现了一些常用的类型,那么这篇文章将深入了解一下泛型的工具类型的使用及实现,那么话不多说,我们直接开始。原创 2023-04-09 19:39:11 · 1250 阅读 · 8 评论 -
TypeScript(十)泛型进阶
前言上篇文章我们领略了泛型的灵活及强大;了解了泛型的基本使用以及常见用法。本文将针对泛型的其他用法做一些进阶拓展,其中有许多知识点可以防在前面的文章介绍,但是与泛型放在一起可能更好理解,那么话不多说,直接开始原创 2023-04-03 13:18:02 · 1032 阅读 · 9 评论 -
TypeScript(九)泛型基础
代码复用是开发人员老生常谈的问题了,我们通过定义变量,使用函数或类减少代码重复编写。在TS中我们可以把编写一个类型看成是新建一个函数,参数便是今天的主角:泛型;通过传入不同的参数(类型)控制类型的走向,达到类型复用的目的原创 2023-03-30 19:33:33 · 662 阅读 · 2 评论 -
TypeScript(六)函数
在前面的文章中,我使用对象类型以及接口分别定义了函数类型,浅谈了函数的定义及基本使用。本文将分享函数的进阶用法原创 2023-03-18 16:11:28 · 1233 阅读 · 0 评论 -
TypeScript(七)类
在早期的JavaScript中,我们使用函数来模拟类,使用原型链实现继承行为。在ES6以后JS也引入类的概念,虽然其本质还是使用原型继承和构造函数的语法糖实现的,但是类的写法依旧使得开发人员得心应手;相比JS的类,TS的类可以说是有过之无不及。在TypeScript中,类可以包含属性和方法,支持继承和接口实现,也可以使用修饰符来控制访问权限。类的定义使用class关键字,并可以在其中声明构造函数、属性、方法等。原创 2023-03-21 22:55:52 · 2030 阅读 · 2 评论 -
TypeScript(五)类型别名及类型符号
在编写JS代码时,我们通常使用const、var、let来定义一个变量,进行变量的运算或者逻辑编写等。在TS中也有一种类似变量的写法那就是类型别名,与运算逻辑相对应的便是类型符号在前面的文章中,我们介绍了TypeScript中常用的类型,然而在实际项目开发中,不可避免的会遇到各种复杂类型,有些可以使用接口或对象类型来描述,但是有些数据类型更灵活、复杂,那么此时,类型别名是一种非常有用的工具,它可以帮助我们简化代码,提高代码的可读性和可维护性;基本语法应用场景如果说类型别名是一个人,那么类型符号就是它的灵魂。原创 2023-03-13 10:26:28 · 2653 阅读 · 5 评论 -
TypeScript(四)接口
在介绍TS对象类型中,为了让数组每一项更具体,我们使用 string [ ] 表示字符串类型的数组,为了知道函数的参数与返回值,使用 let fn: (a: number, b: number) => number 来表示一个函数类型,那么作为复杂类型,仅仅使用Object表示一个普通对象类型是远远不能满足类型检查以及代码可读性的,有没有一种类型可以用来描述对象的结构呢?原创 2023-03-09 16:58:06 · 1608 阅读 · 6 评论 -
TypeScript(三)对象类型
在TS中除了之前的基本类型外,还包含Array(数组),Object(对象),Function(函数)等等继承于对象的其他对象,以及Tuple(元组),Enum(枚举)等高级类型,以及泛型,never,unknown类型。这些类型是TS强类型检查的基础Array(数组)Object(对象)Function(函数)Tuple(元组)Enum(枚举)泛型neverunknownTypeScript 入门教程TypeScript: Documentation - 基础原创 2023-03-05 14:44:35 · 4842 阅读 · 3 评论 -
TypeScript(一)TS介绍,环境安装与运行
TypeScript是JavaScript的超集,扩展了JavaScript的语法,因此现有的JavaScript代码可与TypeScript一起工作无需任何修改,TypeScript通过类型注解提供编译时的静态类型检查。其源于JavaScript(JS的拓展),终于JavaScript(编译成JS)TypeScript 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性,难以胜任和维护大型项目开发。因此微软开发了TypeScript ,使得其能够胜任开发大型项目。原创 2021-02-25 15:33:51 · 3309 阅读 · 30 评论 -
TypeScript(二)基本类型和特殊类型
距离上篇博客已有两年了,对TS也有了一定的认识,于是计划继续更新系列文章基本数据类型在TS中,基本数据类型有:Boolan(布尔),Number(数字),String(字符串),Null(空值),Undefined(未定义),Symbol(标识符,ES6新增),Bigint(任意位整数,精度在53位以内,ES10新增)。除了上面的基本类型外,还有Void(缺少值)通常表示函数无返回值,any(任意值)这些特殊类型变量定义在JavaScript中,我们通常使用var定义变量,在es6中新增原创 2023-02-17 14:42:56 · 993 阅读 · 0 评论