- 博客(922)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 CSS-界面滚动时不显示滚动条
最近产品提出一个需求，在界面滚动时，元素右侧不显示滚动条。查了网上的答案，最后总结了一下几个情况。1、设置常规的滚动条：使用 overflow:auto。父元素需要设置一个高度，设置相对定位，这样子元素的高度大于父元素高度才能显示滚动条。如果父元素的高度完全由子元素撑开，界面上不会出现滚动条。设置overflow：auto 失效的主要问题：可能是这个div没有设置 100% 然后父元素清除浮动......
2019-03-17 17:43:47
66138
7
原创 React中loading界面处理
前几周，boss给出一个任务：在网站页面加载前设置一个loading界面。设置loading界面，如果用户网络状况一般，或者用户执行请求操作频繁，可以让用户减少等待时间，有利于提升用户体验。那么具体怎样实现loading界面呢？查询资料进行实践，得出下面几个方案：方案一：在react框架中，根据组件的生命周期，在componentdidmount进行判断。在render中进行判断：当用...
2018-08-19 13:04:18
26047
1
原创 Cannot read property innerHTML of null 报错信息
Cannot read property 'innerHTML' of null ——这个报错的字面含义是：不能读取空的内部HTML。这个报错是一个初学者的问题。实际上，在页面的HTML结构中，innerHTML是有实际的值并可以在console进行获取查询到。问题：script中关于DOM部分放在和body标签前。根据浏览器的渲染原理，HTML代码从上到下执行代码，当浏览器JS解析器...
2018-07-20 09:29:19
24373
4
原创 最全面计算机英语单词列表（一）
作为一名开发者，不管是自己写代码还是阅读英文文档，英语水平对于开发进度有很大的影响。业余时间简单整理了计算机开发中常见的英语单词（不限于前端开发），再此和朋友们分享。单词较多，为了阅读体验良好分成几个部分。1.file，n.文件；v.保存文件[faɪl]2.command，n.命令，指令[kəˈmænd]3.use，v.使用，用途[jus]4.program，n.程序[ˈproʊgræm]5.li...
2018-07-15 07:46:01
54137
30
原创 Web前端开发标准规范总结
Web前端作为开发团队中不可或缺的一部分，需要按照相关规定进行合理编写（一部分不良习惯可能给自己和他人造成不必要的麻烦）。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。备注：实际开发请以本公司的规范为标准。A.基本原则符合web标准（UTF-8，HTML5），语义化html（HTML5新增要求，减少div和span等无特定语义的标签使用），结构表现行为...
2018-07-15 07:32:40
34769
原创 Tesseract 前端实现 OCR 功能
Tesseract 是由 Google 维护的一款强大的开源光学字符识别（OCR）工具：它可以从图像中提取文本，并支持超过 100 种语言。有时，默认提供的字库可能不足以满足特定应用场景下的需求。这时就需要自行训练新的字库。Tesseract 是一款强大且易于使用的 OCR 工具，无论是通过命令行还是编程接口都可以高效完成从图像到文本的转换任务。此外，它的灵活性还体现在可以根据具体需求定制字库，从而更好地服务于各类复杂的应用场景。
2025-02-08 17:37:47
780
原创 前端常用第三方库整理-笔记
2025-2-8原始笔记链接：https://cloud.seatable.cn/dtable/external-links/59b453a8639945478de2/
2025-02-08 16:59:01
706
原创 计算机-产品经理笔记
2025-2-8 更新 原始笔记链接：https://cloud.seatable.cn/dtable/external-links/59b453a8639945478de2/
2025-02-08 16:57:42
736
原创 使用 codeium AI 把 reactstrap 重构成 ant-design v5 步骤
如果使用 Form 组件的其他特性，如表单验证、提交等，可以使用 Ant Design 的其他 Form 组件，如。Table 组件取代比较复杂，需要测试 data 是否正确。属性控制显示和隐藏，而不是 Reactstrap 中的。属性控制按钮的样式，而不是 Reactstrap 中的。注意：Ant Design 的 Button 组件使用。Ant Design 的 Modal 组件使用。我们先对比替代前后的组件属性，状态，参数变化。实际操作，可以使用辅助技术实现自动替换。
2024-12-12 16:22:26
423
原创 JS 中数组查找 findIndex 和 indexOf 的差别
indexOf 适用于简单的值查找，使用严格相等进行比较。findIndex 适用于复杂的查找逻辑，使用回调函数进行比较。简单的查找（无重复的字符串和数字），选择 indexOf。复杂的查找（数组嵌套对象或者数组），选择 findIndex。
2024-12-03 17:41:47
283
翻译 codeium 教程（中文）
原文官方中文教程 Codeium · Free AI Code Completion & ChatCodeium offers best in class AI code completion, search, and chat — all for free. It supports over 70+ languages and integrates with your favorite IDEs, with lightning fast speeds a
2024-11-26 10:41:51
1961
原创 Codeium AI 工具在前端的应用和未来
AIGC 未来可能自动生成很好看使用的APP，就类似 AIGC 自动生成照片、视频、文字，未来可能直接提示“请生成一个购物网站，拥有商品列表，购物车，用户管理，库存管理，进货管理等功能，主题色可以自定义”，然后 AIGC 就生成一个 APP 了，就对传统程序员行业产生深远的影响了。如果需要写一个基于不同排序字段的复核排序函数（按照姓名升序，按照性别排序，按照年龄排序，需要对结果进行分组渲染，那么需要一步步去引导 AI 工具实现，此时的效果可能不如程序员直接思考）Codeium 可以快捷处理重复性的工作。
2024-11-26 10:08:02
493
原创 电子邮件常用协议对比
电子邮件：发件人把邮件从本地发到邮件服务器，发件人的邮件服务器根据收件地址，转发到收件人的邮件服务器。收件人方便时，访问邮件服务器，获取收到的电子邮件。不仅可以传递文本，还支持多媒体。传输方式：客户端/服务器方式用户代理：用户与电子邮件系统的接口（客户端软件）邮件服务器：ISP都有邮件服务器，负责发送和接收邮件，同时负责维护用户的邮箱协议：使用 SMTP 发送邮件，使用 POP3 接收邮件SMTP 基本原理：A邮件服务器周期性对邮件缓存扫描，如果有新的邮件就开始发送。SMTP 有 14条命令，应答模式
2024-10-24 11:06:56
645
1
原创 2024年 React 框架高频面试题
2024年 React 框架高频面试题。在HOC高阶函数中转发REF：包裹组件不能直接使用子组件的REF，所以需要使用 forwardRef 来转发一下，把内部的REF转发到包裹层外部的组件。Context 可能会重复渲染：当Provider父组件进行重重复渲染时，可能在consumerszizujian 中重复渲染-传参如果是对象，那么每次对象更新都会重复渲染子组件。或者给某个类组件设置REF。
2024-10-22 17:51:22
1274
原创 Redis 什么时候取代 mysql 做缓存？
经典的数据库有 mysql 等，为什么还需要 redis 这个数据库呢？下面从前端程序员的角度，分析一下为什么使用 redis 数据库。
2024-10-18 17:06:13
1038
1
原创 React 核心概念和基本使用
React 入门课程第一天 理论和配置虚拟DOM和DIFF算法React 的核心是虚拟DOM和DIFF算法。DIFF 算法确保虚拟DOM高效运行(从上到下分别是 tree-diff、componentDiff elementDiff)。如果虚拟树前后对比相同，那么保留这个节点；如果不同，那么使用...
2024-10-18 17:01:15
1109
原创 diff 算法实现的几种方法和前端中的应用
diff 算法就是比较两个数据的差异，例如字符串的差异，对象的差异。常用于版本管理（git）例如下面的实际案例。github 上某个 commit，旧代码和新代码之间的不同 diff 展示如下。绿色部分表示添加，红色部分表示删除。这里表示整行的删除和增加。这里就表示删除了两个空行。上面的案例都是整行更新。还有一些行内的变化，例如某一行中（一个字符串）的某一些字符做了删除和增加。这就需要用到 diff 算法求两个字符串的差异。
2024-10-15 10:37:45
1411
原创 diff 算法在 React 项目中的应用
经常看到面试题目中介绍， React 框架的核心优势就是 虚拟DOM 和 diff 算法确保高效率渲染，那么 React 中具体 diff 是怎么实现的呢？具体深入的 diff 算法，很多论文博客都有介绍。现在也有很多博客会《深入阅读React源码学习框架等》。我觉得从框架使用者的角度，不需要深入研究到这么深。可以用简单的图示和文字，把深入的知识说明白，才是学习的目的。下面结合资料，按照我的理解，简单谈谈 diff 算法的具体逻辑。
2024-10-15 10:07:13
372
原创 前端常用书籍推荐
下面的书籍是我从网上找的经典书籍，有一部分读过，推荐给大家。读书前，建议先去看一下书籍简介，看版本是否最新（知识是否被淘汰，例如 jquery 早期版本），如果是自己需要的部分可以深入学习，如果不是的话直接跳过，不要浪费时间。
2024-10-11 15:25:31
962
1
原创 前端开发英语单词整理
在日常开发和学习中，遇到很多生词，我使用某个笔记软件进行记录，之后用爬虫整理到这个单文件中。英语是开发人员的软实力，需要平常的日积月累才能提高。
2024-10-11 15:22:19
1268
原创 前端 mp4 视频改成 m3u8 流模式
1、mp4 视频通常对应一个文件，播放时需要加载全部文件，消耗网络资源。如果用户从中间某个时间访问，也会从头开始下载，浪费服务器性能。2、mp4 视频文件容易被用户下载到本地。有些版权方不希望普通用户下载到本地。
2024-06-17 18:04:08
3833
原创 Starting the development server 报错和解决
最近某个项目开发环境升级后，运行 npm start 后无法启动项目，终端始终显示 Starting the development server…，浏览器 localhost: 3000 界面显示空白。错误截图。
2024-04-12 20:13:17
3185
原创 Accessibility 无障碍支持
Web 无障碍涉及确保内容保持无障碍，无论访问 web 的人员或方式。任何用户都可以使用其所有的功能和内容，特别是有身体或精神障碍的用户。键盘鼠标和触摸屏用户，以及用户访问网络的任何其他方式，包括屏幕阅读器，都能够访问网站。无论人们的听觉、视觉、身体或认知能力如何，应用程序都应该是可以理解和使用的。网站也不应该造成伤害：像动画这样的 web 特性会导致偏头痛或癫痫发作。国外网站中基本支持无障碍，我测试 MDN github airtable 等网站都支持比较好。
2024-03-06 14:03:23
1599
2
原创 前端网页设计颜色使用原则
在视觉展现上能够用尽量少的样式去实现设计目的，避免毫无意义的使用大量颜色强调视觉重点或对比关系。少即是多： 在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。例如 bootstrap 官方案例，配色简单明确，重点突出。
2024-03-06 13:48:11
1190
原创 一次前端优化网络请求次数案例
最近线上遇到一个实际问题，当用户点击切换 tab 时，界面某个请求就会特别多。经排查，这个请求不需要在每一个 tab 点击时发送（获取通知列表），现在频繁发送性能比较差，需要改成只发送一次请求。
2024-01-26 14:56:21
535
2
原创 pdfjs 打印空白页
最近遇到一个问题，前端使用 pdfjs 预览 PDF 文件时，在浏览器中执行打印，谷歌浏览器最后一页会出现空白。如下图所示。在火狐浏览器和 Safari 中是正常的，初步判断是某个代码兼容性问题。
2024-01-09 11:57:45
1072
原创 ReferenceError primordials is not defined 报错和解决
今天使用一个老项目（2020年前）时，执行报错，显示如下刚开始以为是网络问题，或者是第三方库冲突，尝试切换网络问题还存在，查资料如下。primordials isnot defined
2023-11-02 11:16:58
3855
4
原创 Warning: React.createElement: type is invalid -- expected a string (for built-in components)
Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: object。中文就是：React 框架创建元素时，类型不合法。今天开发时，一个稳定的功能出现了下面的报错。
2023-09-08 13:36:31
2432
原创 如何快速修复 NPM audit 安全问题
问题描述：一个老前端项目中，npm audit 反馈 Dependencies 中反馈了不少安全问题，有很多的 high 或者 critical 问题需要修复。项目简介：大约是5年前的项目，react 版本是 16, webpack 是 3 版本，axios 是 0.x 版本。当时使用 create-react-app 初始化项目，后期经过 npm eject 暴露了配置并更改过。现在5年过去了，这些第三方库很多存在安全问题需要修复。
2023-08-30 17:41:22
680
原创 JS input 在 Android 中无法打开相机的问题
最近项目中，前端和安卓协同开发，安卓端把 JS 前端项目，直接打包嵌入到安卓应用中，安卓的同事反馈，无法打开安卓的相机进行拍照。如果是 iOS 或者移动端浏览器中，可以打开相机并进行拍照。具体的代码如下，我使用 React JSX 语法，其中 input 输入图片。
2023-08-22 14:22:31
975
原创 前端数据兼容性及解决
最近经常遇到新老数据兼容性的问题：某个数据或者字段，存储在服务器上，版本迭代后，数据类型变化，前端需要兼容已有的数据类型。后端返回的数据中，有这些情况，那么前端使用时，需要兼容这多个版本的数据。也可以写一个 model user 类处理属性，优化代码，代码如下。例如第一版中，包括了姓名（字符串），年龄（数字），性别（布尔值）最好的解决办法，还是在初期设计考虑各种情况，考虑后续的兼容性。产品改了需求，针对国外用户，姓名改成了姓，名两个字段。
2023-03-30 13:55:48
356
2
原创 JS Bridge 实现前端和安卓通信
现在很多开发都是 hybrid 混合式开发，也就是一套代码，同时实现 web Android ios 开发。那么需要 JS 调用原生 Java android 的接口，或者 Java 调用 JS 的方法。JS bridge 是实现的方案之一，例如 react native。小程序比较特殊，也是 JS 调用原生环境的 API。
2023-03-30 13:50:35
693
原创 NodeJS
NodeJS进程与线程是一个程序员的必知概念，面试经常被问及，但是一些文章内容只是讲讲理论知识，可能一些小伙伴并没有真的理解，在实际开发中应用也比较少。本篇文章除了介绍概念，通过Node.js 的角度讲解进程与线程，并且讲解一些在项目中的实战的应用，让你不仅能迎战面试官还可以在实战中完美应用。作者简介：koala...
2023-02-13 18:00:53
357
原创 图解SSL/TLS协议
图解SSL/TLS协议本周，CloudFlare宣布，开始提供Keyless服务，即你把网站放到它们的CDN上，不用提供自己的私钥，也能使用SSL加密链接。我看了CloudFlare的说明(这里和这里)，突然意识到这是绝好的例子，可以用来说明SSL/TLS协议的运行机制。它配有插图，很容易看懂。下面，我就用这...
2023-02-13 17:43:03
182
原创 Symbol
Symbol介绍ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法(mixin 模式)，新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbo...
2023-02-13 17:42:54
152
原创 你靠哪些讲解学会了曾经怎么也学不会的算法？
你靠哪些讲解学会了曾经怎么也学不会的算法？====分割线====1.快速排序(noip2016初赛)2.后缀数组(2009国家集训队论文)3.FFT (某个福建省的课件，内容为miskcoo的blog)4.生成函数(某个名为polynomial的课件)5.KD-Tree(2018.1 yali集训)还有...
2023-02-13 17:42:39
290
原创 Chrome浏览器的用法
Chrome浏览器的用法快捷键Ctrl+N Opens a new window.Ctrl+T Opens a new tab.Press Ctrl+O, then select file. Opens a file from your computer in Google Chrome....
2023-02-13 17:42:37
296
原创 CDN
CDNCDNCDN 定义内容分发网络 content delivery network概况：设置多个节点服务器，分布在不同区域中，便于用户进行数据传递和访问。当某一个节点出现问题时，通过其他节点仍然可以完成数据传输工作，可以提高用户访问网站的响应速度。“分布式存储”：将中心平台的内容分发到各地的边缘服...
2023-02-13 17:42:26
122
react生命周期函数图解
2018-10-09
Git 学习中这个任务怎么完成
2022-09-03
TA创建的收藏夹 TA关注的收藏夹
TA关注的人