- 博客(300)
- 收藏
- 关注

原创 Accessibility into Development for Web Developers
无障碍设计是创建数字产品的重要组成部分,它为残疾客户提供公平的体验。尽管大多数公司至今仍将无障碍性视为开发周期末的一个考量,但在时间、精力和效果方面,这几乎总是类似于尝试将蓝莓推入已经烤好的松饼中。
2024-10-15 14:48:10
729

原创 flex布局优化(两端对齐,从左至右)
flex布局是前端常用的布局方式之一,但在使用过程中,我们总是感觉不太方便,因为日常开发中,大多数时候,我们想要的效果是这样的即左右两端对齐并顶满,小盒子左右间距一致,并且从左至右排布。今天主要就来讨论,通过css,有几种方式来实现,以及它们的优缺点。三种方式中,第二种方式最简单,但兼容性有限;第一种方式代码量不少,兼容性适中,而且的问题严重,最后一种方式,最推荐,虽然有一些计算,并且也要合理分配宽度,但其兼容性最好,基本没啥场景不能适用,正所谓一招鲜,吃遍天。
2023-03-20 11:42:11
16477
1

原创 sass语法速查
数据类型数字,1, 2, 13, 10px字符串,有引号字符串与无引号字符串,"foo", 'bar', baz颜色,blue, #04a3f9, rgba(255,0,0,0.5)布尔型,true, false空值,null数组 (list),用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serifmaps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)数字运算符+, -
2021-07-27 15:42:48
2278

