- 博客(310)
- 收藏
- 关注
RSS订阅
原创 Accessibility into Development for Web Developers
无障碍设计是创建数字产品的重要组成部分，它为残疾客户提供公平的体验。尽管大多数公司至今仍将无障碍性视为开发周期末的一个考量，但在时间、精力和效果方面，这几乎总是类似于尝试将蓝莓推入已经烤好的松饼中。
2024-10-15 14:48:10
750
原创 flex布局优化(两端对齐，从左至右)
flex布局是前端常用的布局方式之一，但在使用过程中，我们总是感觉不太方便，因为日常开发中，大多数时候，我们想要的效果是这样的即左右两端对齐并顶满，小盒子左右间距一致，并且从左至右排布。今天主要就来讨论，通过css，有几种方式来实现，以及它们的优缺点。三种方式中，第二种方式最简单，但兼容性有限；第一种方式代码量不少，兼容性适中，而且的问题严重，最后一种方式，最推荐，虽然有一些计算，并且也要合理分配宽度，但其兼容性最好，基本没啥场景不能适用，正所谓一招鲜，吃遍天。
2023-03-20 11:42:11
16896
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
2313
原创 react 使用 useEffect 及踩坑
useEffect时reactHook中最重要，最常用的hook之一。useEffect相当于react中的什么生命周期呢？这个问题在react官网中有过介绍，在使用的过程中，容易被忽略，在面试的时候却经常被问及，（面试造航母，上班拧螺丝？
2021-02-25 23:12:40
30387
12
原创 vue 常见优化手段
优化是当页面出现问题或者效率过低采取的手段，任何优化不是没有代价，或许需要更多的开发时间，或许可维护性可扩展性会降低。所以，不要过度优化。
2025-03-28 15:11:39
696
原创 浏览器渲染页面 全流程解读
浏览器网络线程接收HTML文档：当浏览器的网络线程接收到HTML文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。整个渲染流程分为多个阶段，包括HTML解析、样式计算、布局、分层、绘制、分块、光栅化和画面绘制。每个阶段都有明确的输入输出，前一阶段的输出会成为后一阶段的输入，形成一个组织严密的生产流水线。
2025-03-26 15:33:54
673
原创 浏览器 事件循环
根据W3C官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。新任务会加到消息队列的末尾。在Chrome的源码中，它开启一个不会结束的for循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。
2025-03-25 17:48:29
761
原创 vue3 组件篇 WaterMark
Watermark（水印） 是一种在页面上叠加半透明文字或图案的技术，常用于保护敏感信息（如文档、图片、网页）的版权或防止未经授权的传播。以下是其核心要点：1. 信息标识：显示版权、用户信息或保密等级（如 “Confidential”）。2. 防篡改：通过覆盖页面内容，增加数据泄露的难度。3. 低干扰：半透明设计避免遮挡主体内容。Canvas生成：用 Canvas 绘制文本/图案，转为 Base64 图片作为背景。
2025-03-25 14:02:01
592
原创 微前端 qiankun vite vue3
主要介绍以qiankun框架为基础，vite 搭建vue3 项目为主应用，wepack vue2 和 webpack react 搭建的子应用，形成的一个微前端框架。
2025-03-20 00:19:48
845
原创 wujie vite vue3
本文主要介绍微前端框架wujie的使用，这是一个初步的框架搭建版本，主应用是vite vue3 子应用同样也是vite vue3 ，后续会添加更多的子应用到项目中。然后通过我自己的域名的子域名来进行发布，涉及到宝塔面板的使用和跨域Lunix的跨域配置。
2025-03-18 11:57:07
605
原创 微前端 无界wujie
安装完成以后，分别单独启动wujie的主应用，和子应用，记得将node的版本都统一设置为 16 这样就可以正常体验wujie官方提供的demo。如果您的当前环境中需要切换 node.js 版本, 可以使用 nvm or fnm 进行安装.pnpm 脚手架示例模版基于 pnpm + turborepo 管理项目。vue2主应用vue.config 配置。非保活模式的子应用在主应用中的配置。react 子应用，嵌套其他子应用。主应用中，用来显示子应用的配置。vue2主应用，路由的配置。
2025-03-17 17:53:20
316
原创 vue3 elementUi table自由渲染组件
elementui中的table组件，表格中想要自由地渲染内容，是一种比较麻烦的事情，比如你表格中想要某一列插入一个button按钮，是不是要用插槽，那下一次某一列插入一个图片，又得新开一种插槽或者类别。那么，有没有什么方法，能够通过配置，直接配置一个组件的方式，让表格的那一列直接渲染对应的组件。elementui table中并不提供这样的配置。所以需要开发人员自己封装。
2025-03-14 11:24:29
552
原创 vue3 elementUi Table 数据下拉懒加载
element ui 的table 没有提供下拉加载后续数据的功能，前端要想优化，要么做分页，要么做数据下拉追加。当数据太多，比如有上千条的时候，一次性渲染出来，会降低首屏加载时间，也会让页面滚动变得卡顿。
2025-02-20 17:52:33
733
原创 vue3 pinia状态管理
Pinia 的核心概念是“store”。你可以创建一个 store 来管理相关状态。你还可以对持久化进行更详细的配置。
2025-02-14 17:45:28
297
原创 前端 用js封装部分数据结构
set用对象来封装，key和value保存一致。如果要想确保万无一失，可以用symboal模拟set，这样可以在set里面保存任意内容。为了解决队列里面，移动一个，后面的所有元素都会跟着移动的问题，出现了新的数据结构，链表。链表是不定长度的数据，但与数组相比，不利于数据的搜索。为什么用对象来封装队列而不用数组呢，因为当数组shift的时候，会造成一定的性能问题。栈，先进后出，后进先出。用数组来进行模拟，通过push存入，通过pop取出。当你将数组第一个移动，实际上，整个数组所有的子元素都会跟着移动。
2024-11-27 22:37:15
403
原创 typescript 补充
ReadonlyArray 是 readonly 在数组中的一种特例。与普通数组不同，ReadonlyArray 禁止使用会修改数组的方法（例如 push、pop 等），从而确保数组内容不会被改变。Record 是一个类型工具，用于创建一个对象类型，其中键的类型可以选三种 ，值的类型可以任意规定。仅将嵌套对象设为不可变，而让顶层的普通属性保持可变状态。ReturnType 是返回函数的返回值的类型。Parameters 是返回参数的类型。
2024-11-09 21:17:43
557
1
原创 前端 性能优化 （图片与样式篇）
懒加载会等到图片在视窗中出现时才开始加载，减少初始页面加载的资源量，占位图则在图片未加载完成前提供一个小尺寸、模糊的占位图，让页面看起来更平滑。通过配置缓存策略，浏览器可以在多次访问时直接加载缓存中的 CSS 文件，避免重新请求 （前端的缓存策略，无非就是 Localstorage，service work）假设你有多个图片，添加 data-src 属性存储图片的实际 URL，src 属性设置为占位符（比如一张模糊的小图或空白图片），这样只有当图片进入视口时，才会加载实际的图片。
2024-11-09 11:53:40
1615
原创 前端 算法 双指针
给你一个整数数组 nums ，判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i!对于下标 i，下雨后水能到达的最大高度等于下标 i 两边的最大高度的最小值，下标 i 处能接的雨水量等于下标 i 处的水能到达的最大高度减去 height[i]。我们可以分别用两个for 循环，求出两部分的面积，然后再对两个数组记录的元素进行比较，取较小的值为一个新数组，最后让这个新数组减去柱子本身的高度。找出其中的两条线，使得它们与 x 轴共同构成的容器可以容纳最多的水。
2024-11-05 21:05:00
806
原创 typescript 如何跳过ts类型检查？
typescript 的使用，虽然让代码更加规范，利于维护，但也给开发带来很多麻烦。为了跳过很多ts的类型检查，大家也是费尽心思，下面就介绍一些常用的方式，但并不是每一个都推荐使用。
2024-11-02 23:28:40
811
原创 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
3365
原创 （06）vite与ts的结合
表明在打包时，如果有类型出错，不会生成打包文件，不会执行后面的。让 ts 在验证代码时，跳过node_module的文件。在开发中，可能还需要声明更多的类型与vite结合。会被vite引入，并在获取vite的。另外 build 命令中，新增了。
2024-04-29 14:56:55
836
2
原创 前端面试其它知识点（一）
微前端是一种软件架构模式，旨在让大型前端应用程序更容易开发、部署和维护。传统上，前端应用程序是作为单个、整体的单体应用程序开发和部署的，但随着应用规模的增长，这种方法可能导致一些问题，比如开发速度变慢、部署困难和难以维护。微前端通过将前端应用程序拆分为更小的、相互独立的子应用程序（微前端应用）来解决这些问题。每个子应用程序都有自己的开发团队、代码库和部署流程。这些子应用程序可以独立开发、测试和部署，然后集成到整体应用程序中。
2024-02-19 10:26:21
227
原创 （05）vite处理静态文件及引入
在vite.config.js中进行配置，通过resolve和alias 完成配置，和webpack那边基本一致。利用node自带的path来解析路径，然后配置别名，方便项目中各种层级的引用。一般打包的配置放到vite.prd.config.js中。配置别名后，引入静态资源时直接使用。
2023-12-21 10:24:54
1065
原创 （04）vite 插件 plugins
在插件文档增加一部分关于为什么本插件是一个 Vite 专属插件的详细说明（如，本插件使用了 Vite 特有的插件钩子）。在手写vite插件前，需要了解vite官网提供的一些vite相关的生命周期，以及这些生命周期对应的一些钩子函数。跟webpack的生态相比，vite确实还比不过，如果没有你想要的插件和配置，可能需要自己动手写插件。Vite 插件应该有一个带 vite-plugin- 前缀、语义清晰的名称。vite-plugin-svelte- 前缀作为 Svelte 插件。
2023-12-21 10:19:23
761
原创 前端css面试题(四)
比如，一个 z-index 值为 2 的元素会在层叠上下文中显示在一个 z-index 值为 1 的元素的上方。要注意的是，z-index 只对定位元素（即 position 值不是 static 的元素）有效。堆叠上下文是一个独立的层叠环境，其中的元素独立于文档的其他部分。如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素。用于控制元素在堆叠上下文中的层叠顺序，值越高的元素显示在值越低的元素的上方。，但是它是另一个元素的子元素，那么它在该子元素的父级范围内才会覆盖。
2023-12-04 15:29:19
304
原创 （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
1265
原创 前端 计算机基础篇 ( 二 )
当客户端发起条件请求（通常是带有 If-Modified-Since 或 If-None-Match 头部的 GET 请求），而服务器判断资源未被修改时，返回 304 状态码，告诉客户端可以使用缓存的版本。如果服务器发现请求中的 If-None-Match 的值与服务器上资源的 ETag 相同，说明客户端的资源仍然是最新的，服务器会返回 304 Not Modified，并告诉客户端可以使用缓存。这样，当其他用户请求相同的资源时，CDN 辐射点可以直接返回缓存的内容，而无需再次访问源服务器。
2023-11-23 15:46:40
420
原创 前端 vue 面试题(二)
各个组件的实例一旦被注入mixin之后，这些mixin就实例化一个个对象，这些对象之间的数据都是独立的，不像vuex那样，共享数据，一个组件改变状态，另外的组件也会自动更新。按照js事件循环，nextTick属于微任务，但微任务却是在更新dom这个宏任务执行后的回调去触发nextTick的执行，每一次一个宏任务执行完，都会立即清空微任务队列。treeshaking的本质是找到代码之间的依赖关系，这样才能判断哪些代码虽然被创建，却没有使用，哪些代码虽然被引入，也未被使用。在Vue中，可以通过调用组件实例的。
2023-11-23 14:44:42
820
原创 （02）vite环境变量配置
需要将不同的环境变量放到不同的文件中。来改变使用的前缀,一般来说不同环境使用的环境变量名称都是相同，不然你就得在不同的环境配置不同名称的环境变量，而且在使用的时候也要用不同的名字，太麻烦了。以上这些举例的变量，都会因为开发周期的变化，用不同的变量值，这个时候，如果这些变量能够根据环境的变化自动变化，就比较完美，减少人工干预，才可能不出错。
2023-11-21 18:51:56
1099
原创 （01）vite 从启动服务器开始
Vite（发音为"veet"）是一种现代化的前端构建工具，旨在提供快速的开发体验。它由尤雨溪（Vue.js 的创始人）团队开发并维护。Vite主要用于构建基于现代 JavaScript 框架（如Vue.js、React、以及Svelte等）的应用程序。与传统的前端构建工具不同，Vite采用了一种基于ESM（ECMAScript模块）的开发服务器，利用浏览器原生支持的模块导入方式，实现了快速的冷启动和开发服务器启动的速度。
2023-11-21 10:37:36
1002
原创 前端 webpack 面试题
处理模块的源代码转换。在中配置。针对不同类型的文件进行处理。执行整个构建过程中的特定任务。在plugins中配置。提供了更广泛的自定义和扩展能力。在实际的Webpack配置中，Loader和Plugin通常一起使用，以满足对不同类型的文件和构建过程的灵活需求。Loader负责处理文件转换，而Plugin负责执行其他构建任务。
2023-11-19 11:18:27
1056
原创 前端面试 算法与数据结构篇
设计很明确工作流的时候，可以使用generator来控制每一步的进程，但是很遗憾，generator没有提供明确的api来返回上一步，不能像双向链表一样，所以可能需要开发者从中进行额外的设计或干预。键值对，类似于对象和es6中的Map，对象是无序的，但map是有序的，对象不能使用for of 遍历而Map可以。这个方法的核心在于利用回文串的对称性质。栈的形式就是先进后出，而js本身的设计也处处体现了栈的运用，比如闭包，外层函数总是先执行，而内部函数总是后执行，而外层函数总是得等到内部函数完成后才能完成。
2023-11-17 17:07:50
408
原创 前端 react 面试题 （一）
自定义 Hooks 是一种用于在 React 函数式组件之间共享状态逻辑的机制。创建自定义 Hooks 可以帮助您将可复用的逻辑提取出来，以便在多个组件中共享。自定义 Hook 的命名应以 “use” 开头，这是 React 社区的一种约定，帮助开发者识别其为 Hook。// ...自定义 Hook 可以在一个或多个组件中使用，使得逻辑的重用更加灵活。// ...// ...自定义 Hook 中不应包含与组件生命周期相关的逻辑，例如或。这样的逻辑应该由使用 Hook 的组件自行处理。
2023-11-16 10:00:49
194
原创 前端 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
364
原创 前端js面试题 (四)
为了保证深度拷贝的万无一失，需要考虑各种情况，不是简单的JSON就能完成的，即使以上情况都没有，为了确保 JSON.parse() 不会失败，提供的 JSON 字符串应该是有效的、符合规范的，并且不包含不支持的数据类型。这里从建立tcp链接之后开始讲起，之前的过程中，浏览器经历了什么暂时不讨论，如果关心这一部分的同学，可以查阅一下，在浏览器输入url后，浏览器做了。Promise then里面的回调，属于微任务，往微任务队列里放，同步执行完，开始执行异步，微任务队列全部执行，没有，执行一个宏任务。
2023-11-14 10:23:38
212
原创 前端面试题 计算机网络
tcp协议在传输前会建立连接，对传输的数据有确认机制（确认对方是否收到），有丢失重传机制（如果对方未收到，重新传一份），有流量控制机制（防止传输过快而导致对方来不及处理导致丢包）等，确保数据的完整性和顺序性。UDP： 是无连接的协议。4.客服端利用数字认证机构的公钥（浏览器保存在客户端的）解密证书的数字签名，确认服务器公开密钥的真实性（证书的数字签名解密后，必须与服务端的公钥相同）。(证书里面有服务器的公钥，中间人能够拿到服务器的公钥，但他没有认证机构的私钥，无法加密生成数字签名，纂改证书)
2023-11-12 16:02:08
1389
国家或地区，中文名称与对应的地理坐标
2023-02-23
常用国家或地区 英文简写与地理坐标
2023-02-23
flexible.js 实现响应式布局
2022-11-01
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人