【前端收集知识点】
关注
分享
扫一扫
文章平均质量分 78
前端学习
barnett_y
成功道路并不拥挤，因为坚持的人不多。。。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
图片不压缩，前端要背锅
前端图片压缩转载 2023-01-10 20:40:06 · 1902 阅读 · 0 评论 -
Vue 中 iconfont 使用
Vue 中 iconfont 使用原创 2022-10-16 09:44:04 · 7999 阅读 · 0 评论 -
70+ 实用工具网站分享（建议收藏！）
实用工具网站分享转载 2022-10-02 18:58:55 · 803 阅读 · 0 评论 -
Vue移动端 / PC端适配解决方案：postcss-px-to-viewport
移动端web适配原创 2022-09-29 09:54:40 · 2681 阅读 · 2 评论 -
移动端布局之postcss-px-to-viewport
移动web布局转载 2022-09-29 09:49:41 · 15757 阅读 · 7 评论 -
前端代码规范和编码风格实践详解
文章开始之前首先思考一个问题：缩进的代码风格到底是 2 个空格还是 4 个空格是受谁控制的？VS Code 默认设置？还是 Prettier? 或者其他什么？转载 2022-07-23 09:34:41 · 1565 阅读 · 0 评论 -
HTTP请求头referer图片防盗链
referer的作用包含当前请求页面的来源页面的地址，即当前页面是通过此来源页面的链接进入的。举个例子：页面https://wangxiaokai.vip/posts/rel-canonical/中有一张图片juejin-seo-demo.png图片的请求头如下：服务器在接收到请求后，可以获知图片资源的请求的来源页面是https://wangxiaokai.vip/posts/rel-canonical/什么情况下，referer不会被发送来源页面采用的协议为表示本地文件的原创 2022-05-25 09:09:28 · 521 阅读 · 0 评论 -
前端图片canvas，file，blob，DataURL等格式转换
最近用到一些图片相关的操作，记录一下笔记。将file转化成base64场景： 获取到一个file类型的图片，如果直接在html中预览？这里就是利用html5的新特性，将图片转换为Base64的形式显示出来。有两种方法：方法一：利用URL.createObjectURL()<!DOCTYPE html><html><head> <title>base</title></head><body>&l.原创 2022-05-09 20:50:12 · 1557 阅读 · 0 评论 -
微前端qiankun从搭建到部署的实践
最近负责的新项目用到了qiankun，写篇文章分享下实战中遇到的一些问题和思考。示例代码： github.com/fengxianqi/…。在线demo：qiankun.fengxianqi.com/单独访问在线子应用：subapp/sub-vue subapp/sub-react为什么要用qiankun项目有个功能需求是需要内嵌公司内部的一个现有工具，该工具是独立部署的且是用React写的，而我们的项目主要技术选型是vue，因此需要考虑嵌入页面的方案。主要有两条路：iframe转载 2022-05-09 20:47:46 · 2081 阅读 · 0 评论 -
http缓存总结
HTTP的缓存机制 缓存机制无处不在，有客户端缓存（cookie、localstorage等），服务端缓存（session），代理服务器缓存等。在HTTP中具有缓存功能的是浏览器缓存。 HTTP缓存作为web性能优化的重要手段，对于从事web开发的朋友有重要的意义。思维导图如下：1、缓存的分类 缓存分为强制缓存和协商缓存。1、 强制缓存 当本地缓存中含有请求的数据且（及缓存时间还未过期）时，客户端直接从本地缓存中获取数据。当本地缓存没有所请求的数据时，客户端的才会从服务端获取数原创 2022-05-02 10:34:12 · 615 阅读 · 0 评论 -
axios 超时重试，异常重试
安装 axios-retry网络异常请求重试处理 断网 弱网 validateStatus 与 retryCondition 包含关系安装 axios-retrynpm install axios-retry复制代码const whiteRetry = new Set(['ECONNABORTED', undefined]);axiosRetry(instance, { retries: 2, // 重复请求次数 shouldResetTimeout: true原创 2022-05-01 16:43:53 · 1397 阅读 · 0 评论 -
2022，前端应该阅读这些文章
同学们都知道，前端圈变得越来越卷了，各种技术层出不穷，简直让人应接不暇。可能很多跟我一样，一时间，看到这个也想学，看到那个也想学，最终的结果是什么？那就是：啥都没学！所以笔者花费了几天时间，整理了一下前端必读文章，同时也可以当作是一份知识图谱，用来查漏补缺。本资料适宜人群：希望按部就班的、系统的学习前端知识的（初级->中级->高级）； 希望对自己的知识图谱进行查漏补缺的； 希望当作面试手册进行知识复盘的；本文主要是笔者查阅了很多资料并结合自己的理解，整理而成的，请大家积极..转载 2022-04-29 21:56:33 · 597 阅读 · 1 评论 -
实现浏览器多标签页通信
前言我们都知道浏览器是可以打开很多标签页的，如果每个标签页代表的是单独的一个网站，那么这些标签页之间肯定是不能通信的，如果能通信那估计我们都得凉凉。但是在很多情况下，浏览器中的很多标签页都属于某一个网站，而且这些标签页之间会使用一些相同的数据，这个时候我们就需要让这些标签页的数据都保持同步。比如很多博客网站，点击文章列表通常是打开一个新的标签页进入文章详情页，那么如果我们在文章详情页点赞、评论等操作，而文章列表页也使用了这些数据，这个时候我们需要保持两边的数据一致，衍生出来就是详情页改了数据，需要让原创 2022-04-21 08:45:56 · 5568 阅读 · 1 评论 -
前端跨页面通信
背景用户在实际的操作场景中会打开多个 Tab 页面A、B、C、D、E...。当用户在 E Tab 页退出登录，并且登录到新的账号，然后用户切换到非 E 的 Tab 时，发现登录信息没有刷新， 并且由于登录信息没有刷新，会出现操作异常。这个问题简单来说就是多个 Tab 信息没有同步。问题的关键在于一个 Tab 退出重新登录，需要通知到其他的 Tab 刷新到最新的信息。本质问题就是解决前端跨页面通信。本篇文章就是对前端跨页面通信的解决方案做了一个了解。onstorageWindowEventHa原创 2022-04-15 14:52:16 · 1752 阅读 · 0 评论 -
reset.css 重置样式表
css重置样式表个人整理工作中常用的css重置样式，和一些样式解决方法，并写上了注释, 大家还有什么好的重置样式，或者一些样式解决方案，欢迎留言讨论。html, body { height: 100%; /* 文字风格 Sans-serif 各笔画粗细相同，Serif 笔画粗细不同，monospace 等宽体，cursive草书，fantasy梦幻 */ font-family: "Microsoft YaHei", sans-serif, "Helvetica Neue", Helveti原创 2022-04-10 11:33:54 · 1364 阅读 · 0 评论 -
50 多个提高前端人效率的工具、网站和书籍整理
本文包含了在线编译，在线编辑、实用工具、可视化工具、各种前端电子书等50多个网站，快放到你的收藏夹吃灰吧如果你看到最后了，记得给我一个免费的赞哦在线编译（编辑）、playgroundJS 代码混淆www.jsfuck.com/嗯，优点是你可以用来给你的前端工程师好友搞恶作剧，缺点是只能用一次SCSS 转 CSS 在线编译www.sassmeister.com/有时候写一些比较复杂的 SCSS 逻辑时，遇到不生效的问题，可能需要看一下编译出来的 CSS 代码是什么样的，转载 2022-04-02 10:42:12 · 473 阅读 · 1 评论 -
Javascript常用API合集
常用API合集一、节点1.1 节点属性Node.nodeName //返回节点名称，只读Node.nodeType //返回节点类型的常数值，只读Node.nodeValue //返回Text或Comment节点的文本值，只读Node.textContent //返回当前节点和它的所有后代节点的文本内容，可读写Node.baseURI //返回当前网页的绝对路径Node.ownerDocument //返回当前节点所在的顶层文档对象，即documentNode转载 2022-04-01 20:32:42 · 4847 阅读 · 0 评论 -
前端常用60余种工具方法
1.邮箱export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}2.手机号码export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}3.电话号码export const isPhone = (s) => {转载 2022-04-01 20:27:29 · 373 阅读 · 0 评论 -
worker和sharedworker
1、介绍h5的新功能，主要作用，开辟新线程，充分利用计算机算力，防止“假死”（单线程，js引擎和UI线程互斥）worker：专属线程，只针对当前运行环境sharedWorker：共享线程，同源策略下，多个运行环境共用同一个线程，包括数据。2、worker使用1、查看文档阮一峰worker网络日子2、线程js文件self.addEventListener('message', function (event) { setTimeout(() =&.原创 2022-03-24 08:58:52 · 1483 阅读 · 0 评论 -
实现多个标签页之间通信的sharedworker
SharedWorker SharedWorker接口代表一种特定类型的 worker，可以从几个浏览上下文中访问，例如几个窗口、iframe 或其他 worker。它们实现一个不同于普通worker 的接口，具有不同的全局作用域, 首先在服务器上要有一个js，处理需要通信的数据。比如一个worker.jslet data = ''onconnect = function (e) { let port = e.ports[0] port.onmessage = fu...原创 2022-03-24 08:51:40 · 565 阅读 · 0 评论 -
多个tab页如何共享websocket
假设你正在做一个在线的IM系统，如何在多个tab页之间，共享一个websocket实例呢？当时遇到这个问题，第一感觉是懵逼。我的知识储备告诉我，多个tab页面之间，是不能共享websocket实例的。挠破头皮想到了两个方案 在用户打开多个tab页面时，新的页面中，不建立websocket连接。然后多tab页之间进行消息通讯。这个方案会带来这么几个问题 多tab之间如何通讯 怎么判断打开的是不是第一个需要建立连接的页面 如果关闭了第一个页面，那么之后的消息怎么处理 在两个页.原创 2022-03-24 08:47:00 · 6667 阅读 · 0 评论 -
使用cross-env添加环境变量
什么是process.env.NODE_ENVprocess.env.NODE_ENV应该是我们最熟悉的环境变量了，它经常出现在使用框架或者类库的时候，被用来区分不同的环境（开发，测试，生产等），以便我们进行相对应的项目配置，比如是否开启sourceMap，api地址切换等。那为什么process.env.NODE_ENV能用来区分环境呢？它是如何来的？先来看一下process和process.env的官方解释：processprocess 对象是一个 global （全局变量），提供有关信息原创 2022-03-06 09:13:15 · 8897 阅读 · 0 评论 -
前端低代码调研与总结
近些年来，低代码的概念逐渐流行了起来，而低代码产品也越来越多的出现在我们的身边。低代码可以叫做可视化搭建，或者叫效能工具等等。像国外的Mendix，国内的宜搭、苍穹、简道云、amis等等。基于这种新型的开发方式，图形化的拖拉拽配置界面，并兼容了自定义的组件、代码扩展，确实在B端后台管理类网站建设中很大程度上的提升了效率。低代码平台能够高效且便捷，成本又低。就应用领域来讲已经很广泛了，例如营销领域，各种页面生产工具，非冰，乐高，宜搭，鲁班。还有电商类的公司都会给商家提供一个类似店铺装修的工具，小程序生产工转载 2022-03-03 10:02:45 · 5530 阅读 · 1 评论 -
前端文件上传，这8种场景
在日常工作中，文件上传是一个很常见的功能。在项目开发过程中，我们通常都会使用一些成熟的上传组件来实现对应的功能。一般来说，成熟的上传组件不仅会提供漂亮 UI 或好的交互体验，而且还会提供多种不同的上传方式，以满足不同的场景需求。一般在我们工作中，主要会涉及到 8 种文件上传的场景，每一种场景背后都使用不同的技术，其中也有很多细节需要我们额外注意。今天阿宝哥就来带大家总结一下这 8 种场景，让大家能更好地理解成熟上传组件所提供的功能。阅读本文后，你将会了解以下的内容： 单文件上传：利用 inpu转载 2022-02-25 17:54:42 · 11883 阅读 · 0 评论 -
前端浏览器缓存验证
Web缓存是什么动机当浏览器加载一个页面时html引用的外部资源也会加载。但这些外部资源比如图片、css、js都不经常变化。如果每次都加在这些资源势必会带来资源的浪费。而且加载时间过长也会影响用户体验。HTTP缓存技术就是为了解决这个问题出现的。简单的讲HTTP缓存就是将静态资源存储在浏览器内部，下次请求相同资源时可以直接使用。当然何时使用何时不使用要有一些系列的策略保证如果资源一旦更新，缓存也要随之而更新。作用提高首屏加载速度 -> 优化用户体验 介绍流量消耗 减轻服务器原创 2022-02-25 14:53:14 · 1656 阅读 · 0 评论 -
移动端H5网页开发常见问题汇总
简介前面笔者已经介绍了 2022-移动端H5网页开发必备知识，这篇文章主要是总结下移动端开发常见问题，帮助大家一起避坑。HTML方面调用系统功能<!-- 拨打电话 --><a href="tel:10010">拨打电话给10010</a><!-- 发送短信 --><a href="sms:10010">发送短信给10010</a><!-- 发送邮件 --><a href="mailto:转载 2022-01-22 13:05:46 · 1190 阅读 · 0 评论 -
前端常用下载文件
前言自己整理的一些项目中遇到过的关于上传和下载的一些Demo，大前端系列（也就是纯前端 + node端完成的下载，只要获取到数据下载工作全是前端来做），仅供给位看官参考，避免踩坑，即插即用，欢迎fork和star????，为这个仓库添砖加瓦～(P.S. 个人认为如果没写过上传下载其实还是挺麻烦的，这个基本能覆盖大部分场景了～)纯前端下载基于a标签 location && iframe FileSaver ---> [推荐]node端下载先下载到本地，再下载到浏览器原创 2022-01-06 09:15:24 · 679 阅读 · 0 评论 -
chrome浏览器常用插件
chrome浏览器插件推荐分享一些我个人平时常用的浏览器插件，有些可以提高工作效率，有些能快捷实现一些想要的功能。 每个工具都有它自己的用处，就看是否符合你的开发习惯以及个人风格，适合自己的就是最好的。以下的插件下载链接全都来自谷歌官方应用商店，排名不分先后，大家可以自行下载！一、开发常用1、FeHelper(前端助手)JSON自动格式化、手动格式化，支持排序、解码、下载等数十种功能，更多功能可在配置页按需安装！插件下载地址FeHelper(前端助手)2、EditTh转载 2022-01-04 14:23:37 · 4092 阅读 · 3 评论 -
前端的万字高级进阶指南
???? 这是什么？笔者在学会 JS 以及框架的应用后，有一段时间不知道该如何深入下去，活能干，就是不知道该学啥。相信这个问题也会有很多读者朋友遇到。当然笔者目前已经突破了这个瓶颈，也成为了知名公司基础架构组的成员。因此想通过自己成长的经历及积累的资料整理出一系列的学习路线及资料推荐，帮助各位读者朋友解决这个问题。仓库内容笔者为主要贡献者，另外还拉了将近 20 位资深前端开发做内容共建及审核，多数人员任职一线大厂 P6、P7，第一版耗时数周，大家国庆假期也没停歇，内容绝对让各位看官满意。转载 2021-12-17 15:49:05 · 550 阅读 · 0 评论 -
前端图片下载功能
通过a标签download属性下载.container { display: flex;}figure { display: flex; flex-direction: column;}img { width: 200px;}复制代码<div class="container"> <figure> <figcaption>本地图片:</figcaption> <img src="images/g原创 2021-12-15 14:36:56 · 3888 阅读 · 0 评论 -
js之iframe子页面与父页面通信
一、同域下父子页面的通信父页面parent.html<html><head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.say(); myFrame.document原创 2021-12-09 13:59:28 · 1898 阅读 · 0 评论 -
yarn 与 npm
引言不论是前端、后端还是其他方向的开发人员，npm 和 yarn包管理工具在日常的开发中都必不可少，那我们常用的都有哪些命令呢？声明[package] === [package] | [package]@[version|tag]复制代码安装通用安装npm 通过 Node.js 官网，下载安装 Node 会自动安装 npm。 yarn 通过 npm 安装 yarn。 npm install -g yarn复制代码 提示⚠️：npm 中 install 可以简写原创 2021-12-09 11:40:37 · 385 阅读 · 0 评论 -
JS版剑指offer
介绍用JavaScript刷完了剑指offer，故总结下每道题的难度、解决关键点，详细题解代码可以点链接进去细看。关于JS刷题的技巧可以看我之前的这篇：JS刷题总结。剑指offer的题目在牛客网上可以看：剑指Offer_在线编程+题解_牛客题霸_牛客网所有题目的代码已经上传到了github上：FEInterviewBox/剑指offer at master · 14glwu/FEInterviewBox · GitHub目录题目=》难易程度=》关键词（1）二位数组的查找 .转载 2021-09-18 09:44:37 · 244 阅读 · 0 评论 -
混合开发H5 坑位指南
HTML方向调用系统功能使用<a>能快速调用移动设备的电话/短信/邮件三大通讯功能，使用<input>能快速调用移动设备的的图库/文件。这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端浏览器忽略。<!-- 拨打电话 --><a href="tel:10086">拨打电话给10086小姐姐</a><!-- 发送短信 --><a href="sms:10086">发送短信给10转载 2021-11-27 09:47:42 · 346 阅读 · 0 评论 -
使用Chrome扩展程序生成网页骨架屏
对于依赖接口渲染的页面，在拿到数据之前页面往往是空白的，为了提示用户当前正在加载中，往往会使用进度条、loading图标或骨架屏的方式。对于前两种方案而言，实现比较简单；本文主要研究骨架屏的应用及实现，并给出一种使用Chrome扩展工具快速生成骨架屏的方案。<!--more-->首先看看效果掘金首页百度首页知乎首页安装插件后访问任意网页，基本上均可以一键生成骨架屏（由于时间关系，部分节点并没有完全实现，不过目前展示Demo应该是够了本文所有代码均放在g..转载 2021-11-13 19:04:30 · 485 阅读 · 0 评论 -
JSBridge通信原理
JSBridge是个啥直接来重点，记住：JSBridge 是一个很简单的东西，更多的是一种形式、一种思想，为了解决 H5 和 Native 的双向通信。就像我们刚接触 ajax 时，也很懵逼。其实，他们俩个差不多，ajax 是浏览器和服务器通信的规范（暂且叫规范，像 CMD 规范一样，SeaJS 是它的一种实现方式）， JSBridge 是 H5 和 Native 通信的规范。axios 是 ajax 通信的一种实现方式，WebViewJavascriptBridge(下文要...原创 2021-11-13 11:12:15 · 1138 阅读 · 0 评论 -
Eslint语法规范
eslint语法规范官方文档：https://eslint.org"no-alert": 0,//禁止使用alert confirm prompt"no-array-constructor": 2,//禁止使用数组构造器"no-bitwise": 0,//禁止使用按位运算符"no-caller": 1,//禁止使用arguments.caller或arguments.callee"no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名"no-class-a原创 2021-11-12 09:39:00 · 775 阅读 · 0 评论 -
chrome 调试移动端H5
在google浏览器，输入：chrome://inspect/#devices, 点击inspect，就会进入如下：就能控制app的网页。原创 2021-10-25 11:44:31 · 885 阅读 · 0 评论 -
一行命令更新所有 npm 依赖包
npm 包的更新速度很快，为了将项目或者全局依赖更新到最新版本。传统的做法是一个一个更新，比如更新 react 到最新版本，命令如下：# npmnpm i --save react@latest# yarnyarn add react@latest复制代码yarn 是 facebook 发明的新一代 js 包管理器，支持离线使用。这是 npm 与 yarn 的 命令对照。但是，这种做法相当耗时。有没有更简单的方法呢？ 答案是使用 npm-check 或者 yarn。两者都需要全局安装。原创 2021-09-27 09:28:10 · 1966 阅读 · 0 评论 -
前端数据可视化入门
这是一篇给大家提供数据可视化开发的入门指南，介绍了可视化要解决的问题和可以直接使用的工具，我将从下面几个方面给大家介绍，同时以阿里/蚂蚁的可视化团队和资源举例说明： 什么是数据可视化？ 怎样进行数据可视化？ 数据可视化的场景和工具 数据可视化过程中常见的问题 什么是数据可视化数据可视化研究的是，如何将数据转化成为交互的图形或图像等，以视觉可以感受的方式表达，增强人的认知能力，达到发现、解释、分析、探索、决策和学习的目的。“数据可视化（Data V转载 2021-09-09 10:16:24 · 6928 阅读 · 0 评论