原创 react 使用 useEffect 及踩坑
useEffect时reactHook中最重要,最常用的hook之一。useEffect相当于react中的什么生命周期呢?这个问题在react官网中有过介绍,在使用的过程中,容易被忽略,在面试的时候却经常被问及,(面试造航母,上班拧螺丝?
2021-02-25 23:12:40
30227
12
原创 前端 用js封装部分数据结构
set用对象来封装,key和value保存一致。如果要想确保万无一失,可以用symboal模拟set,这样可以在set里面保存任意内容。为了解决队列里面,移动一个,后面的所有元素都会跟着移动的问题,出现了新的数据结构,链表。链表是不定长度的数据,但与数组相比,不利于数据的搜索。为什么用对象来封装队列而不用数组呢,因为当数组shift的时候,会造成一定的性能问题。栈,先进后出,后进先出。用数组来进行模拟,通过push存入,通过pop取出。当你将数组第一个移动,实际上,整个数组所有的子元素都会跟着移动。
2024-11-27 22:37:15
378
原创 typescript 补充
ReadonlyArray 是 readonly 在数组中的一种特例。与普通数组不同,ReadonlyArray 禁止使用会修改数组的方法(例如 push、pop 等),从而确保数组内容不会被改变。Record 是一个类型工具,用于创建一个对象类型,其中键的类型可以选三种 ,值的类型可以任意规定。仅将嵌套对象设为不可变,而让顶层的普通属性保持可变状态。ReturnType 是返回函数的返回值的类型。Parameters 是返回参数的类型。
2024-11-09 21:17:43
533
1
原创 前端 性能优化 (图片与样式篇)
懒加载会等到图片在视窗中出现时才开始加载,减少初始页面加载的资源量,占位图则在图片未加载完成前提供一个小尺寸、模糊的占位图,让页面看起来更平滑。通过配置缓存策略,浏览器可以在多次访问时直接加载缓存中的 CSS 文件,避免重新请求 (前端的缓存策略,无非就是 Localstorage,service work)假设你有多个图片,添加 data-src 属性存储图片的实际 URL,src 属性设置为占位符(比如一张模糊的小图或空白图片),这样只有当图片进入视口时,才会加载实际的图片。
2024-11-09 11:53:40
1314
原创 前端 算法 双指针
给你一个整数数组 nums ,判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i!对于下标 i,下雨后水能到达的最大高度等于下标 i 两边的最大高度的最小值,下标 i 处能接的雨水量等于下标 i 处的水能到达的最大高度减去 height[i]。我们可以分别用两个for 循环,求出两部分的面积,然后再对两个数组记录的元素进行比较,取较小的值为一个新数组,最后让这个新数组减去柱子本身的高度。找出其中的两条线,使得它们与 x 轴共同构成的容器可以容纳最多的水。
2024-11-05 21:05:00
789
原创 typescript 如何跳过ts类型检查?
typescript 的使用,虽然让代码更加规范,利于维护,但也给开发带来很多麻烦。为了跳过很多ts的类型检查,大家也是费尽心思,下面就介绍一些常用的方式,但并不是每一个都推荐使用。
2024-11-02 23:28:40
658
原创 gitlab 创建 ssh 和 token
形成的token记录下来,这个token只能在这个时候被记录,再次点开时,将无法查看。进入gitlab页面后,通过头像点击弹出层里面找到preferences。的文件,用记事本打开,并复制里面的内容,内容就是创建的ssh key。其中账户就是 token的名称,密码就是之前记录的token。之后我们就可以通过token来验证gitlab。填一个token的name,最好是你的邮箱地址。这个token的时效,一般设置为一年。在gitlab中点击token。xxxxx是你自己的邮箱。
2024-05-29 16:42:26
2923
原创 (06)vite与ts的结合
表明在打包时,如果有类型出错,不会生成打包文件,不会执行后面的。让 ts 在验证代码时,跳过node_module的文件。在开发中,可能还需要声明更多的类型与vite结合。会被vite引入,并在获取vite的。另外 build 命令中,新增了。
2024-04-29 14:56:55
807
2
原创 前端面试其它知识点(一)
微前端是一种软件架构模式,旨在让大型前端应用程序更容易开发、部署和维护。传统上,前端应用程序是作为单个、整体的单体应用程序开发和部署的,但随着应用规模的增长,这种方法可能导致一些问题,比如开发速度变慢、部署困难和难以维护。微前端通过将前端应用程序拆分为更小的、相互独立的子应用程序(微前端应用)来解决这些问题。每个子应用程序都有自己的开发团队、代码库和部署流程。这些子应用程序可以独立开发、测试和部署,然后集成到整体应用程序中。
2024-02-19 10:26:21
214
原创 (05)vite处理静态文件及引入
在vite.config.js中进行配置,通过resolve和alias 完成配置,和webpack那边基本一致。利用node自带的path来解析路径,然后配置别名,方便项目中各种层级的引用。一般打包的配置放到vite.prd.config.js中。配置别名后,引入静态资源时直接使用。
2023-12-21 10:24:54
1015
原创 (04)vite 插件 plugins
在插件文档增加一部分关于为什么本插件是一个 Vite 专属插件的详细说明(如,本插件使用了 Vite 特有的插件钩子)。在手写vite插件前,需要了解vite官网提供的一些vite相关的生命周期,以及这些生命周期对应的一些钩子函数。跟webpack的生态相比,vite确实还比不过,如果没有你想要的插件和配置,可能需要自己动手写插件。Vite 插件应该有一个带 vite-plugin- 前缀、语义清晰的名称。vite-plugin-svelte- 前缀作为 Svelte 插件。
2023-12-21 10:19:23
723
原创 前端css面试题(四)
比如,一个 z-index 值为 2 的元素会在层叠上下文中显示在一个 z-index 值为 1 的元素的上方。要注意的是,z-index 只对定位元素(即 position 值不是 static 的元素)有效。堆叠上下文是一个独立的层叠环境,其中的元素独立于文档的其他部分。如果有非浮动元素和浮动元素同时存在,并且非浮动元素在前,则浮动元素不会高于非浮动元素。用于控制元素在堆叠上下文中的层叠顺序,值越高的元素显示在值越低的元素的上方。,但是它是另一个元素的子元素,那么它在该子元素的父级范围内才会覆盖。
2023-12-04 15:29:19
292
原创 (03)vite 处理 css
css开启 devSourcemap 后,能够快速找到每一个样式对应的文件名,但最好只在开发环境中使用,不开启devSourcemap 时,一般是上生产环境,默认情况下也是不开启的。启动服务器之后,发现css module的类名都被替换了,加了hash。componentA index.module.css 配置。vite 天生就支持对css文件的处理,主要的处理流程如下。componentB index.module.css 配置。原本index.css的文件被替换了。创建一个index.css文件。
2023-12-04 10:50:40
1201
原创 前端 计算机基础篇 ( 二 )
当客户端发起条件请求(通常是带有 If-Modified-Since 或 If-None-Match 头部的 GET 请求),而服务器判断资源未被修改时,返回 304 状态码,告诉客户端可以使用缓存的版本。如果服务器发现请求中的 If-None-Match 的值与服务器上资源的 ETag 相同,说明客户端的资源仍然是最新的,服务器会返回 304 Not Modified,并告诉客户端可以使用缓存。这样,当其他用户请求相同的资源时,CDN 辐射点可以直接返回缓存的内容,而无需再次访问源服务器。
2023-11-23 15:46:40
408
原创 前端 vue 面试题(二)
各个组件的实例一旦被注入mixin之后,这些mixin就实例化一个个对象,这些对象之间的数据都是独立的,不像vuex那样,共享数据,一个组件改变状态,另外的组件也会自动更新。按照js事件循环,nextTick属于微任务,但微任务却是在更新dom这个宏任务执行后的回调去触发nextTick的执行,每一次一个宏任务执行完,都会立即清空微任务队列。treeshaking的本质是找到代码之间的依赖关系,这样才能判断哪些代码虽然被创建,却没有使用,哪些代码虽然被引入,也未被使用。在Vue中,可以通过调用组件实例的。
2023-11-23 14:44:42
809
原创 (02)vite环境变量配置
需要将不同的环境变量放到不同的文件中。来改变使用的前缀,一般来说不同环境使用的环境变量名称都是相同,不然你就得在不同的环境配置不同名称的环境变量,而且在使用的时候也要用不同的名字,太麻烦了。以上这些举例的变量,都会因为开发周期的变化,用不同的变量值,这个时候,如果这些变量能够根据环境的变化自动变化,就比较完美,减少人工干预,才可能不出错。
2023-11-21 18:51:56
1065
原创 (01)vite 从启动服务器开始
Vite(发音为"veet")是一种现代化的前端构建工具,旨在提供快速的开发体验。它由尤雨溪(Vue.js 的创始人)团队开发并维护。Vite主要用于构建基于现代 JavaScript 框架(如Vue.js、React、以及Svelte等)的应用程序。与传统的前端构建工具不同,Vite采用了一种基于ESM(ECMAScript模块)的开发服务器,利用浏览器原生支持的模块导入方式,实现了快速的冷启动和开发服务器启动的速度。
2023-11-21 10:37:36
904
原创 前端 webpack 面试题
处理模块的源代码转换。在中配置。针对不同类型的文件进行处理。执行整个构建过程中的特定任务。在plugins中配置。提供了更广泛的自定义和扩展能力。在实际的Webpack配置中,Loader和Plugin通常一起使用,以满足对不同类型的文件和构建过程的灵活需求。Loader负责处理文件转换,而Plugin负责执行其他构建任务。
2023-11-19 11:18:27
1038
原创 前端面试 算法与数据结构篇
设计很明确工作流的时候,可以使用generator来控制每一步的进程,但是很遗憾,generator没有提供明确的api来返回上一步,不能像双向链表一样,所以可能需要开发者从中进行额外的设计或干预。键值对,类似于对象和es6中的Map,对象是无序的,但map是有序的,对象不能使用for of 遍历而Map可以。这个方法的核心在于利用回文串的对称性质。栈的形式就是先进后出,而js本身的设计也处处体现了栈的运用,比如闭包,外层函数总是先执行,而内部函数总是后执行,而外层函数总是得等到内部函数完成后才能完成。
2023-11-17 17:07:50
399
原创 前端 react 面试题 (一)
自定义 Hooks 是一种用于在 React 函数式组件之间共享状态逻辑的机制。创建自定义 Hooks 可以帮助您将可复用的逻辑提取出来,以便在多个组件中共享。自定义 Hook 的命名应以 “use” 开头,这是 React 社区的一种约定,帮助开发者识别其为 Hook。// ...自定义 Hook 可以在一个或多个组件中使用,使得逻辑的重用更加灵活。// ...// ...自定义 Hook 中不应包含与组件生命周期相关的逻辑,例如或。这样的逻辑应该由使用 Hook 的组件自行处理。
2023-11-16 10:00:49
177
原创 前端 vue 面试题 (一)
v-if 和 v-show 是 Vue.js 中用于条件性渲染的两个指令,它们有一些重要的区别。初始化渲染时的差别:v-if:只有在表达式为真时才会,否则中。v-show:元素总是会被渲染,只是通过 CSS 控制其显示或隐藏。性能差别:v-if:当条件为假时,DOM 元素会被销毁,再次为真时重新创建。因此,在条件频繁切换时,可能会有一些性能开销。v-show:无论条件是真还是假,DOM 元素总是保持在 DOM 树中,只是通过 属性来控制显示或隐藏。在条件频繁切换时,相对而言性能开销较小。适用场景:v
2023-11-14 20:23:57
359
原创 前端js面试题 (四)
为了保证深度拷贝的万无一失,需要考虑各种情况,不是简单的JSON就能完成的,即使以上情况都没有,为了确保 JSON.parse() 不会失败,提供的 JSON 字符串应该是有效的、符合规范的,并且不包含不支持的数据类型。这里从建立tcp链接之后开始讲起,之前的过程中,浏览器经历了什么暂时不讨论,如果关心这一部分的同学,可以查阅一下,在浏览器输入url后,浏览器做了。Promise then里面的回调,属于微任务,往微任务队列里放,同步执行完,开始执行异步,微任务队列全部执行,没有,执行一个宏任务。
2023-11-14 10:23:38
189
原创 前端面试题 计算机网络
tcp协议在传输前会建立连接,对传输的数据有确认机制(确认对方是否收到),有丢失重传机制(如果对方未收到,重新传一份),有流量控制机制(防止传输过快而导致对方来不及处理导致丢包)等,确保数据的完整性和顺序性。UDP: 是无连接的协议。4.客服端利用数字认证机构的公钥(浏览器保存在客户端的)解密证书的数字签名,确认服务器公开密钥的真实性(证书的数字签名解密后,必须与服务端的公钥相同)。(证书里面有服务器的公钥,中间人能够拿到服务器的公钥,但他没有认证机构的私钥,无法加密生成数字签名,纂改证书)
2023-11-12 16:02:08
1384
原创 js 变量声明与赋值 笔试踩坑题
别小看变量声明与赋值,在所有的笔试中,基本都会考,这个要多变态就能多变态,但只要掌握基本的规律,我们就能游刃有余,面对一切困难。abc()abc()上面三段代码分别会发生什么?
2023-11-10 18:21:27
312
原创 js运算,笔试踩坑知识点
先乘除后加减,括号里的加减优先于括号外的乘除。先计算,后赋值,计算从左向右,赋值从右向左。符号在前,先计算再运行。符号在后,先运行再计算。
2023-11-10 10:43:56
375
原创 vue3 组件篇 Carousel
Carousel(走马灯)是一种常见的前端组件,通常用于展示多个项目(通常是图片或内容块)的轮播效果。它是网页和应用中的常见UI元素之一,通常用于滚动广告、产品展示、图片轮播、新闻滚动等场景。图片/内容轮播:Carousel能够以水平或垂直的方式,循环地显示多个项目,使用户能够逐个或自动浏览这些项目。自动播放:通常,Carousel支持自动播放功能,允许项目在不需要用户干预的情况下自动切换。导航控件:通常,Carousel提供导航控件,如箭头或小圆点,用户可以点击它们来切换到不同的项目。
2023-11-06 21:52:15
4652
3
原创 vue3 组件篇 Icon
Icon(图标)组件是一种常见的用户界面元素,用于在网页、移动应用和桌面应用中显示图标。这些图标通常用来传达信息、进行导航、增强用户界面或提供视觉元素。
2023-11-06 10:11:12
858
原创 node 版本管理工具(nvs)
前端程序员面对的项目,可能一对多,而这多个项目可能是以前遗留下来的老项目,这些老项目中各有各的依赖,并不是最新版本的node就能兼容所有不同的开发项目。比如一个项目需要用到node v16,另外一个项目必须用node v14才能正常编译运行,因此,单独下载一个node版本,已经不能满足开发需求,我们需要同时开发这两个老项目,让node的版本,在对应的项目中不停切换,这就需要node版本管理工具来实现。
2023-10-26 15:36:58
518
原创 前端js面试题 (一)
10道常考的js面试题,有的经常被面试官问,有的又是笔试题中常见的,有的只是一些基本的概念,真正掌握了才能应对日常的开发。
2023-09-20 17:55:21
306
原创 css前端面试题(三)
一些css面试题讲解,即使没看过第一部分和第二部分也没关系,它们都是独立的。每一道题都有详细的讲解和说明,帮助你更好的理解,希望大家都能面试成功!!
2023-09-15 18:06:41
486
国家或地区,中文名称与对应的地理坐标
2023-02-23
常用国家或地区 英文简写与地理坐标
2023-02-23
flexible.js 实现响应式布局
2022-11-01
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人