- 博客(42)
- 资源 (9)
- 收藏
- 关注
RSS订阅原创 H5 如何实现手机端摇一摇
手机应用一般都会提供原生的摇一摇功能，但是由于系统的差异性，H5 想要实现摇一摇功能，没法统一调用系统所提供的原生接口，便需要额外监听浏览器的事件。今天便将实现 H5 摇一摇功能的问题记录下来，方便以后学习查看。因为 H5 的使用场景不同，可能内嵌于 app 中，也可能存在于小程序平台，因此为了实现摇一摇，便依赖于浏览器的监听事件。通过监听 devicemotion 的事件属性，从而获取设备的加速度、倾斜角度等参数，从而进行摇一摇次数的判定。本文为个人记录开发过程中的疑问，如有错误，还请指正。
2024-10-30 10:33:49
330
原创 如何实现图片懒加载，原生 + React 实现方式
有时候列表存在许多图片，那么一次性加载会阻塞 http 请求，为了避免在可视窗口之外的元素进行不必要的图片加载，可以尝试使用懒加载进行优化。懒加载可以显著提高页面加载性能，特别是当页面包含大量图片时。为了实现延迟加载图片（也称为懒加载），可以使用 JavaScript 和 Intersection Observer API。但这样不可避免的会存在一定视觉效果上的体验缺失，在页面滚动特别快速时，由于浏览器来不及绘制刚刚进入视图的元素，便会导致出现短暂的白屏现象。这便需要在开发过程中，去做出一定地取舍。
2024-10-28 16:26:10
1225
原创 深入理解 Apollo Client 的缓存策略
Nextjs 使用 graphql，并且接入多个节点介绍了如何接入 graphql，并且使用来请求和操作数据。后面深入了解了一下其缓存策略，想着有必要整理出来，作为后续学习。有任何问题还请批评指正。那么如果数据对象不存在id或者_id时，Apollo 的标准化又该如何实现呢？您可以自定义如何为架构中的各个类型生成缓存 ID。这非常有用，尤其是当类型使用id或_id之外的字段（或多个字段！）作为其唯一标识符时。为了实现这一点，您需要为每个要自定义的类型定义一个TypePolicy。您可以在提供给。
2024-08-07 14:57:34
1202
原创 Nextjs 使用 graphql，并且接入多个节点
随着区块链技术的流行，也促进了 subgraph 工具的兴起。那么如何在前端接入 graphql 节点就成了关键，其接入方式既存在与 restful 接口相类似的方式，也有其独特接入风格。本文将介绍如何接入 graphql 以及如何应对多个 graphql 节点的情况。如有不当之处，还望批评指正。GraphQL 服务是通过定义类型和这些类型的字段来创建的，然后为每种类型的每个字段提供函数。
2024-07-31 12:26:37
794
原创 Nodejs 问题排查
用于记录在使用 node 过程中遇到的问题，并尝试寻求解决方案。该问题存在于当初是为了解决首屏问题，而采用 ssr，然而超时便会导致服务挂起，便需要有一定的错误处理机制来处理。
2024-01-18 17:48:01
642
原创 使用 TypeChain 从智能合约 ABI 生成类型声明
web3 项目中，前端不可缺少地需要调用智能合约的代码，但是智能合约只有合约地址及对应的 ABI 文档，而没有相应的 typescript 类型声明。本文讲述如何使用 typechain 将智能合约的 ABI 文件自动生成类型声明，这样可以在项目中使用对应的属性和方法。通过采用 TypeChain 并将其集成到开发环境中，便可以轻松地与合约交互并提升整体开发人员体验。
2023-12-01 22:29:22
542
原创 关于 React 如何自定义配置 HighCharts tooltip
当我们结合 React 使用 highCharts 库时，存在一些特殊自定义的情况，比如针对 Tooltip 定制化样式。当然 highCharts 也提供了配置自定义 tooltip 的 formatter 方法，可以支持 html 元素。但是并不够灵活，对于配置复杂样式或组件复用情况下，并不友好。因此寻求新的思路，以下便是社区常用的一个方法，在此记录。该实现方式最基本的原理是采用 React 的方法，在指定的元素下渲染子元素。
2023-12-01 16:24:44
473
原创 CodeSandbox 问题梳理
本地计算机启动服务，移动端配置代理访问本机 ip 服务；发布到服务器，通过域名/IP 访问；通过 codesandbox/vercel 部署在线服务，通过地址访问因为需要支持其他移动端也能够访问服务，第一点仅限同一局域网条件下，也就抛弃了第一条。第二点，需要购买服务器资源，当然这样会更安全一些。而我选择了第三条，能够通过在线编辑平台，直接部署项目，并提供可供外部访问的链接。其缺点是代码存在泄漏问题，但是由于是个人学习的项目代码，也就不在乎了。
2023-09-07 18:25:13
522
翻译 写 React 组件的五个常见错误
前言很早之前阅读的一篇文章，最近翻到仍觉得有所受益，因此翻译让更多的人看到。原文地址：Five common mistakes writing react components (with hooks) in 2020正文我在编写 react 组件时发现的最常见的错误是，为什么它们是错误，以及如何避免或修复它们。React 作为一个框架React 在 web 开发领域已经有一段时间了。它作为敏捷 web 开发工具的地位近年来稳步加强。特别是在新的 hooks 概念发布之后，编写组件变得前所
2022-04-15 14:04:40
381
原创 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
2732
原创 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
509
原创 实现渐变背景、文字、边框
写在前面CSS 一直以来都是本人比较薄弱的点，当前的各种框架各种 UI 库都很好地封装了样式。难得遇上需要自己写样式，也查了一些资料，记录下来，方便日后遇到同样问题再进行查看。而此次的需求，是需要实现以下效果：这里既有了文字渐变、也有背景渐变以及输入框边框的颜色渐变。因此将从这三个方面实现不同渐变的需求。渐变背景渐变背景采用 CSS3 的线性渐变，更多的渐变方式可查看文档：菜鸟教程-渐变背景渐变代码：#grad1 { height: 200px; background-image
2021-08-09 20:16:40
261
原创 Node 获取电脑 MAC 地址的信息
获取电脑 mac 地址：const interfaces = require('os').networkInterfaces();console.log("Mac================" + JSON.stringify(interfaces));就能够获取到信息。
2021-08-04 15:02:54
885
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
975
原创 Node监听日志系统
Easy-monitor背景在开发公司官网响应式布局及演示需求时，由于对服务端渲染的开发并不熟悉，以及nginx日志的获取不便捷，在过程中遇到层层阻碍，从而引发思考：是否应该针对Node或者是PM2进程，进行必要的日志获取？市场上较为成熟的方案有NSolidAliNodeKeymetrics（PM2官方？）Easy-Monitor方案对比以下将针对下面几个方案的用法及可行性展开讨论。NSolid该方案，在Egg文档中提及，在尝试时，由于不支持Windows系统，因此未实际进行调
2020-10-29 08:41:30
978
2
转载 安装多版本Chrome
写在前面工作中总是会遇到多个版本Chrome的问题，但是并不乐意于通过版本降级来进行调试。这时候便需要多个版本共存来进行调试。特点安全绿色免安装，可直接拷贝到U盘等随声携带，不用担心被植入一些其他东西。支持任意版本，可随意选择。和现有日常使用的Chrome共存，不会有冲突。步骤创建目录现在本地创建个目录用于存放不同版本的浏览器。（傻傻的我创建了个test，结果后来忘记叫啥，找了半天）下载提取器下载地址：下载提取器下载完成后，直接放置于上面创建的目录中。下载chrome主程序然
2020-06-29 16:11:52
4648
原创 Hooks原理解析与自定义hooks
写在前面对于使用hook大家都有一定的经验，能够很好地使用React强大的能力。而下一版本也顺着富哥的要求需要将service提取到hook中，我正好深入学习了一下，可能理解的不对，还请指正。什么是Hook这个时候往往会有好几个版本的定义。Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 ——这使得你不使用 class 也能使用 React。官网如是说。从阮老师的博客中，也提到：React Hooks
2020-05-19 21:19:36
2848
原创 前端面试题总结（不断更新修改）
前言因为一些特殊原因，刚入职半年又重新找工作，发现之前的面试题已经忘了，因此在此记录并不断更新。面试题不是靠死记硬背，而是在短时间尽量多的备战可能问到的题目，答案则是需要理解更深层的原理，回答时才能够从容不迫，这便需要花费更多的时间。共勉！希望每个人面试都能有个好结果~CSS部分元素水平垂直居中1、margin 已知高宽1）margin为auto.box { backgr...
2019-10-12 09:23:06
385
转载 详解vue的diff算法
前言我的目标是写一个非常详细的关于diff的干货，所以本文有点长。也会用到大量的图片以及代码举例，目的让看这篇文章的朋友一定弄明白diff的边边角角。先来了解几个点…1. 当数据发生变化时，vue是怎么更新节点的？要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新...
2019-09-19 14:32:21
1051
转载 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
469
原创 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
1178
原创 vue install 报错 npm install:ChromeDriver installation failed Error with http(s) request: Error: re...
安装chromedriver时报错：verbose stack Error: chromedriver@2.46.0 install: `node install.js`解决方法：更换安装源，使用以下命令：npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver...
2019-09-12 10:36:30
1215
原创 解决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
3941
翻译 Flow——js的类型检查器
写在前面在学习Vue源码时会看到一些关于Flow的语法，是用于检测数据类型是否正确的方式。下面针对Flow官方文档，进行理解和翻译。有不对的地方，还请指正，谢谢~入门Flow是JavaScript代码的静态类型检查器。它可以帮助您提高工作效率。让您的代码更快，更智能，更自信，更大规模。Flow通过静态类型注释检查代码是否存在错误。这些 类型允许您告诉Flow您希望代码如何工作，Flow将...
2019-02-26 16:25:50
673
原创 安卓和iOS复制内容到剪切板
写在前面：产品需求为了实现用户点击按钮后复制指定内容到手机的剪切板。其主要思路在于将内容赋值给input或者textarea标签，然后选中其内容，在执行document.execCommand函数。局限性：如上面所言，核心主要在于execCommand函数，该函数在一些系统下的兼容性并不理想。Ios在10.3版本以上效果较好，安卓兼容性可参考官网：https://developer.mo...
2019-01-10 12:21:30
940
原创 node上传文件到服务端
前言：由于工作要求，需要写个文件上传的接口。之前接触的较少，都是使用现成的接口，自己写接口时却是遇到了难点。该项目是在vue、koa基础上搭建的，关于路由及其他相关知识，可查看其他文章。现将自己的理解写下了，方便日后差异。如有不当地方，还请指正。前端：htmlhtml结构可以写的很简单，一个input标签就足够。代码如下：<input type="file" id="uploa...
2018-11-27 19:47:41
2798
原创 webPack学习笔记
具体的怎么安装webpack和构建项目在官方文档已经描述得很详细，在此就不抄袭搬运了。我只是简单进行学习的总结，希望对各位能有所帮助。官方文档地址： https://doc.webpack-china.org/guides/installation/安装安装建议的是项目目录下进行局部安装，避免不同项目之间的版本冲突，可使用以下命令进行安装：npm install --save-dev webpac
2018-03-01 16:54:06
580
原创 jQuery手机实现左右滑动事件
随着手机的不断发展，移动端页面已经逐渐成长起来，但对于移动端的手势事件并不是十分完善，并没有左右滑动事件。不过可以通过已存在的事件实现移动端页面的左右滑动事件。移动端相关的事件： touchstart：手势触碰屏幕是触发该事件； touchmove：手指在屏幕中移动时触发该事件； touchend：手指离开屏幕时触发该事件。实现代码如下：//左右滑动翻页this.$vrTable.on('t
2017-08-03 15:33:01
17384
1
原创 xsl模板学习笔记
好久没有学习了。这是最近接触的一些模板学习笔记。xsl是将xml转化为HTML的一种模板。通过XPath来获取xml的节点路径等信息。工作原理为：使用XPath来匹配xml中定义的部分，找到之后将该部分转化为指定的结果文档。直接进入主题：<xsl:stylesheet>元素以及<xsl:transform>元素类似于HTML文件一样，需要对文档进行声明，其中以下两种方式均可：代码如下：<xsl:st
2017-07-21 15:45:32
1619
原创 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
2220
翻译 Jasmine文档（三）
前言这是我翻译的Jasmine文档第三篇，前两篇文章的地址为： Jasmine文档（一） Jasmine文档（二）匹配全局jasmine.anyjasmine.any传递一个构造函数（constructor）或者“类”（class）作为一个期望值，如果实际构造函数和传递的参数相同则返回true。例如： describe(“jasmine.any”, function() { it(“m
2016-08-05 17:01:43
2047
1
翻译 Jasmine文档（二）
前言这是翻译的Jasmine文档第二篇，第一篇文章的地址为： Jasmine文档（一）Spies（间谍）Jasmine有称为间谍（spies）的测试双重功能。一个spy可以监测任何函数的调用和参数的调用痕迹。Spy只能存在于定义它的describe()和it()代码块内，而在每一个spec结束后将被移除。（这个语法在Jasmine2.0才改变的） 有几个特别的Matchers于spy相互作用：
2016-08-05 16:43:56
2772
翻译 Jasmine文档（一）
前言之前看了一些关于Jasmine的文章，后来在官网上看到了文档，试着自己翻译了一下，有问题的欢迎大家指正哈。 官网地址为：Jasmine官方文档介绍Jasmine是一种用于测试JavaScript代码的行为驱动开发框架。它不依赖于其他任何JavaScript框架。它也不需要一个DOM结构。它有一个干净、清晰的语法，所以你可以很轻易地书写单元测试代码。本指南是针对于Jasmine2.4.1版本。d
2016-08-04 18:44:00
3719
原创 组件单元测试开发过程小总结
前言最近在开发公司内部公共组件的使用样例和代码单元测试。 具体单元检测框架的知识，可以查看另一篇博文： 单元测试框架Jasmine学习笔记开发过程中遇到的一点问题就容易纠结很久，为了能够吸取教训，特地将遇到的问题记录下来，避免以后能够再犯，并且加深对代码原理的理解。问题1：ES6语法的文件引用ES6使用export导出模块时，代码如下：export default { //导出模块}
2016-07-29 19:54:15
1029
原创 单元测试框架Jasmine学习笔记
前言实习期间接触很多新东西。最近又在学习如何写一个独立的测试单元。看了公司前人的代码，后来网上搜寻了相关的知识，打算还是将自己的理解简单写下来。Jasmine简介Jasmine是一种JavaScript的测试框架，它不依赖于其他框架，也不依赖于DOM结构。其语法特点在于简单清晰，就算是刚入门没多久的JavaScript程序猿也能够写出简单的测试单元代码。Jasmine下载下载地址为： https:
2016-07-27 10:24:39
3539
原创 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
1588
原创 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
688
原创 require.js理解
前言实习过程学习了require.js的相关内容，也在网上查阅了一部分资料，相比于其他框架，require.js更为简单易学，也更容易使用。 下面我就简单介绍我所认识的require.js，希望大家能够多多指教！Require.js的优缺点优点：正如我前面所提到的，require.js框架相对较小而且相对简单使代码模块化异步加载js文件，防止请求阻塞代码模块化能够使代码称为一个个相对独立的
2016-07-01 09:51:10
2186
原创 git简单操作
前言之前没有尝试过使用git，在实习过程中对git命令有了简单的了解。 下面对我所知道的git命令进行简单的介绍。 当然，本地环境必须安装配置git环境，这个相对简单（困难在于安装之后配置系统环境变量）。从git上克隆项目是一开始将前人的代码下载到本地的直接方法。代码如下：git clone git@localhost:abc/bcd/de.git上述代码是从ssh地址为git@localhos
2016-06-30 16:25:56
590
原创 jQuery源代码自我理解（一）
自己看的源代码，可能理解的不够透彻，但是自己看过一遍感觉还是比较不一样的。希望各路大神多多指教！下面是自己写的其他源码理解文章： jQuery源代码自我理解（二）前面的if判断是否存在commonJs运行环境，若没有，直接执行else的内容。 if ( typeof module === "object" && typeof module.exports === "object" ) {
2016-06-23 22:59:58
1262
基于 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关注的人