- 博客(61)
- 收藏
- 关注
RSS订阅原创 记录一个简单的全局引入scss（函数、变量、混合器）文件的问题
SCSS 的变量、函数或者混合器等内容是在编译阶段被解析的，而不是在运行时。因此，如果你想要在样式文件中使用这些内容，就需要在编译阶段将这些内容注入到每个样式文件中
2024-04-09 10:54:26
411
原创 事件循环解析
根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。
2024-02-26 11:43:00
1100
原创 什么是 reflow、repaint、以及为什么 transform 的效率高？
reflow 的本质就是重新计算 layout 树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器在反复权衡下，最终决定获取属性立即 reflow。repaint 的本质就是重新根据分层信息计算了绘制指令。
2024-02-19 15:31:45
465
原创 浏览器是如何渲染页面的？
位置，会停止解析 HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续解析 HTML。位置，此时外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML 中的外部 CSS 文件和 外部的 JS 文件。第一步完成后，会得到 DOM 树和 CSSOM 树，浏览器的默认样式、内部样式、外部样式、行内样式均会包含在 CSSOM 树中。例如节点的宽高、相对包含块的位置。
2024-02-19 14:22:10
366
原创 如何用html css js 画出曲线 或者斜线；
将图片全部定位至中心点，然后x轴就变动translateX ，y轴同理；这里有两个问题浏览器： 以左上角为原点0，0 越往下y越大数学坐标系：以中心点为原点0，0 越往下y越小；曲线函数：坐标确定了原点确定了，就需要对应的曲线函数来描述这条线段我们一个个来解决此时我们已经完成了准备工作，接着完成反向排序的准备工作，dy越大则在html中排列就越小，超越原点即为负数；原点在与你想让它在那个位置，它都可以排列到那个位置，这里我想让它在容器内渲染，所以我想设置在容器内的中心位置，那么这个中心位置，其实就是
2023-11-18 14:11:47
2244
原创 Promise原理、以及Promise.race、Promise.all、Promise.resolve、Promise.reject实现；
Promise、.all、.race、.resolve、.reject 实现，以及模拟微任务
2023-11-12 22:37:54
744
原创 前端开发中如何进行多主题配置
可以根据预处理器的特性和功能选择适合项目的方法、比如less和sass中可以使用Mixin来定义不同主题的样式在不同的地方引用它们、选择器嵌套等方法；
2023-08-07 14:38:21
642
原创 HTML5 本地存储之IndexedDB封装及最详细教程
indexDB索引数据库，操作简便(目前主流浏览器正努力实现对index DB的支持)，最主要的是我们可以很轻松的通过JS极其方便的对其调用；现今多数业务需要离线访问、或将大量数据储存在客户端，减少从服务器获取数据，直接从本地获取数据。目前做的业务中需要将图片及其他数据存储在本地、在有网时将其发送给服务器；考虑到手机图片过大、localStorage存储大小限制为5M、所以对indexDB做一封装、以便往后不再需要研究其中api、直接copy文件、调用其中方法；；本以为会有能说清楚的博客、发现大家都
2022-03-31 18:28:45
4477
原创 webview嵌入umi开发的h5白屏
最近公司搞一个h5项目、又一个扫码的功能、要调用终端设备，因为对方的开发人员没在这边、所以让我来写一个rn的套壳app、跑一边流程；结果打包完、给我静态资源后、发现白屏；因为此项目也要能离线访问、所以需要将静态资源直接嵌入到webview中、所以让他们直接打包完之后，把文件发给我了;一开始白屏、我以为是我写的webview的问题做了一下工作；1、写了html嵌入进去没问题、2、写了node本地服务、把文件托管到静态服务上、嵌入对应地址，没问题；我想可能是h5有问题、于是我嵌入他们的本地开发地址、发
2022-03-31 14:30:00
679
原创 图片文件的离线缓存（base64存储、转File文件上传）
存储图片文件以localStorage为例、无法存储文件引用对象；即使我们存了，或者使用JSON.stringfy转化，在获取的时候，也只能获取到一个空对象；因为localStorage只能存储字符串、所以我们可以先把图片、转化为base64去存储；在需要使用的时候在转化base64为文件对象；其实存储图片这个需求、也不应该是通过localStorage去存储、因为对应浏览器都有相应大小的限制、只有5M左右；可以使用indexDB或其他存储手段转化图片为base64格式这里我做的业务时页面代码、
2022-03-30 18:45:08
2417
原创 前端上传文件 设置请求头multipart/form-data 上传失败
上传文件总体来说前端上传文件一共有两种方式；1、使用base64；正常加参数上传给后台、这种方式在手机端会很慢、因为在手机在转化文件为base64时很慢；2、使用FormData 上传 设置请求头multipart/form-datacontent-type 作用是告诉服务器，浏览器发来了什么数据；在做项目时，一般会和后台协商、使用1、application/x-www-form-urlencoded传输2、application/json 传输但在上传文件时需要修改content-type
2022-03-30 18:09:49
14732
原创 npm 私服使用
有时候由于公司代码无法由于对应业务、无法发布到npm公有仓库中，此时就可以使用nexus 搭建好私服后、将公用包发送的私服使用。1、添加私服源安装 nrm# 安装 nrmnpm i -g nrm添加 npm 私服源# 添加 npm 私服源 nrm add <自定义源名> <源的url>nrm add xxxx http://xxxxxxxxxx2、私服 npm 包发布步骤仅在发布私服 npm 包时需要登录，正常安装/使用私服 npm 包无需登录。切换
2022-02-18 18:03:05
3899
原创 npm link 的使用
本地开发 npm 依赖包，常常需要关联到项目中进行修改/调试，npm link 用来在本地项目和本地 npm 模块之间建立连接，可以在本地进行模块测试。具体用法：1. 项目和模块在同一个目录下，可以使用相对路径npm link ../module2. 项目和模块不在同一个目录下cd 到模块目录，npm link，进行全局 linkcd modulePathnpm linkcd 到项目目录，npm link 模块名(package.json 中的 name)cd projectPath
2022-02-18 17:51:52
3071
原创 公开作用域包
在 npm 上大家经常看到以 @ 开头的包，实际上这是一种 public scoped package，即公开的带有作用域的 npm 包。如果你想在 npm 上免费发布公开包供任何人使用，同时又想以自己用户名或者组织为作用域进行前缀约束，统一管理属于同一作用域的 npm 包，那么请往下看。tip: 免费的公开作用域包分为 以用户为作用域的 public user scoped package 和 以组织为作用域的 public organization scoped package 两种，推荐使用后者，
2022-02-18 17:42:09
712
原创 包管理工具究竟选谁
npm根红苗正，首选原因通过配置 淘宝源 和 包环境变量，已经解决了下载依赖包慢的问题6.0 以后已经有了固定的 lock 文件策略yarn网络性能和磁盘性能优秀，React 相关或依赖包特别多的项目可选择cnpm禁止使用 CNPMcnpm 起初是为了解决什么的已经不重要了，重要的是它下载的依赖文件存放不符合规范也不支持 lock 文件总结首选 npm，次选 yarn，禁用 cnpm...
2022-02-18 17:34:31
198
原创 Chrome 录屏
web 提供MediaRecorder 类来实现前端录屏功能。编码过程由浏览器实现，依赖浏览器的能力，因为该标准由 w3c 推进，目前主要的试验田在 chrome 和 firefox，移动端兼容安卓内置的 chrome 内核浏览器。使用的时候，先调用构造函数，传入MediaStream媒体流，实现摄像头屏幕录制MediaRecorder常用的方法//该事件可用于获取录制的媒体资源recorder.ondataavailable = (e) => { if (showDataAvailabl
2022-02-18 17:04:41
2076
原创 Emmet 快捷生成标签和 CSS
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具:你可以设置 CSS 形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容，也可以根据指定的语法糖来快速生成 html，下面我们来介绍这些语法规则。在线教程地址初始化HBuilder 默认配置好了 emmetVSCode 默认内置 emmet，如果用户自定义修改过配置文件关掉了 emmet 功能，使用时需要在 setting.json 中添加"emmet.triggerExpansionO
2022-02-18 16:38:17
256
原创 阿里云OSS，打开图片地址无法预览，返回的cors报错
问题：生产环境-某项目，在点击某图片链接时，弹出一个白板，图片不显示，无法预览错误提示：如图报错信息：Access to fetch at ‘https://bucket-fesco-settle.oss-cn-beijing.aliyuncs.com/fesco/settle/FESCO%E4%B8%A82020%E5%B9%B4%E5%BA%A6%E4%B8%AA%E4%BA%BA%E6%89%80%E5%BE%97%E7%A8%8E%E7%BB%BC%E5%90%88%E6%8
2022-02-18 16:29:43
2238
原创 前端字体最佳实践
前端的字体方案是一个优雅降级方案，即在代码中列出字体顺序让计算机匹配，先匹配到的字体就会成为当前显示字体。字体匹配顺序如下：语言顺序系统自带英文（包含阿拉伯数字）中文平台顺序iOS|MacOSAndroidWindows其他字体基础知识衬线字体与无衬线字体就 Web 常用的一些字体而言，其实大体上分为衬线字体和无衬线字体。衬线字体 – 关键字为 serif，意为有衬线的字体，衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰，而且笔画的粗细会有所不同，这些细节
2021-11-10 16:07:54
2318
原创 zsh 快捷操作
zsh 快捷操作Mac 快捷键，⌃ = Control, ⌥ = Option, ⌘ = Command, ⇧ = Shift⌃ + u：清空当前行⌃ + a：移动到行首⌃ + e：移动到行尾⌃ + f：向前移动⌃ + b：向后移动⌃ + p：上一条命令⌃ + n：下一条命令⌃ + r：搜索历史命令⌃ + y：召回最近用命令删除的文字⌃ + h：删除光标之前的字符⌃ + d：删除光标所指的字符⌃ + w：删除光标之前的单词⌃ + k：删除从光标到行尾的内容⌃ + t：交换光标
2021-11-10 16:04:16
1305
原创 Sentry 前端日志上报使用
Sentry 使用一.基本介绍Sentry 是一个开源的实时错误追踪系统，可以帮助开发者实时监控并修复异常问题。前端项目中上线代码都会经过编译、压缩等，当生产环境中出现异常时需要快速定位到具体报错的位置，快速修复，所以在上报异常时也需要将产生问题的 SourceMap 相关文件上传。在具体使用时可以把项目部署在 Sentry 官方提供的系统内，也可以根据公司自身情况自己搭建 Sentry 系统。当 Sentry 系统收集到错误信息时通过邮件等方式可以第一时间通知到开发人员。二.搭建方式通过
2021-11-10 15:59:17
4482
原创 lock 文件使用
lock 文件使用很多同学经常会遇到老项目自己跑的很好新来的同学跑不起来的问题。这都是项目未使用 lock 文件导致的 有些代码只能用固定的版本下使用的情况npm 6.0 以上的使用 package-lock.json.npmrc 配置项目根路径并设置好稳定源(如 taobao)npm install 命令会根据 nrm 或.npmrc 配置 生成（未生成 lock 文件时）或更改 package-lock.json 的包下载源地址npm install 命令只能由开发组长执行p
2021-11-05 14:33:33
1876
原创 利用jsonlint解决Long类型后台返回id 取值错误的问题
1、安装jison npm install jison -g 如不行使用: sudo npm install jison -g2.生成我们要的 jsonlint.js:(1): git clone git://github.com/zaach/jsonlint.git(2): 到jsonlint项目src下面 修改 jsonlint.y词法文件 原本对JSONNumber的定义是: JSONNumber : NUMBER
2021-10-13 16:29:21
831
原创 js 打印方案
前言打印功能的实现方式有很多种，在此将通过 print.js 来介绍打印功能的实现以及实现过程中遇到的一些问题一、仅打印图片npm 安装npm install print-js --savenpm 安装时将库导入项目import printJS from 'print-js'示例HTML<div ref="printMe" id="printMe"> <img class="print-file" slot="cover" alt="example
2021-08-20 17:41:38
772
原创 Javascript 数字处理
number-precision, decimal两个库都可以处理 js 精度计算的问题，decimal计算的精度更高用法import NP from 'number-precision'NP.strip(0.09999999999999998); // = 0.1NP.plus(0.1, 0.2); // = 0.3, not 0.30000000000000004NP.plus(2.3, 2.4); // = 4.7, not 4.6999
2021-07-30 11:26:05
1019
原创 Vue项目控制台报错：Uncaught (in promise) TypeError: hook.flushStoreModules is not a function
开发时安装了Google浏览器插件 Vue Performance Devtool，禁用或者删除就行。只保留 Vue.js devtools这个插件
2021-07-30 11:21:11
895
原创 hook封装示例
下面我们再来封装一个步骤条的 hook原代码import { Steps, Button, message } from 'antd';const { Step } = Steps;const steps = [ { title: 'First', content: 'First-content', }, { title: 'Second', content: 'Second-content', }, { title: 'Last',
2021-07-26 17:40:46
771
原创 react hook 详解及使用
1、hooks 是什么Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。2、为什么要使用 hooks难以理解的 class 、组件中必须去理解 javascript 与 this 的工作方式、需要绑定事件处理器、纯函数组件
2021-07-26 16:14:54
23949
1
原创 git大小写敏感与团队协作问题相关
Windows 上的 Git 默认是大小写不敏感的，这样多平台协作就可能会出现问题。## 首先查看 git 大小写敏感的命令```bashgit config --get core.ignorecase```先说一下 git 大小写不敏感吧，也就是 git config --get core.ignorecase 得到为 true 的情况下；例如我们现在本地有一个文件为 Test 文件夹```bashTest/|-MyComponent|---index.js```
2021-07-07 11:18:59
270
原创 javascript树型结构数据与平级结构数据互转
1、树型数据====>平级结构// 示例数据const treeData = [ { uuid: '1', label: '1', children: [ { uuid: '1-1', p_uuid: '1', label: '1-1' }, { uuid: '1-2', p_uuid: '1', label: '1-2' }, { uuid: '1-
2021-07-06 17:38:57
942
原创 AntDesign4 为何在 Modal 中调用 form 控制台会报错
为何在 Modal 中调用 form 控制台会报错？Warning: Instance created by useForm is not connect to any Form element. Forget to pass form prop?Modal 添加 forceRender, visible 之后再调用 setFieldValueimport React, { useState, useEffect } from 'react'import { Modal, Form } from
2021-06-29 16:44:41
282
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人