- 博客(38)
- 资源 (9)
- 收藏
- 关注
RSS订阅原创 Nodejs 问题排查
用于记录在使用 node 过程中遇到的问题，并尝试寻求解决方案。该问题存在于当初是为了解决首屏问题，而采用 ssr，然而超时便会导致服务挂起，便需要有一定的错误处理机制来处理。
2024-01-18 17:48:01
540
原创 使用 TypeChain 从智能合约 ABI 生成类型声明
web3 项目中，前端不可缺少地需要调用智能合约的代码，但是智能合约只有合约地址及对应的 ABI 文档，而没有相应的 typescript 类型声明。本文讲述如何使用 typechain 将智能合约的 ABI 文件自动生成类型声明，这样可以在项目中使用对应的属性和方法。通过采用 TypeChain 并将其集成到开发环境中，便可以轻松地与合约交互并提升整体开发人员体验。
2023-12-01 22:29:22
415
原创 关于 React 如何自定义配置 HighCharts tooltip
当我们结合 React 使用 highCharts 库时，存在一些特殊自定义的情况，比如针对 Tooltip 定制化样式。当然 highCharts 也提供了配置自定义 tooltip 的 formatter 方法，可以支持 html 元素。但是并不够灵活，对于配置复杂样式或组件复用情况下，并不友好。因此寻求新的思路，以下便是社区常用的一个方法，在此记录。该实现方式最基本的原理是采用 React 的方法，在指定的元素下渲染子元素。
2023-12-01 16:24:44
331
原创 CodeSandbox 问题梳理
本地计算机启动服务，移动端配置代理访问本机 ip 服务；发布到服务器，通过域名/IP 访问；通过 codesandbox/vercel 部署在线服务，通过地址访问因为需要支持其他移动端也能够访问服务，第一点仅限同一局域网条件下，也就抛弃了第一条。第二点，需要购买服务器资源，当然这样会更安全一些。而我选择了第三条，能够通过在线编辑平台，直接部署项目，并提供可供外部访问的链接。其缺点是代码存在泄漏问题，但是由于是个人学习的项目代码，也就不在乎了。
2023-09-07 18:25:13
370
翻译 写 React 组件的五个常见错误
前言很早之前阅读的一篇文章，最近翻到仍觉得有所受益，因此翻译让更多的人看到。原文地址：Five common mistakes writing react components (with hooks) in 2020正文我在编写 react 组件时发现的最常见的错误是，为什么它们是错误，以及如何避免或修复它们。React 作为一个框架React 在 web 开发领域已经有一段时间了。它作为敏捷 web 开发工具的地位近年来稳步加强。特别是在新的 hooks 概念发布之后，编写组件变得前所
2022-04-15 14:04:40
340
原创 VS Code 插件推荐
前言插件推荐Auto Close Tag（自动关闭标签）下载量（6.8M）评分（4颗星）该插件自动添加 HTML/XML 的结束标签，与 Visual Studio IDE 或 Sublime Text 一样。Beautify（代码美化）下载量（8.4M）评分（4颗星）在 Visual Studio 代码中美化 javascript, JSON, CSS, Sass 和 HTML。VS Code 内部使用 js-beautify，但它缺乏修改你想要使用的样式的能力。这个扩展可以在 VS Co
2022-04-15 09:41:04
2336
原创 eslintrc
const restrictedGlobals = require('confusing-browser-globals');module.exports = { root: true, parser: 'babel-eslint', plugins: ['prettier', 'import', 'jsx-a11y', 'react', 'react-hooks'], env: { browser: true, commonjs: true, es6: t
2022-03-04 10:32:12
377
原创 实现渐变背景、文字、边框
写在前面CSS 一直以来都是本人比较薄弱的点，当前的各种框架各种 UI 库都很好地封装了样式。难得遇上需要自己写样式，也查了一些资料，记录下来，方便日后遇到同样问题再进行查看。而此次的需求，是需要实现以下效果：这里既有了文字渐变、也有背景渐变以及输入框边框的颜色渐变。因此将从这三个方面实现不同渐变的需求。渐变背景渐变背景采用 CSS3 的线性渐变，更多的渐变方式可查看文档：菜鸟教程-渐变背景渐变代码：#grad1 { height: 200px; background-image
2021-08-09 20:16:40
213
原创 Node 获取电脑 MAC 地址的信息
获取电脑 mac 地址：const interfaces = require('os').networkInterfaces();console.log("Mac================" + JSON.stringify(interfaces));就能够获取到信息。
2021-08-04 15:02:54
804
2
原创 搭建基于 electron 的 React + Typescript 项目
写在前面出于学习目的，简单搭建了一个关于 electron + react 的项目，记录下搭建过程中的学习过程，还望各位大佬们多多指教~相关资料：electron 官方文档React 官网地址初始化项目创建 react + typescript 项目npx create-react-app my-app --typescript安装 electron 环境npm i -D electron创建 electron 入口文件main.js 文件// Modules to contr
2021-08-04 15:00:01
884
原创 Node监听日志系统
Easy-monitor背景在开发公司官网响应式布局及演示需求时，由于对服务端渲染的开发并不熟悉，以及nginx日志的获取不便捷，在过程中遇到层层阻碍，从而引发思考：是否应该针对Node或者是PM2进程，进行必要的日志获取？市场上较为成熟的方案有NSolidAliNodeKeymetrics（PM2官方？）Easy-Monitor方案对比以下将针对下面几个方案的用法及可行性展开讨论。NSolid该方案，在Egg文档中提及，在尝试时，由于不支持Windows系统，因此未实际进行调
2020-10-29 08:41:30
925
2
转载 安装多版本Chrome
写在前面工作中总是会遇到多个版本Chrome的问题，但是并不乐意于通过版本降级来进行调试。这时候便需要多个版本共存来进行调试。特点安全绿色免安装，可直接拷贝到U盘等随声携带，不用担心被植入一些其他东西。支持任意版本，可随意选择。和现有日常使用的Chrome共存，不会有冲突。步骤创建目录现在本地创建个目录用于存放不同版本的浏览器。（傻傻的我创建了个test，结果后来忘记叫啥，找了半天）下载提取器下载地址：下载提取器下载完成后，直接放置于上面创建的目录中。下载chrome主程序然
2020-06-29 16:11:52
4439
原创 Hooks原理解析与自定义hooks
写在前面对于使用hook大家都有一定的经验，能够很好地使用React强大的能力。而下一版本也顺着富哥的要求需要将service提取到hook中，我正好深入学习了一下，可能理解的不对，还请指正。什么是Hook这个时候往往会有好几个版本的定义。Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 ——这使得你不使用 class 也能使用 React。官网如是说。从阮老师的博客中，也提到：React Hooks
2020-05-19 21:19:36
2780
原创 前端面试题总结（不断更新修改）
前言因为一些特殊原因，刚入职半年又重新找工作，发现之前的面试题已经忘了，因此在此记录并不断更新。面试题不是靠死记硬背，而是在短时间尽量多的备战可能问到的题目，答案则是需要理解更深层的原理，回答时才能够从容不迫，这便需要花费更多的时间。共勉！希望每个人面试都能有个好结果~CSS部分元素水平垂直居中1、margin 已知高宽1）margin为auto.box { backgr...
2019-10-12 09:23:06
342
转载 详解vue的diff算法
前言我的目标是写一个非常详细的关于diff的干货，所以本文有点长。也会用到大量的图片以及代码举例，目的让看这篇文章的朋友一定弄明白diff的边边角角。先来了解几个点…1. 当数据发生变化时，vue是怎么更新节点的？要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新...
2019-09-19 14:32:21
1012
转载 vue核心之虚拟DOM(vdom)
本文是在网上阅读而来，用于记录文档，便于学习。因此转载路径为：https://www.jianshu.com/p/af0b398602bc一、真实DOM和其解析流程？浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建...
2019-09-18 17:34:38
411
原创 docker部署node容器
把一个 Node.js web 应用程序给 Docker 化文档介绍文档1、 下载Docker Desktop：下载链接2、 而后启动docker3、 新建项目，在文件夹中新建Dockerfile和.dockerignore4、 建立镜像：docker build –t {镜像名} . （不能忽略后面的.）5、 运行容器：docker run –it {镜像名}...
2019-09-12 11:00:52
1103
原创 vue install 报错 npm install:ChromeDriver installation failed Error with http(s) request: Error: re...
安装chromedriver时报错：verbose stack Error: [email protected] install: `node install.js`解决方法：更换安装源，使用以下命令：npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver...
2019-09-12 10:36:30
1116
原创 解决vue打包内存溢出报错 CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
项目太大使用webpack打包时，会存在内存溢出的情况。如图：可通过以下方式解决：1、手动更改webpack-dev-server的执行内存：找到项目的node_module/.bin/webpack-dev-server.cmd文件，然后更改其内存为4096或更大。如下：node --max-old-space-size=4096 "%~dp0\..\webpack-dev-serv...
2019-09-11 11:14:08
3838
翻译 Flow——js的类型检查器
写在前面在学习Vue源码时会看到一些关于Flow的语法，是用于检测数据类型是否正确的方式。下面针对Flow官方文档，进行理解和翻译。有不对的地方，还请指正，谢谢~入门Flow是JavaScript代码的静态类型检查器。它可以帮助您提高工作效率。让您的代码更快，更智能，更自信，更大规模。Flow通过静态类型注释检查代码是否存在错误。这些 类型允许您告诉Flow您希望代码如何工作，Flow将...
2019-02-26 16:25:50
638
原创 安卓和iOS复制内容到剪切板
写在前面：产品需求为了实现用户点击按钮后复制指定内容到手机的剪切板。其主要思路在于将内容赋值给input或者textarea标签，然后选中其内容，在执行document.execCommand函数。局限性：如上面所言，核心主要在于execCommand函数，该函数在一些系统下的兼容性并不理想。Ios在10.3版本以上效果较好，安卓兼容性可参考官网：https://developer.mo...
2019-01-10 12:21:30
898
原创 node上传文件到服务端
前言：由于工作要求，需要写个文件上传的接口。之前接触的较少，都是使用现成的接口，自己写接口时却是遇到了难点。该项目是在vue、koa基础上搭建的，关于路由及其他相关知识，可查看其他文章。现将自己的理解写下了，方便日后差异。如有不当地方，还请指正。前端：htmlhtml结构可以写的很简单，一个input标签就足够。代码如下：<input type="file" id="uploa...
2018-11-27 19:47:41
2750
原创 webPack学习笔记
具体的怎么安装webpack和构建项目在官方文档已经描述得很详细，在此就不抄袭搬运了。我只是简单进行学习的总结，希望对各位能有所帮助。官方文档地址： https://doc.webpack-china.org/guides/installation/安装安装建议的是项目目录下进行局部安装，避免不同项目之间的版本冲突，可使用以下命令进行安装：npm install --save-dev webpac
2018-03-01 16:54:06
548
原创 jQuery手机实现左右滑动事件
随着手机的不断发展，移动端页面已经逐渐成长起来，但对于移动端的手势事件并不是十分完善，并没有左右滑动事件。不过可以通过已存在的事件实现移动端页面的左右滑动事件。移动端相关的事件： touchstart：手势触碰屏幕是触发该事件； touchmove：手指在屏幕中移动时触发该事件； touchend：手指离开屏幕时触发该事件。实现代码如下：//左右滑动翻页this.$vrTable.on('t
2017-08-03 15:33:01
17293
1
原创 xsl模板学习笔记
好久没有学习了。这是最近接触的一些模板学习笔记。xsl是将xml转化为HTML的一种模板。通过XPath来获取xml的节点路径等信息。工作原理为：使用XPath来匹配xml中定义的部分，找到之后将该部分转化为指定的结果文档。直接进入主题：<xsl:stylesheet>元素以及<xsl:transform>元素类似于HTML文件一样，需要对文档进行声明，其中以下两种方式均可：代码如下：<xsl:st
2017-07-21 15:45:32
1557
原创 ES6新特性
let和constletjavascript中没有块级作用域的概念，所以ES6新增了let关键字用来声明变量。let使javascript有了块级作用域，用let所声明的变量，只在该{}内有效。例如：{ let a = 2; console.log(a);}console.log(a);输出结果为： let的另外两个特点：避免了var声明函数时所导致的变量提升；不允许在同一
2016-10-19 12:30:49
2175
翻译 Jasmine文档（三）
前言这是我翻译的Jasmine文档第三篇，前两篇文章的地址为： Jasmine文档（一） Jasmine文档（二）匹配全局jasmine.anyjasmine.any传递一个构造函数（constructor）或者“类”（class）作为一个期望值，如果实际构造函数和传递的参数相同则返回true。例如： describe(“jasmine.any”, function() { it(“m
2016-08-05 17:01:43
1983
1
翻译 Jasmine文档（二）
前言这是翻译的Jasmine文档第二篇，第一篇文章的地址为： Jasmine文档（一）Spies（间谍）Jasmine有称为间谍（spies）的测试双重功能。一个spy可以监测任何函数的调用和参数的调用痕迹。Spy只能存在于定义它的describe()和it()代码块内，而在每一个spec结束后将被移除。（这个语法在Jasmine2.0才改变的） 有几个特别的Matchers于spy相互作用：
2016-08-05 16:43:56
2712
翻译 Jasmine文档（一）
前言之前看了一些关于Jasmine的文章，后来在官网上看到了文档，试着自己翻译了一下，有问题的欢迎大家指正哈。 官网地址为：Jasmine官方文档介绍Jasmine是一种用于测试JavaScript代码的行为驱动开发框架。它不依赖于其他任何JavaScript框架。它也不需要一个DOM结构。它有一个干净、清晰的语法，所以你可以很轻易地书写单元测试代码。本指南是针对于Jasmine2.4.1版本。d
2016-08-04 18:44:00
3567
原创 组件单元测试开发过程小总结
前言最近在开发公司内部公共组件的使用样例和代码单元测试。 具体单元检测框架的知识，可以查看另一篇博文： 单元测试框架Jasmine学习笔记开发过程中遇到的一点问题就容易纠结很久，为了能够吸取教训，特地将遇到的问题记录下来，避免以后能够再犯，并且加深对代码原理的理解。问题1：ES6语法的文件引用ES6使用export导出模块时，代码如下：export default { //导出模块}
2016-07-29 19:54:15
992
原创 单元测试框架Jasmine学习笔记
前言实习期间接触很多新东西。最近又在学习如何写一个独立的测试单元。看了公司前人的代码，后来网上搜寻了相关的知识，打算还是将自己的理解简单写下来。Jasmine简介Jasmine是一种JavaScript的测试框架，它不依赖于其他框架，也不依赖于DOM结构。其语法特点在于简单清晰，就算是刚入门没多久的JavaScript程序猿也能够写出简单的测试单元代码。Jasmine下载下载地址为： https:
2016-07-27 10:24:39
3453
原创 Vue.js学习
前言–很荣幸的，能够在实习阶段接触到Vue.js相关的内容，指导人让我先熟悉一下Vue的基本实现。在今天的学习过程，写下一点内容方便以后阅读。安装Vue.js的引入类似于其他框架的引入方法，只需将Vue.js文件下载之后，在HTML的头标签里引入就行。例如：<script type="text/javascript" src="vue.js"></script>概述Vue的模型可以参照下图：这张图
2016-07-12 10:14:05
1566
原创 jQuery源代码自我理解（二）
下面是自己写的上一篇源码理解： jQuery源代码自我理解（一）type()函数用来判断对象的类型。 typeof obj === "object" || typeof obj === "function"判断obj参数是不是对象或者函数，是的话返回class2type[]数组里相对应得类型，否则返回obj参数的基本类型。例如：var a=[1];console.log($.type(a));
2016-07-08 11:00:56
657
原创 require.js理解
前言实习过程学习了require.js的相关内容，也在网上查阅了一部分资料，相比于其他框架，require.js更为简单易学，也更容易使用。 下面我就简单介绍我所认识的require.js，希望大家能够多多指教！Require.js的优缺点优点：正如我前面所提到的，require.js框架相对较小而且相对简单使代码模块化异步加载js文件，防止请求阻塞代码模块化能够使代码称为一个个相对独立的
2016-07-01 09:51:10
2151
原创 git简单操作
前言之前没有尝试过使用git，在实习过程中对git命令有了简单的了解。 下面对我所知道的git命令进行简单的介绍。 当然，本地环境必须安装配置git环境，这个相对简单（困难在于安装之后配置系统环境变量）。从git上克隆项目是一开始将前人的代码下载到本地的直接方法。代码如下：git clone git@localhost:abc/bcd/de.git上述代码是从ssh地址为git@localhos
2016-06-30 16:25:56
564
原创 jQuery源代码自我理解（一）
自己看的源代码，可能理解的不够透彻，但是自己看过一遍感觉还是比较不一样的。希望各路大神多多指教！下面是自己写的其他源码理解文章： jQuery源代码自我理解（二）前面的if判断是否存在commonJs运行环境，若没有，直接执行else的内容。 if ( typeof module === "object" && typeof module.exports === "object" ) {
2016-06-23 22:59:58
1197
原创 JavaScript之枚举属性的对象函数
JavaScript中通常会对对象的一些枚举属性进行操作，例如复制、删除、替换等。这需要使用for/in将属性进行循环枚举，下面将介绍几种简单的函数方法。1. 将a中的可枚举属性复制到b中（b的同名属性将被覆盖）function extend(b,a){ for(item in a){ //遍历a中的属性 b[item] = a[item];
2016-05-24 17:15:42
2627
2
原创 JavaScript跨浏览器事件处理
事件处理程序有以下几种方式：HTML事件处理程序DOM0事件处理程序DOM2事件处理程序IE事件处理程序下面将针对不同的地方而编写一个跨浏览器事件处理程序。HTML事件处理程序最常见的是HTML代码中内联事件处理程序，如下面代码所示：<input type="button" id="btn" value="提交" onclick="alert('已提交！')"/>事件处理函数可以在HTML
2016-05-23 10:53:21
862
基于 Autojs 开发悟空浏览器金币宝箱自动化脚本
2023-01-10
触控精灵之悟空浏览器测试脚本
2023-01-04
基于flask开发的学习站点.zip
2021-05-07
productStore.zip
2021-04-11
GoogleChromePortable.exe
2020-06-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人