全部前端后端产品开发者客栈设计测试运维
最新 最热 官方 加精

客栈管理员 | 2个月前 | 开发者客栈

创作激励计划🔥

web3 去中心(去平台)化时代的到来, 用户数据创造的收益就应该回归到用户 !!! 内容平台是如何赚钱的 互联网圈主要的几个内容平台,例如csdn、掘金、思否、简书等,他们的核心收入莫过于加入广告,在文章详情的侧边栏加入广告,有人浏览文章就会看到广告,进而有部分人点击进入广告。 知识付费时代的到来 这个时代是知识付费的时代,如果你写的内容被浏览后给阅读者带来了成长,那你创作的内容就是有价值的,这部分内容应该给作者带来收益,不然作者也没有动力和激情继续去创作更多有价值的内容。 现在有很多这种付费平台,例如“得到”、“极客时间专栏”、“掘金小册”等。但是这些都是系统性的知识,就像书籍一样,需要阅读者直接花钱购买才可以看得到内容。 如何让你的文章给你赚钱 对很多人来说写一本书是很浪费时间和精力的,大部分人都是过段时间总结一些工作中的经验,或者是遇到问题解决问题后总结下如何解决的,下次怎么避免等,这种...

 1074 |  10 |  3 开发者客栈

客栈小K | 4天前 | CSS前端相关

纯CSS实现四种方式文本反差色效果

如封面图所示,文字随着界面的交互变化会修改文字的颜色形成反差色,让平平无奇的文字产生了眼前一亮的效果。如果你关注设计和动画效果,这样的效果肯定见过不少,在一些比较注重设计的网站都有类似的交互效果出现。本文将详细解读有哪些方案可以实现文本反差色效果。 动画效果一 文字蓝色背景颜色从左往右延伸至整个元素,文字背景颜色伴随着背景颜色覆盖过程中发生颜色的变化,且两段文字有着不同的颜色。 实现过程 如图所示两个颜色的背景是两个元素,一个绿色盒子,一个蓝色盒子,其中绿色盒子使用定位的层级 z-index 高于蓝色盒子;通过改变蓝色盒子的宽度覆盖绿色盒子;盒子里面的文字内容宽度固定,否则两段文本不能刚好重叠。 核心代码如下: js <div id="left-side" class="side" <h2 class="title" 前端开发 <span class="fancy" 南城FE</span

 34 |  0 |  0 CSS前端相关

客栈小K | 1周前 | 前端相关

pnpm 是凭什么对 npm 和 yarn 降维打击的

