JavaScript
文章平均质量分 73
Michael18811380328
常与同好争高下,不与傻瓜论短长。
展开
-
Starting the development server 报错和解决
最近某个项目开发环境升级后,运行 npm start 后无法启动项目,终端始终显示 Starting the development server…,浏览器 localhost: 3000 界面显示空白。错误截图。原创 2024-04-12 20:13:17 · 1782 阅读 · 0 评论 -
ReferenceError primordials is not defined 报错和解决
今天使用一个老项目(2020年前)时,执行报错,显示如下刚开始以为是网络问题,或者是第三方库冲突,尝试切换网络问题还存在,查资料如下。primordials isnot defined原创 2023-11-02 11:16:58 · 2663 阅读 · 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 · 2019 阅读 · 0 评论 -
如何快速修复 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 · 570 阅读 · 0 评论 -
JS input 在 Android 中无法打开相机的问题
最近项目中,前端和安卓协同开发,安卓端把 JS 前端项目,直接打包嵌入到安卓应用中,安卓的同事反馈,无法打开安卓的相机进行拍照。如果是 iOS 或者移动端浏览器中,可以打开相机并进行拍照。具体的代码如下,我使用 React JSX 语法,其中 input 输入图片。原创 2023-08-22 14:22:31 · 769 阅读 · 0 评论 -
JS Bridge 实现前端和安卓通信
现在很多开发都是 hybrid 混合式开发,也就是一套代码,同时实现 web Android ios 开发。那么需要 JS 调用原生 Java android 的接口,或者 Java 调用 JS 的方法。JS bridge 是实现的方案之一,例如 react native。小程序比较特殊,也是 JS 调用原生环境的 API。原创 2023-03-30 13:50:35 · 552 阅读 · 0 评论 -
编程思想的提升—提高代码可扩展性
低耦合:两个独立的模块之间进行通信,一个模块订阅某个事件(对应的某个函数),另一个模块触发(发布)这个事件,就会触发前一个模块中的某个函数。如果一个旧方法已经写好,需要增加一个新的功能,但是我们不方便更改旧方法(其他地方可能使用旧方法)或者不能更改(第三方库提供的方法),所以采用装饰者模式。这个适合于两个不同的类(可能是第三方的类),然后统一成一个适配器类,可以同时调用这两个类的API。代码上,就是设计一个新的类,这个类继承自一个类,同时有另一个类的方法(方法混入模式)。关注的是两个模块间的接口。原创 2023-02-13 16:55:38 · 589 阅读 · 0 评论 -
Express 框架基础入门
这个课程简单介绍了 express 开发基本过程,夹带了腾讯云的私货,这个算入门介绍。express 官方文档太繁琐了,不适合新人阅读。后期会更新其他课程笔记。原创 2023-02-06 21:32:57 · 298 阅读 · 0 评论 -
浏览器内存溢出处理
一个复杂的问题,浏览器直接崩溃,无法获取内存信息,也无法获取页面统计,可以二分法代码,分段排查代码中的问题。同时减少数据量量级,避免浏览器直接卡死的问题。2、浏览器 Performance 中screenshot 录屏可以记录界面不同阶段的录屏,一般用于定性分析。判断时间轴中 longtask 长任务,耗时超过 100ms,有问题通常红色标明,这个就反映了掉帧。原创 2023-02-02 13:56:15 · 2847 阅读 · 0 评论 -
解决数据兼容性问题
最近经常遇到新老数据兼容性的问题:某些新同事更改代码后,没有兼容旧数据,已有用户的数据显示不全或者错误,很麻烦。技术层面,就是某个数据或者字段,存储在服务器上,版本迭代后,数据类型变化,前端需要兼容已有的数据类型。例如一个用户对象:例如第一版中,包括了姓名(字符串),年龄(数字),性别(布尔值)第二版中产品改了需求,针对国外用户,姓名改成了姓,名两个字段性别改成了字符串,有的用户选择不显示性别第三版中,增加了地址(字符串)第四版中,可能有多个住址,地址字段改成数组。原创 2023-02-02 13:51:59 · 842 阅读 · 0 评论 -
VUE VS React 对比
React 是单向数据流,也就是上层组件通过 state 存储数据,通过 props 传递给下层组件,下层组件不能直接更改上层组件的数据,通常通过回调函数或者 redux 等状态管理工具,改变整体的数据,触发组件的局部更新。React 通常是 jsx 格式,JS 和 HTML 写在一个文件中,严格意义是 JSX,会通过 React 转换成JS代码,样式部分通过外部 css 文件控制(或者 less sass)虚拟DOM,Diff 算法,响应式和组件化,具体的原理不展开讨论,详情参考其他博客。原创 2023-01-31 11:20:56 · 504 阅读 · 0 评论 -
ReferenceError: primordials is not defined
ReferenceError: primordials is not defined primordials 错误 今天在处理一个老项目的 bug 时,执行正常,执行或者意外报错。尝试重新链接网络,删除 node_modules 重新安装等方法,不生效。尝试手动安装 primordials 这个第三方库,也不生效,这个第三方库好像有问题,npm 和 github 上找不到源码。原创 2022-09-08 14:51:26 · 3507 阅读 · 0 评论 -
enzyme react 组件测试
enzyme 简单实践enzyme 主要用于 React 组件测试文档链接:https://enzymejs.github.io/enzyme/https://www.npmjs.com/package/enzymeJest 断言配置:https://github.com/enzymejs/enzyme-matchers/tree/master/packages/jest-enzyme环境依赖配置:https://github.com/enzymejs/enzyme-matchers/tree/m原创 2021-11-06 15:27:14 · 336 阅读 · 0 评论 -
JS实现搜索框文字可删除
JS实现搜索框文字可删除最近在阅读张鑫旭大佬的博客时,想搜索一篇文章,打开搜索框,虎躯一震搜索记录中居然有 不可描述 的历史记录!还好周边没有别人,否则就尴尬了。但是我之前没有在张鑫旭大佬这里搜索这个不可描述的词语,很奇怪。我清理了浏览器的缓存和历史记录,但是这个下拉框搜索记录还在。查看网络请求,没有相关敏感词语的返回,判断这个应该不是服务器返回的,应该存在本地浏览器中。浏览器存储,主要是 cookie , localStorage, session 中。我个人博客的本地记录就存放在 l原创 2021-11-05 16:56:34 · 558 阅读 · 0 评论 -
npm 报错 426 Upgrade Required
ERR! 426 Upgrade Required解决方法更新 node 版本到 14.18.0 以上,可以参考:https://www.jianshu.com/p/e6d3f7110a60然后升级 npm 的版本到最新npm install -g npm@latestnpm config set registry https://registry.npmjs.org/下面是详细的英文描述及原因When I try to publish a new package to npm or try原创 2021-10-08 13:53:46 · 6559 阅读 · 2 评论 -
DOMException: Failed to execute ‘querySelectorAll‘ on ‘Document‘ is not a valid selector 报错处理
DOMException: Failed to execute ‘querySelectorAll’ on ‘Document’ is not a valid selector 报错处理问题过程今天开发过程中,遇到一个报错信息:react-dom.production.min.js:5058 DOMException: Failed to execute ‘querySelectorAll’ on ‘Document’: ‘0bb64d67-b455-4130-9b73-55eda6a1975c8Bu原创 2021-07-16 14:49:59 · 15129 阅读 · 0 评论 -
SVN 版本控制代码管理
现在大部分项目的版本控制是 git 软件。一部分面试会问到 SVN,这里简单学习总计一下 SVN。1、SVN 简介软件开发过程中,可能多人编辑同一个文件会产生冲突,此时需要版本控制软件。最早在linux开发的CVS可以实现,缺点:产生很多无用文件SVN是CVS的替代品。这两个软件都是服务器-客户端模式。需要搭建服务器应用,并在本地配置客户端应用。这两个软件的缺点:必须在联网的情况下使用。...原创 2019-10-29 09:44:04 · 392 阅读 · 0 评论 -
借助 contentEditable 实现富文本编辑器
问题现在主流的web富文本编辑器几乎都是基于contentEditable的,我们之前的编辑器引擎就是基于TinyMCE魔改的,这个引擎目前只有我一个人负责。富文本编辑器是我们的核心业务,现在leader要搞一个专门的富文本编辑器团队,开发类似于Google docs那种不基于contentEditable的编辑器引擎,这完全是另一个级别的事情了,我找遍了全网也找不到类似还活着的开源项目。除了代码编辑器ace之外真的一无所获,有没有做过的大佬稍微讲一下思路,要实现那些关键组件?或者讲一下大家团队一开始是怎原创 2021-04-15 14:36:30 · 1320 阅读 · 0 评论 -
前端高频英语单词
nodeJS 获取前端高频词最近在看英文文献,无奈各种生词比较多,每次看一段就需要不断查词典,很烦人。所以,我想把出现的高频生词用 nodeJS 找出来,统一查好,这样阅读就更快了。废话不多说,直接上代码1、准备一篇英文文章我找到一篇介绍 ECMA6 的文章 leanpub-auto-the-road-to-ecmascript-6原始网页:https://leanpub.com/understandinges6/read#leanpub-auto-the-road-to-ecmascript-原创 2021-03-19 20:02:06 · 457 阅读 · 0 评论 -
requestAnimationFrame 优化动画性能
常见默认的动画使用 setInterval 处理,然后浏览器渲染的频率是 60 次每秒,所以代码如下。 this.timer = setInterval(() => { fn(); }, 1000 / 60); // 停止动画 clearInterval(this.timer);这样写,JS 实际执行的间隔,和浏览器渲染重拍的时间不一定完全吻合,性能可能不好。所以我们引入了 rquuestAnimationFrame,这样可以让JS执行的时间原创 2021-02-03 10:08:10 · 948 阅读 · 0 评论 -
前端代码 review 流程规范
预测试0、明确任务需求和实现效果(需要产品和UI协同)1、单元测试、集成测试通过2、todo : C2C 测试通过(验证组件)3、本地开发环境中,eslint 代码规范检查,无报错无警告本地测试4、基本功能正常;界面样式正常;移动端兼容良好;谷歌浏览器显示良好(浏览器兼容性和系统兼容性尽量满足)5、极端情况正常:错误输入(数据类型不对等)、数据量巨大(1000行数据)、请求异常处理(403-404-500)6、代码兼容性:是否兼容老代码和老数据结构(如果不能兼容,至少界面不报原创 2020-12-21 17:29:14 · 1556 阅读 · 0 评论 -
arguments.callee 实现函数递归调用
arguments.callee 使用使用转转反侧法计算两个数的最大公约数时,看到这样一个代码function gcd(a, b) { if (a % b === 0) { return b; } return arguments.callee(b, a % b);}console.log(gcd(28, 12)); // 4console.log(gcd(7890, 123456)); // 6console.log(gcd(5, 13)); // 1原创 2020-12-18 16:54:56 · 237 阅读 · 4 评论 -
iframe 传值
父子 iframe 传值最近项目中有个页面中使用到 iframe,涉及到不同 iframe 的传值等操作,踩坑不少,简单记录一下。外部的页面成为父页面,内部嵌入的 iframe 称为子页面。一个父页面中可以嵌入多个子页面。不同子页面之间称为兄弟页面。我需要做的就是:父获取子的属性、子获取父的属性。父获取子的属性首先界面中的 iframe 需要设置不同的 ID,这样父组件中,可以通过 document.getElementById 等获取对应的 iframe。<ifram.原创 2020-12-11 22:04:24 · 5916 阅读 · 0 评论 -
JEST 单元测试说明 config.json
JEST 单元测试配置文件说明最近在做一个 JS + TS 项目,使用 JEST 做测试,我本地的配置文件如下module.exports = { roots: [ '<rootDir>/test', ], testRegex: 'test/(.+)\\.test\\.(jsx?|tsx?)$', transform: { '^.+\\.[jt]sx?$': 'ts-jest', }, moduleFileExtensions: ['ts', 'tsx原创 2020-11-26 16:56:30 · 1586 阅读 · 2 评论 -
JS 加法乘法错误解决 number-precision
JS 加法乘法错误解决 number-precision问题描述一个项目中,需要计算 0.56 * 100 然后转换成字符串,结果计算错误,所以调研使用这个库实现。但是计算 0.59 * 100 结果正确。这是 JS 内部的问题。当然还有经典的0.1 + 0.2 = 0.30000000000000004 问题我具体使用 number-precision 这个库,可以实现 JS 精确四则运算。安装npm install number-precision --sa..原创 2020-11-14 12:07:25 · 5547 阅读 · 0 评论 -
中文输入法输入事件composition的使用
中文输入法输入事件composition的使用最近遇到一个问题:如果一个 INPUT 中,用户使用中文输入法,那么原生的键盘事件就会发生变化,无法获取正确的 keycode 及对应的输入内容。从前端的能力,只能操作浏览器相关的 API,不能获取中文输入法的内置 API。查阅资料后,可以使用 composition 事件来监听相关的时间。不同中文输入法的情况可能大同小异(例如搜狗输入法,中文输入时,keycode 就是225,这样无法检测到点击的键)composition 事件组合分成三个事件:comp原创 2020-08-23 09:29:58 · 2729 阅读 · 0 评论 -
2020-07 学习笔记整理
For-in 和 for-of官方文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for…of传统的 for 循环有局限性,forEach 和 map 适应数组的循环,所以有了for in 和 for of 循环。for…of… 循环:可以循环可枚举对象(数组,对象,Map, set, 伪数组,构造器等),循环获取内部元素,可以使用break跳出,不能循环可枚举对象原型链上的属性和方法。f原创 2020-08-02 19:40:27 · 191 阅读 · 0 评论 -
javascript实现自定义滚动条
在实际项目中,遇到上下滚动条和左右滚动条不在一个DIV内部,所以某些情况下,右侧滚动条不可见。但是需要咋同一个视口内显示两个滚动条。一个解决思路是:自定义滚动条,隐藏原始滚动条。自定义滚动条scrollbar.jsimport React, { Component } from 'react';import PropTypes from 'prop-types';import '../css/scrollbar.css';const propTypes = { eventBus: Pro原创 2020-07-31 15:09:34 · 949 阅读 · 0 评论 -
Intl.NumberFormat 设置数字格式
MDN Intl.NumberFormat前端界面显示中,经常需要把数字转换成货币(美元欧元)小数点,货币保留两位小数等等操作,通常的方法是字符串拼接。现在有一个新的 API 可以直接进行转换,功能很强大!The Intl.NumberFormat object is a constructor for objects that enable language sensitive number formatting.这里可以把普通的数字,转换成不同的货币和格式样式字符串。locale 是必传参数(支原创 2020-07-27 18:30:33 · 5121 阅读 · 0 评论 -
React ref is null 错误解决
React ref.current is nullReact 中通常使用 state 状态驱动,对于 DOM 尺寸和界面动画等,通常使用 Ref 获取对应的节点并操作。最近遇到一个问题,REF 已经绑定,但是是 NULL,获取不到对应的 DOM 元素,查了资料,具体如下。问题描述国外的网友也遇到类似的问题:I’m working on an agenda/calendar app with a variable time range. To display a line for the curre原创 2020-07-27 18:24:36 · 8346 阅读 · 0 评论 -
Warning: Function components cannot be given refs
Warning: Function components cannot be given refs. Attempts to access this ref will fail.问题来源我们有一个子组件,外部父组件通过 ref 获取子组件的DOM。现在需要给子组件添加翻译(i18N)。export default ChildComponent;// 改成下面的export default withTranslation('translation')(ChildComponent);加上翻译后,原创 2020-06-22 16:43:10 · 13555 阅读 · 0 评论 -
怎样提升自己的编程能力?
最近反思一个问题:自己编程两年多以来,为什么近期的编程能力没有较大的提升?日常自己也参与不少项目,gitHub 上提交了不少的代码,CSDN 上面也写了不少自己的见解。还是感觉编程中有些力不从心。过去一段时间中参与了若干开源项目,github 上也提交了不少代码。csdn 上主要记录自己编程中遇到的报错问题,和常用的库的介绍,和学习笔记等。原创 2020-04-09 13:13:19 · 9018 阅读 · 0 评论 -
Performant front-end architecture
Performant front-end architectureThis post describes some techniques to make front-end apps load faster and provide a good user experience.We'll look at the overall architecture of the front-end. ...翻译 2020-04-08 20:48:54 · 648 阅读 · 0 评论 -
前端使用 RESTful API 设计 URL
RESTful 是一个 URL 的设计规范简单的说:HTTP 通过不同的方法表示操作(对应数据库增删改查),URL 表示操作的对象(对应数据库、表、记录等对象)。这部分 URL 通常是后端设计,前端直接调用。如果前端处理部分全栈任务,那么也需要了解一部分 Restful 设计风格。一、网络协议API与用户的通信协议,总是使用HTTPs协议。TODO: socket 协议是否支持?socke...原创 2020-04-08 18:03:47 · 1427 阅读 · 0 评论 -
时间时区错误修复moment
最近项目中,用户反馈一个时间不正确,老板让我立即处理。具体现象如下:第一个界面的时间第二个界面的时间发现一部分时间正确,一部分时间错误;正确的和错误的没有顺序。解决思路如下:1、排除后端传值错误早上刚刚上班,我输入了几个数据和测试时间,前端界面显示正常。我想可能不是前端的bug,应该是后端bug。首先我看了一下后端的传值(先看看是否是后端的问题,毕竟这个是数据错误),带着一脸问号找...原创 2020-03-20 11:00:49 · 1708 阅读 · 2 评论 -
window-onbeforeunload 的使用
官方定义onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。使用场合当我们界面中有未提交的表单,或者有未保存的文本内容,用户点击关闭按钮,需要浏览器弹出提示框,就需要使用这个事件 onbeforeunload调用方式window.addEventListener('beforeunload', func...原创 2020-03-12 16:01:28 · 16240 阅读 · 0 评论 -
Ant design mobile Actionsheet 组件的思考和改进
使用蚂蚁金服的 ant-design UI 组件库的移动端组件时,最近遇到一个问题。具体需要怎样解决呢?原创 2020-03-05 10:22:32 · 1354 阅读 · 0 评论 -
前端编辑图片缩放图片JScropperJSfabricJSEaselJSfabric-photo
最近接到一个新的需求:用户可以上传图片到浏览器,然后进行基础的编辑。下面是四个图片编辑方案方案1 cropper.js这是国内同行写的组件,星标 7.8K,比较稳定。缺点:最新版本基于Jquery,早期版本原生JS。代码链接:cropperhttps://fengyuanchen.github.io/cropper/效果演示下面是参考链接官网:https://fengyuan...原创 2020-02-21 14:58:46 · 945 阅读 · 0 评论 -
package.json scripts 脚本使用指南
package.json scripts 脚本使用指南Node 开发离不开 npm,而脚本功能是 npm 最强大、最常用的功能之一。本文介绍如何使用 npm 脚本(npm scripts)。一、package.json scripts 脚本是什么npm 允许在package.json文件里面,使用scripts字段定义脚本命令。{ "scripts": { "build": "...原创 2020-01-18 13:43:41 · 20984 阅读 · 6 评论 -
uglyJS 压缩丑化介绍
uglyJS 功能:丑化 JS 文件,有效减小 js 文件大小;基本使用0、环境配置如果有 es6 代码,假设已经安装了 babel 并可以成功将ES6转换成ES5代码。(项目没有使用webpack进行打包)1、安装库npm install uglify-js --save-dev2、修改配置package.json 改成下面的配置"scripts": { "clean": ...原创 2020-01-08 18:26:17 · 3964 阅读 · 2 评论