前端知识图谱
文章平均质量分 77
前端知识图谱
乐闻x
一个不安分的前端,还搞过两年后端开发
展开
-
Vite支持的React项目使用SASS指南
在现代前端开发中,SASS是一种广受欢迎的CSS扩展语言,它提供了许多实用功能,如变量、嵌套、部分和混合等。本教程将指导您在一个使用Vite作为构建工具的React项目中如何配置和使用SASS。原创 2024-06-15 23:12:03 · 551 阅读 · 0 评论 -
【前端开发效率提升篇】Chrome DevTools 使用技巧汇总
Chrome DevTools 是前端开发者的强大工具,提供了一系列功能帮助我们分析和调试网页。然而,很多开发者没有充分利用这些工具,本文将详细介绍一些实用的 Chrome DevTools 技巧,帮助你提升开发效率。可以通过 DevTools 自身的设置来自定义界面,例如改变主题、调整面板位置等。插件系统也允许添加额外的功能,如 React Developer Tools 或 Vue.js devtools。原创 2024-06-08 23:20:01 · 1156 阅读 · 0 评论 -
前端如何保证设置的font-family成功生效?
作为前端开发者,我们知道如果设置的字体不生效,浏览器是会使用操作系统的兜底字体的,那么我们该怎么确认设置的字体是真正生效了呢?我核实了一下,当前DOM的字体确实没有生效,可以通过Rendered Fonts下面的。最近开发的一个新页面,在产品验收的时候跟我反馈说页面里的字体跟设计稿中的字体不一样;属性,于是我通过Chorme浏览器的调试工具查看了一下DOM的生效样式;可以看出来我们修改后的字体确实是生效了,于是完美解决一个BUG.看出来当前生效的字体是系统兜底的字体;通过代码的排查,发现是我自己把。原创 2023-01-10 23:32:26 · 2161 阅读 · 0 评论 -
前端提效神器:使用NRM切换和管理众多的NPM registry 源
nrm是一个极为方便的工具,能够帮助开发者轻松切换npm源,以应对不同的需要或是解决各式各样的问题,无论你何时需要,都可以轻松切换过去,这无疑能进一步提高你的开发效率。原创 2023-12-24 18:58:11 · 1223 阅读 · 0 评论 -
使用 Verdaccio 构建自己的私有 npm 仓库
无论你是公司的开发者,还是个人开发者,你可能都听说过或者使用过 npm,这是一个使用广泛的 JavaScript 包管理器。但是,你是否遇到过以下的问题:你需要一个私有的包存放地方,或者你需要在离线环境下使用包,或者你有一些需要测试的包不能上传到公共npm上。这时,你就可以选择 使用 Verdaccio 搭建一个自己私人的 npm 仓库。快速的安装时间,离线访问,访问控制,以及测试发布,都让 Verdaccio 成为一个强大的工具,能够满足开发团队和个人开发者对于 npm 包的要求。原创 2023-12-24 13:18:19 · 1364 阅读 · 0 评论 -
理论篇:什么是NPM以及为什么NPM如此重要
当我们开始软件项目开发时,总会需要一些通用的与业务无关的工具方法,比如时间处理工具、接口请求工具等等,这些工具方法是完全可以提供给所有开发者使用的。于是,有人将这些工具函数、或者资源等文件,按照符合开发语言的规范组装成一个完成的资源包,其他开发者通过某些途径拿到资源包,并且根本不需要关心资源包里面的工具函数是怎么实现的,只需要通过对应语言的资源引入指令引入资源包,并且调用其工具函数即可。在JavaScript相关项目的开发中,package是由package.json文件和一堆其他的源码文件组件。原创 2023-12-21 22:01:12 · 1933 阅读 · 0 评论 -
TypeScript 中的 interface 和 type 有什么区别?应该如何选择?
更概括一点,它除了可以用于描述对象的形状,还可以用于其他种类的类型设置,例如原始类型(primitive),联合类型(union),交叉类型(intersection),元组等。都可以满足需求,然而如果需要进行 OOP (Object Oriented Programming) 的实践,如类的定义与继承,则。都是声明自定义类型的方式,但它们有一些区别,适用于不同的使用场景。在大部分情况下,如果仅仅是为了类型检查,主要用于描述对象的形状或者类的结构,这是它最经常的应用场景。接口,它有两个属性,名字和年龄。原创 2023-12-20 23:32:20 · 546 阅读 · 0 评论 -
iframe 与主应用页面之间如何互相通信传递数据
当我们的Web页面需要复用现有网站的页面时,我们通常会考虑代码层面的抽离引用,但是对于一些过于复杂的页面,通过 iframe 嵌套现有的网站页面也是一种不错的方式,。目前我就职的项目组就有多个业务利用 iframe 完成业务的复用。虽然对于用户而言,看到的页面其实是一个整体,但是本质上是两个甚至多个页面的组装,那么页面跟页面之间的交互就避免不了相互通信。原创 2023-12-12 21:30:00 · 614 阅读 · 0 评论 -
基于React实现:弹窗组件与Promise的有机结合
日常开发工作中总有一些能够优化的步骤和流程,我们能够多思考一下,转变思路,就能够让我们的代码更加赏心悦目。原创 2023-09-05 12:13:25 · 836 阅读 · 0 评论 -
【Rollup】自定义组件 - 文章渲染组件
【Rollup】打包文章渲染组件前言利用 Rollup 构建一个文章展示抽屉SDK,用来记录前端自定义SDK的过程工程实践初始化创建项目mkdir packageName npm init -yTypescript功能初始化npm install typescript -Dnpx tsc -init创建 rollup.config.jsimport typescript from 'rollup-plugin-typescript2';import less fr原创 2021-12-12 23:12:46 · 875 阅读 · 0 评论 -
【前端样式】当 BEM 遇见 CSS Module
前言对于前端开发者来说,css相关问题是无论如何也绕不过去的。因为样式代码是就近生效原则,即同样的选择器定义的样式,后定义的样式代码会覆盖前面定义的样式代码。class 做为 css 中最常用的选择器,刚入门的前端开发者会很纠结,到底怎么定义class名称,才能保证名称不重复,与此同时最好 class 名称还要有一定的意义,我们通过 class 名称能够很快定位到功能模块。我记得我刚刚入门前端时,经常定义一些比较单一的 class 名称,比如 header, body, content等等。又或者我去原创 2022-05-10 23:14:12 · 364 阅读 · 0 评论 -
图片文字水平垂直居中(display:flex)
需要实现效果html <div style="display:flex;display:flex;align-items:center;" > <div><img th:src="@{/images/man.jpg}" class="img-circle"></div> <div>原创 2018-05-25 00:06:24 · 4353 阅读 · 0 评论 -
「自己动手丰衣足食」搭建React脚手架
很多朋友学习React都是从Facebook官方提供create-react-app脚手架开始的,脚手架开箱即用固然爽,可是如果想更进一步学习React,甚至更进一步学习流行的SPA应用,我们还是很有必要追根溯源。接下来我会记录我是如何从零一步步搭建一个react脚手架。一、梦开始的地方初始化空项目npm init -ywebpack yarn add webpack w...原创 2020-04-09 22:40:24 · 617 阅读 · 0 评论 -
React进阶教程之Refs详解——通俗易懂,Class组件&Function组件(受控组件与非受控组件)
React进阶教程之Refs详解——通俗易懂,Class组件&Function组件(受控组件与非受控组件),现在有一个表单,页面加载完成时第一个input框自动获取焦点,不需要人为选中,应该怎么实现?React提供了Refs帮助开发者可以直接操作DOM节点,就像jquery时代一样,直接操作DOM,简单明了。原创 2020-11-11 11:44:04 · 1189 阅读 · 0 评论 -
React富文本——markdown编辑器
https://github.com/kkfor/for-editorhttp://react-china.org/t/react/27050原创 2019-07-13 22:31:40 · 2244 阅读 · 5 评论 -
一篇搞定React状态管理Redux&React-redux使用详解(保姆级教程!!!)
工作流程:首先我们需要创建一个仓库store,仓库里面可以存放组件们需要的数据state。store仓库创建需要招聘处理外部动作信号的仓库管理员reducer。reducer 管理员由 store 直接管理,reducer 管理员通过action 动作传递的信号的type来做相应的提前预定好的动作来管理store中的数据。action 信号由数据用户view component 来触发,通过store 提供的联系方式 store.dispatch() 来发送action。原创 2020-03-25 13:15:42 · 889 阅读 · 0 评论 -
bindActionCreators & combineReducers 使用记录
阅读 redux 源码的时候,发现 redux 给我们提供了一系列方法。createStore ( redux 创建 store; 必备 )applyMiddleware ( redux 注入中间件 )compose ( redux 组合多个中间件)下面这两个方法是干啥用的呢?bindActionCreatorscombineReducers一、bindActionCreators1. 定义 action 文件一个文件定义多个 action 方法,一般跟某一个业务相关的 .原创 2020-12-02 18:16:07 · 1543 阅读 · 6 评论 -
一篇文章搞定滚动加载、图片懒加载原理并代码实现
「前言」列表滚动加载、图片懒加载,这些都是目前流行的技术方案。本文从原理到代码实现,完整记录整个思考过程。「知识准备」可视区clientWidth、clientHeight 网页可视区宽高offsetWidth、offsetHeight 网页可视区宽高(包括边线的宽)实际内容scrollWidth、scrollHeight 网页正文全文宽高滚动条距离scrollTop、scrollLeftDOM 距离屏幕screenTop、screenLeft.原创 2020-12-10 23:48:53 · 421 阅读 · 2 评论 -
React 所见即所得编辑器 Vditor
前言在网页上嵌入一个 Typora 编辑器是不是很酷的一件事?Markdown是程序员写文档最喜欢的语法,但是直接写Markdown并不够直观,所以出现了「所见即所得」的Markdown编辑器,Typora就是拔尖的产品。我的博客写作过程是先在 Typora上写好,然后复制Markdown到博客编辑上进行保存发布。开始使用Markdown编辑器是 for-editor,我之前写过for-editor富文本组件的使用方法 React富文本——markdown编辑器但是这个过程太麻烦了,如果有一个富文本原创 2021-12-12 16:03:06 · 2224 阅读 · 0 评论 -
React集成Nprogress顶部进度条(效果图 + 代码实现)
「效果」「React 代码」如果仅仅是想在项目中使用 nprogress顶部进度条,那么直接拷贝下面的代码就完事了安装依赖包npm install nprogress npm install hoist-non-react-statics创建 withProgress.jsx 高阶组件import React, { Component } from "react";import hoistNonReactStatic from "hoist-non-react-statics原创 2020-11-17 11:56:53 · 2114 阅读 · 0 评论 -
React动态效果——animate.css
1.React引入Animate.cssanimate官网animate官网查看需要的动效react项目引入animate.cssnpm i animate.cssnpm i react-addons-css-transition-group封装react动效木偶组件import React from 'react'import "animate.css";i...原创 2019-07-09 21:08:16 · 5163 阅读 · 0 评论 -
redux-actions详解教程记录( redux使用更简单???)
前言 Redux 的诟病是重复的模块代码太多,各路大佬都开始尝试解决这些问题,Redux-actions 悄然而生。刚开始使用 Redux-actions 时遇到一些问题,那么专门写一篇博客全面详细的记录 Redux-actions 的使用。安装npm install redux-actions DEMO项目结构 入口// index.jsximport React from 'react';import React..原创 2020-12-03 13:47:57 · 1857 阅读 · 0 评论 -
Reac保姆级通俗易懂教程汇总(超详细版!!!)
React 新手级基础知识,React 状态管理总结,React 开发编译部署,从Webpack入门前端开发架构以及 React项目实战经验保姆级教程!!!原创 2019-07-10 23:28:27 · 447 阅读 · 0 评论 -
react-router 快速上手教程(源码分析以及实现原理~~~)
浏览器的 URL 内容是一个很好的记录页面状态的信息。SPA 形式之前,不同的 URL 都会向服务器发送请求,然后服务器返回一个完整的 HTML 页面。 SPA 形式下,URL 路由的变化只会在 浏览器端处理,所以组装页面的任务就交给了浏览器。此时 **react-router** 出现了,通过使用 **react-router** 以及阅读 **react-router** 源码,发现 **react-router** 不过就是基于 URL 内容变化的「**智能拼图工具**」。原创 2019-07-08 22:19:28 · 300 阅读 · 0 评论 -
React路由传参方法汇总记录
React中传参方式有很多,通过路由传参的方式也是必不可少的一种。本文记录项目中会用到的路由传参方式: 路由跳转传参API + 目标路由获取参数的方式。一、动态路由跳转方法Link <Link to={{ pathname: "/user/add/1" }}>跳转新增页面</Link>history.push this.props.history.push("/user/add/1");获参方法this.props.match.params二、路.原创 2020-11-27 17:47:55 · 1457 阅读 · 3 评论 -
一篇搞定React生命周期以及执行顺序 v16.8+(前端面试整理)
一篇搞定React生命周期以及执行顺序 v16.8+(前端面试整理);render运行过程1. constructor 初始化整个组件的state 以及调用super(props)2. componentWillMount 发生在render之前触发,既可以在客户端触发也可以在服务端触发。SSR的时候,无法触发组件的componentDidMount时,需要在该生命周期中调用服务。原创 2020-02-29 20:53:33 · 2526 阅读 · 0 评论 -
【Typescript】paths alias别名设置
前言Typescript 不仅方便前端在开发阶段就能发现很多问题,同时也能给开发者很多提示。比如我们 Import 其他ESModule时,如果路径不对就会给出提示。只有正确引用路径,Typescript才不会提示报错。但是使用这种相对路径引用方式,会出现层级过深的情况如果使用统一前缀引入,可以避免上述问题【最终效果】 【项目目录结构】原理我们使用设置别名的方式解决上述问题,两个地方要同时修改,tsconfig使vscode显示不报错,webpack.js使打包编译不报错修改ts原创 2021-12-12 18:05:37 · 2472 阅读 · 0 评论 -
「前端面试题」(a ==1 && a== 2 && a==3) 有可能是 true 吗?
前言原题:(a 1 && a 2 && a==3) 有可能是 true 吗?这是一道有意思的面试题。盲猜很多小伙伴看到这道面试题时肯定是一头雾水,a难道还能同时等于多个值?但是既然这道题能出现,说明肯定是想考察点什么知识。「理论分析」== 会将左右两边的值转化成相同的原始类型,然后再去比较他们是否相等。看到这句话肯定有很多朋友恍然大悟。a == 1 不一定 a 就是数字类型1,而是 a 可能是个对象,然后在 == 相等操作时,会隐式调用某些方法,这些方法返回 ..原创 2020-11-03 16:41:29 · 873 阅读 · 1 评论 -
在线图片视频资源转存
怎么将网上心仪的图片、视频保存到自己的资源空间?给你一个资源链接,你需要几步将这个资源转存到git上?一般人的做法可能就是先将资源下载到本地,然后再本地上传到对应的资源空间?如果操作一个资源转存,这样还不算麻烦,但是如果一次性要转存上百个资源,那就太痛苦。原创 2022-04-24 22:31:07 · 899 阅读 · 0 评论 -
Axios封装多种方式实现以及高级用法详解(文件上传,请求重试,取消请求等)
本文介绍axios的特点,简单的操作,可配置属性,统一的封装(适合大型项目)以及一些高级操作,比如取消请求,请求重试,上传文件,xsrf攻击防御。原创 2019-07-08 22:05:45 · 2128 阅读 · 0 评论 -
ajax图片上传功能实现(点击,拖拽,粘贴)Koa服务端
学习最好的方式就是实践原创 2020-03-21 17:35:32 · 403 阅读 · 0 评论 -
侧滑菜单栏 和 底部抽屉菜单栏( JavaScript 和 React 实现 )
动态滑动的导航栏效果图展示web端移动端工作原理页面初始状态这里浏览器显示html元素的问题,用户看到的页面是是左边的可视区域,并看不到右边的菜单部分。菜单激活状态当菜单被激活显示的,其实就是整个页面内容整体向左边移动了菜单的宽度。这时候用户看到的就是菜单出现,主页被挤到左侧。代码实现html<body> <a...原创 2020-03-14 17:23:02 · 2598 阅读 · 0 评论 -
使用layui中onchange失效以及form动态渲染失效问题
最近在使用layui框架做城市的三级级联的时候,发现jquery中的onchange事件方法在layui框架中失效了。然后浏览layui社区,了解到layui监控一个控件变化有自己的方法。html<select lay-filter="test"></select>jsvar form = layui.form();form.on('select(test)', func...原创 2018-05-23 08:20:44 · 11365 阅读 · 0 评论 -
七牛云上传静态资源
七牛云七牛云提供了免费的CDN存储空间。我们可以利用七牛云提供的功能,自定义我们自己的图床,自定义我们应用的静态资源服务器等等。上传静态资源分两种方式:1.前端上传 2. 服务器上传接下来我将参考七牛云官网SDK文档,分别实现两种上传方式。准备工作: 先注册一个七牛帐号(注册地址),并登录控制台获取一对有效的 AccessKey 和 SecretKey(获取地址)。一、前端上传JavaScript-Sdk文档引用npm install qiniu-jsimport * as qin原创 2020-07-12 22:23:10 · 830 阅读 · 0 评论 -
手写弹窗组件 (JavaScript 和 React 实现)
弹窗组件弹窗组件是web项目中最常见最基础的组件,最近面试的过程中,很多应试人员都是工作中都是调用现有的UI组件库,当进一步问如何自己封装一个弹窗组件时,很多人就语塞了。所以我今天希望能从原理层面介绍并实现一个弹窗组件,并且最后封装成一个React弹窗组件,以供复用。效果展示原理介绍 web弹窗的实现方式很多,这里介绍最简单的一种方式。弹框其实就是在主页面上显示出一层内容,我们可以通...原创 2020-03-18 14:07:39 · 1655 阅读 · 7 评论