大家最近是不是经常听到 pnpm,我也一样。今天研究了一下它的机制,确实厉害,对 yarn 和 npm 可以说是降维打击。 那具体好在哪里呢? 我们一起来看一下。 我们按照包管理工具的发展历史,从 npm2 开始讲起: npm2 ---- 用 node 版本管理工具把 node 版本降到 4,那 npm 版本就是 2.x 了。 然后找个目录,执行下 npm init -y,快速创建个 package.json。 然后执行 npm install express,那么 express 包和它的依赖都会被下载下来: 展开 express,它也有 node\_modules: ![](https://static.developers.pub/a8d19b1960084cdc8a5cbf7fcc81d2...

 84 |  2 |  0 前端相关

客栈小K | 1周前 | 前端相关

2022年国内外前端发展态势

本文翻译者系奇舞团前端工程师 原文标题:State of Frontend 2022 原文作者:Aleksandra Dąbrowska 原文地址:[tsh.io/state-of-fr…](https://link.juejin.cn/?target=https%3A%2F%2Ftsh.io%2Fstate-of-frontend%2F "https://tsh.io/state-of-frontend/") 前端是否厌倦了新趋势,并寻求稳定? 一、简介 过去两年挺不容易的,在全球范围内引发了许多变化。自从我们的生活逐渐"搬到了线上",IT行业也顺势参与了数字转型。前端开发也在从技术探索再到落地实践等各个方面发生了很多变化。因此,我们尽可能的将前端2020年和2022年的数据并排呈现,以便更好地进行比较。 最著名的前端开发笑话“ 新的一天,新的框架 ”似乎已经过时了。当然,新的框架和库确实出现了,但在某些领域,朝着潮流创新的竞赛慢慢让位于成熟和稳定。 1.1 本文数据来源 3703份有效填写的调查问卷 1...

 172 |  0 |  0 前端相关

客栈小K | 1周前 | 前端相关JavaScript

聊一聊 Vite 的预构建和二次预构建

前言 之前在使用 Vite 的时候,经常会遇到这种情况:项目启动以后,不管是首屏还是页面懒加载,如果发现有未进行 预构建 的第三方依赖,那么 Vite 就会重新 预构建 ,然后触发页面的 reload 。重复的页面 load 操作,给开发人员带来了很不友好的体验。 最新发布的 3.0 版本对此问题做了部分优化,即首屏期间,即使有未进行 预构建 的第三方依赖,也不会发生页面 reload 。 那 3.0 版本是怎么做到的呢?今天我们就通过本文,和大家一起聊一聊 3.0 版本针对 二次预构建 做了什么优化。 本文的目录结构如下: [初探 Vite 预构建](about:blank 1 " 1") [二次预构建](about:blank 2 " 2") [Vite 3.0 对预构建的优化](about:blank 3 " 3") [vite-plugin-package-config vite-plugin-optimize-persist](about:blank 4 " 4") ...

 81 |  0 |  0 前端相关JavaScript

客栈小K | 2周前 | 前端相关

组件库建设——实现一个跨框架的「组件库文档」

要搞一个跨框架的组件库文档怎么下手?最近笔者在建设公司内部的组件库,其中就需要为vue2、vue3、react技术栈的中台系统提供基础组件以接入。于是,一个跨框架组件库文档的需求就来了... 背景介绍 -------- 需求背景概述: 内部需要做一个云产品以统一各种中后台系统(类似阿里云)。有一定的样式、布局规范,还有一些基于ui框架扩展的统一的基础组件。so,笔者需要做的就是做一个 组件库 ,分别实现 element-ui 、 element-plus 、 ant-design 组件的二次封装,并 提供组件库文档 给到使用方接入。 本文主旨: 围绕 组件库文档 进行展开。组件库文档并不是自研,笔者采用的是 vitepress 来快速搭建静态组件文档站点,所以 本文的一些技术攻坚也只针对于 vitepress 场景 ~ 实现在 vitepress 中使用 vue2 + element-ui 组件、 react+antd 组件。 react 还是没做哈哈哈,不过实现思路跟 vue2 是一样的。 实现文档内各...

 83 |  0 |  0 前端相关

客栈小K | 2周前 | Vue前端相关Java

思考vue3和react18的区别

前言 个人认为框架的初衷是带给开发者更好的开发体验,更快的性能,更简单的操作。 vue3 和 react18 都是最新的框架版本,两者虽然底层原理和思想不同,但是更多的是相同之处,比如都是声明式的,一般多用于 spa ,都用 hooks 来逻辑复用等等 用vite初始化vue3和react18项目 ----------------------------- pnpm create vite 然后删除无用的代码之后,再改造成同样功能的HelloWorld组件,这个组件做如下事情: 定义数据 count ,点击按钮可以是 count+1 ,页面也会响应式改变; 还有一个监听数据改变,在控制台打印改变的数据; 有一个数组 ['apple', 'orange', 'pear'] ,用于列表渲染到页面。 ![image-20220727144746261....

 128 |  1 |  0 Vue前端相关

Qbian | 4周前 | MySQL后端相关

慢 SQL 分析与优化

背景介绍 ---- 从系统设计角度看,一个系统从设计搭建到数据逐步增长,SQL 执行效率可能会出现劣化,为继续支撑业务发展,我们需要对慢 SQL 进行分析和优化,严峻的情况下甚至需要对整个系统进行重构。所以我们往往需要在系统设计前对业务进行充分调研、遵守系统设计规范,在系统运行时定期结合当前业务发展情况进行系统瓶颈的分析。 从数据库角度看,每个 SQL 执行都需要消耗一定 I/O 资源,SQL 执行的快慢,决定了资源被占用时间的长短。假如有一条慢 SQL 占用了 30%的资源共计 1 分钟。那么在这 1 分钟时间内,其他 SQL 能够分配的资源总量就是 70%,如此循环,当资源分配完的时候,所有新的 SQL 执行将会排队等待。所以往往一条慢 SQL 会影响到整个业务。 本文仅讨论 MySQL-InnoDB 的情况。 优化方式 ---- SQL 语句执行效率的主要因素 数据量 SQL 执行后返回给客户端的数据量的大小; 数据量越大需要扫描的 I/O 次数越多,数据库服务器的 IO 更容易成为瓶颈。 取数据...

 228 |  1 |  9 MySQL后端相关

客栈小K | 5周前 | 前端相关

Git不要只会pull和push,试试这5条提高效率的命令

前言 -- 使用 Git 作为代码版本管理,早已是现在开发工程师必备的技能。可大多数工程师还是只会最基本的保存、拉取、推送,遇到一些commit管理的问题就束手无策,或者用一些不优雅的方式解决。 本文分享我在开发工作中实践过的实用命令。这些都能够大大提高工作效率,还能解决不少疑难场景。下面会介绍命令,列出应用场景,手摸手教学使用,让同学们看完即学会。 stash ----- [官方文档](https://git-scm.com/docs/git-stash) [git 教程](https://www.bookstack.cn/read/git-tutorial/docs-commands-git-stash.md) 描述 官方解释:当您想记录工作目录和索引的当前状态,但又想返回一个干净的工作目录时,请使用git stash。该命令将保存本地修改,并恢...

 265 |  1 |  2 前端相关

客栈小K | 5周前 | Vue前端相关

Vue 2.7 正式发布,代号为 Naruto

大家好,我是CUGGZ。 今天,Vue 正式发布了 2.7 版本, 版本名称为 Naruto,即火影忍者。 尽管现在 Vue 3 是默认版本,但由于仍有许多用户由于依赖兼容性、浏览器支持要求或没有足够的带宽升级而不得不继续使用 Vue 2。在 Vue 2.7 中,从 Vue 3 向后移植了一些最重要的功能,以便 Vue 2 用户也可以从中受益。 向后移植的功能 ------- [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html) SFC [ <script setup ](https://vuejs.org/api/sfc-script-setup.html) SFC [CSS v-bind](https://vuejs.org/api/sfc-css-features.html v-bind-in-css) 此外,还支持以下 API: defineComponent() :具有改进的类型推断(与 Vue.extend 相比); h...

 358 |  1 |  0 Vue前端相关

HZFEStudio | 6周前 | 算法前端相关

算法:找到数组中重复的数字

题目描述 找出数组中重复的数字。 在一个长度为 n 的数组 nums 里的所有数字都在 0 n-1 的范围内。数组中某些数字是重复的,但不知道有几个数字重复了,也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。 示例: js 输入:[2, 3, 1, 0, 2, 5, 3] 输出:2 或 3 解法一: 哈希表 [在线链接](https://codesandbox.io/s/hzfe-suan-fa-shu-zu-zhong-chong-fu-shu-zi-ha-xi-biao-forked-p8df3?file=/index.html) 从题目中分析,只需要找到任意一个重复的数字,那么可以利用哈希表,用数字的值作为 key 去存储,如果遇到已经存在的 key,则直接返回,这样就找到了重复的数字。 算法步骤 1. 声明哈希表用来保存遍历的值。 2. 开始遍历数组。 3. 获取当前值,判断值是否已经存在,若存在,则返回结果并结束循环;若不存在,则继续下一步。 4. 储存当前值进哈希表。 5. 处理数组下一位

 289 |  4 |  4 算法前端相关

HZFEStudio | 6周前 | 前端相关JavaScript

编码:实现 apply/call/bind

apply 1\. 语法 js func.apply(thisArg, [argsArray]); 参数 thisArg 在 func 函数运行时使用的 this 值。 argsArray 一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined,则表示不需要传入任何参数。 返回值 使用指定的 this 值和参数调用函数的结果。 2\. 流程图 3\. 编写代码 js Function.prototype.apply = function (thisArg, argsArray) { if (typeof this ! "function") { throw new TypeError(

 170 |  2 |  0 前端相关JavaScript

HZFEStudio | 6周前 | CSS前端相关

样式:水平垂直居中方案

以下方案均基于如下布局和基础样式: html <div id="parent" <div id="children" HZFE</div </div css parent { background: red; height: 600px; } children { background: blue; } flex 适用场景:子元素宽高不固定、子元素宽高固定 css parent { display: flex; justify-content: center; align-items: center; } grid 适用场景:子元素宽高不固定、子元素宽高固定 css parent { display: grid; justify-content: center; align-items: center; } 相对定位 1\. transform 适用场景:子元素宽高不固定、子元素宽高固定 css children { di

 165 |  0 |  0 CSS前端相关

HZFEStudio | 6周前 | 前端相关TypeScript

基础:什么是 TypeScript 泛型

相关问题 TypeScript 泛型的作用是什么 回答关键点 工具 使用时指定类型 TypeScript 泛型是一种工具。它能让开发者不在定义时指定类型,而在使用时指定类型。 知识点深入 1\. 泛型类 类型参数在类名后面的尖括号中指定。泛型类可以具有泛型字段或方法。 js class HZFEMember<T, U { private id!: T; private name!: U; setMember(id: T, name: U): void { this.id = id; this.name = name; } show(): void { console.log( ID: ${this.id}, Name: ${this.name} ); } } const member1 = new HZFEMember<number, string (); member1.setMember(1, "QingZhen"); member1.show(); // ID: 1,

 126 |  0 |  0 前端相关TypeScript

HZFEStudio | 6周前 | Vue前端相关React

框架:谈谈 React 和 Vue 的区别

回答关键点 推模型与拉模型 模板与 JSX React 和 Vue 同为现代化的 Web 前端开发框架。相同之处都是采用数据驱动视图的思想,以虚拟 DOM 为基础,以组件化的方式组织应用,让开发者无需关心 DOM 细节,从更高的层次设计应用。不同之处在于,具体组件的编写方式(template vs jsx),数据响应模型以及具体的生态。 知识点深入 1\. 开发体验的区别 学习曲线 Vue:旨在降低前端开发门槛,学习曲线平缓,对了解 HTML、CSS 及 JS 的传统模式的前端开发和后端开发人员更友好。 React:传播自身的概念和思想,需要了解 JSX 的相关知识,组件中的一切都可以通过 JavaScript 灵活控制,上手成本相较于 Vue 来说略高。 JSX 与模板语法 Vue:默认使用基于 HTML 的模板语法,将模板、样式及逻辑划分开来使关注点分离。也可以选配 JSX 支持。 React:默认使用 JSX 编写组件,将 HTML 和 CSS 组合到 JavaScript 中。在选用 Typ...

 141 |  0 |  0 Vue前端相关

HZFEStudio | 6周前 | 前端相关React

框架:React 事件机制原理

相关问题 React 合成事件与原生 DOM 事件的区别 React 如何注册和触发事件 React 事件如何解决浏览器兼容问题 回答关键点 React 的事件处理机制可以分为两个阶段:初始化渲染时在 root 节点上注册原生事件;原生事件触发时模拟捕获、目标和冒泡阶段派发合成事件。通过这种机制,冒泡的原生事件类型最多在 root 节点上注册一次,节省内存开销。且 React 为不同类型的事件定义了不同的处理优先级,从而让用户代码及时响应高优先级的用户交互,提升用户体验。 React 的事件机制中依赖合成事件这个核心概念。合成事件在符合 W3C 规范定义的前提下,抹平浏览器之间的差异化表现。并且简化事件逻辑,对关联事件进行合成。如每当表单类型组件的值发生改变时,都会触发 onChange 事件,而 onChange 事件由 change、click、input、keydown、keyup 等原生事件组成。 知识点深入 1\. 原生事件和合成事件 JavaScript 通过事件可以和 DOM 进行交互。 1.1 原生事件...

 113 |  1 |  0 前端相关React

HZFEStudio | 6周前 | 前端相关

工程化:谈谈微前端

相关问题 为什么要用微前端 微前端的优缺点 回答关键点 独立开发 独立运行 独立部署 自治 微前端是一种架构理念,它将较大的前端应用拆分为若干个可以独立交付的前端应用。这样的好处是每个应用大小及复杂度相对可控。在合理拆分应用的前提下,微前端能降低应用之间的耦合度,提升每个团队的自治能力。 目前市面有各类不同的微前端方案,但没有完美的解决方案。微前端方案通常需要考虑:应用加载机制、通信机制、代码隔离机制等问题。 知识点深入 微前端使用场景 前端工程化中,一个前端项目常以组件或模块的粒度进行代码拆分,然后通过 script 标签、npm 包、submodules 或者动态加载(Dynamic import)等形式将代码集成到项目中。而微前端则是以更大的粒度对代码进行上下文划分,将较庞大的应用拆分成多个技术栈独立的应用...

 124 |  0 |  0 前端相关

HZFEStudio | 6周前 | 前端相关

工程化:如何对前端代码实施测试

相关问题 你是如何看待软件测试的? 你在工作中是如何实施测试的? 对前端代码进行测试,有哪些测试方法? 说说你对测试驱动开发的理解? 回答关键点 Unit Tests E2E Tests 测试覆盖率 TDD BDD 测试是保障代码质量的重要手段,可以验证我们代码的正确性;测试可以增强我们在修改代码时的信心,保证代码重构的正确性;编写测试还有助于理解业务功能,避免在编写代码时做出过度的设计;对于开发人员来说,测试用例还是最好的开发文档。测试的分类方法有很多种,一般按测试阶段可以分为单元测试(Unit Tests)、集成测试(Integration Tests)、E2E 测试(端到端测试,End-to-End Tests)来保障产品关键路径的可靠性。 一般来说,测试代码由大量的单元测试,适中的集成测试,以及少量的 E2E 测试构成。 测试驱动开发(TDD)是一种通过编写测试来指导软件的开发过程,构建软件的技术。 知识点深入 测试的种类 从不同的角度对待测试,会有不同的分类方法,例如白盒测试、回归测试、...

 105 |  1 |  0 前端相关

HZFEStudio | 6周前 | 前端相关

浏览器:前端路由实现

相关问题 路由是什么 前端路由的实现方式和实现原理 前端路由和服务端路由的区别 前端路由的优势 前端路由的不足 回答关键点 路由 Hash 路由 History 路由 无刷新 SPA(Single-page application,单页面 Web 应用) 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动。 —— 维基百科 对于 Web 开发来说,路由的实质是 URL 到对应的处理程序的映射。 Web 路由既可以由服务端,也可以由前端实现。其中前端路由根据实现方式的不同,可以分为 Hash 路由 和 History 路由 。 前端路由对于服务端路由来说,最显著的特点是页面可以在无刷新的情况下进行页面的切换。基于前端路由的这一特点,诞生了一种 无刷新 的单页应用开发模式 SPA 。SPA 通过前端路由避免了页面的切换打断用户体验,让 Web 应用的体验更接近一个桌面应用程序。 知识点深入 前端路由根据具体实现方式的不同,可以分为 Hash 路...

 114 |  0 |  0 前端相关

HZFEStudio | 6周前 | 前端相关

综合:如何减少白屏的时间

回答关键点 资源优化 预加载 服务端渲染 性能监控指标 HTTP/2 前端性能优化是前端开发中一个重要环节,它包括很多内容,其中页面的白屏时间是用户最初接触到的部分,白屏时间过长会显著影响用户的留存率和转换率。 我们以一个 APP 内嵌 Webview 打开页面作为例子,来分析页面打开过程以及可优化的方向: 0. 前置条件 性能监控指标 1. APP 内点击打开页面 2. DNS 解析 预解析 域名收敛 3. TCP 连接 预连接 4. 发送并响应请求 HTTP/2 5. 浏览器解析页面 服务端渲染 6. 加载资源并渲染页面 骨架屏 资源优化 资源预加载 7. 请求接口,获取数据并渲染 接口预加载 接口合并 知识点深入 1\. 前端性能监控指标 性能优化的前置条件是性能有测量标准并可以被监控。常用的性能监控指标有以下几块。 Navigation ...

 119 |  0 |  0 前端相关