随笔分类 - JavaScript
抛砖引玉：纯前端代码让手机变为一把吉他
摘要：前言 前段时间一时兴起想学一下吉他，但是一门乐器要演奏成“能听”的程度也不是一天两天的事情，对我这种音乐基础为 0 的人来说学习周期太长了，不想耗费太多时间在学习乐器上面，于是想找个取巧的方法。 最终方案就是做了个简单粗陋的微信小程序 Demo 去弹奏吉他乐，勉强算是成功吧，可以很简单地弹奏出乐曲。
阅读全文
反压缩 js ，我的万花筒写轮眼开了，CV 能力大幅提升
摘要：前言 因为比较菜，所以经常需要读一些别人的代码学习学习。 有源码的代码当然好，但是很多网站不开源。这些网站的 js 又都是打包压缩过的，学习起来很难受。 所以我做了一个小工具，通过修改抽象语法树，来处理这些打包压缩过的 js，增强代码可读性，让我们学习起来更容易。 如果再借助重定向线上 js 到本地
阅读全文
自定义布局页面的思路与实现
摘要：前言 最近做了一个需求：自定义首页。 用户或运营可以自己修改首页的布局，做到千人千面。 这个需求类似于当年的自定义QQ空间，不过怕是年轻一些的没玩过这个东西。 所以你也可以简单理解为是博客园的皮肤，只是不能写样式和代码，但是可以调整各个组件的布局。 明确需求 这并不是一个低代码页面设计器，不是给程序
阅读全文
jQuery源码中的赌博网站
摘要：前言 下班了，没想到这篇文章还能引起争议，那就更新一波放在最开头吧。 这里并没有恶意攻击jQuery的意思，只是部分官方渠道源码中确实存在垃圾网站。 另外大量的非官方渠道版本中确实存在赌博网站和黄色网址。 写这个的目的，仅仅只是提醒各位自查和觉得有趣。 还有我写文章主要是给自己看，没想过博眼球，也不
阅读全文
自制Chrome扩展插件：用于重定向js
摘要：前言 作为一个前端开发， 在调试生产环境的代码时，是否苦于生产环境代码被压缩，没有sourcemap？ 有没有想过将生产环境的js直接重定向为本地开发环境的js？ 玩微前端时，有没有想过用本地的子应用js去替换线上的子应用js？ 或者有没有想过修改别人网站的文件，直接完成某些非常规操作？ 最近因为项
阅读全文
微前端框架single-spa初探
摘要：前言 最近入职的一家公司采用single-spa这个微前端框架，所以自学了此框架。 single-spa这个微前端框架虽然有中文文档，但是有些零散和晦涩。 所以我想在学习之余，写篇博客拉平一下这个学习曲线。 什么是微前端？ 微前端的灵感来源于服务端微服务的理念。 可以简单理解为，在开发一个复杂前端应
阅读全文
纯js制作的XML在线编辑器（支持修改本地文件）
摘要：前言 一年多没更新博客了，原因是疫情期间《骑马与砍杀2》发售，然后去写游戏MOD去了。 用C#大概写了7个月的游戏MOD，每天晚上肝到很晚，然后期间又因为介绍这个游戏MOD，学习了PR，然后做起了B站的UP主。 再到后面有了些别的想法和公司业务调整，也懒得写博客，不知不觉一年多也就过去了。 收获还是
阅读全文
Chrome开发者工具使用指南
摘要：前言 工欲善其事，必先利其器。 在前端工作中，我们常常使用到Chrome开发者工具去做各种各样的事情。 但是您真的了解这些开发者工具吗？ 官方文档还是挺详细的： "chrome devtools文档" 。 但是文档中仍然会有一些功能没有描述到或者被一笔带过。 而我的这篇指南，会略过那些一目了然的功能
阅读全文
《古剑奇谭3》千秋戏辅助工具（前端React制作）
摘要：前言 一直身在武汉，基于众所周知的疫情原因，这个春节只能宅着。 不过其实这个春节是这些年来过得最爽的一个了。 没有鞭炮，不用四处跑，安安心心呆在家里玩玩游戏看看书写写代码，其实日子过得还是挺悠闲的。 废话少说，这段时间买了《古剑奇谭3》，全成就拿齐了之后，就抽了点时间来分享在玩游戏的过程中自制的一个
阅读全文
分享一个博客园皮肤制作脚手架
摘要：前言 最近本着新年新气象的想法，想换套新的博客园皮肤。 之前自己做了一套制作皮肤的解决方案，这是当时分享皮肤以及解决方案的博客： "分享一款博客园皮肤及其解决方案" 。 不过在制作新的皮肤过程中，使用这个解决方案时还是遇到了很多问题。 而为了更方便地制作新皮肤，就升级了原先的解决方案，搭建了这套博客
阅读全文
React中useEffect的源码解读
摘要：前言 对源码的解读有利于搞清楚Hooks到底做了什么，如果您觉得useEffect很“魔法”，这篇文章也许对您有些帮助。 本篇博客篇幅有限，只看useEffect，力求简单明了，带您到React Hooks的深处看看 按图索骥找到Hook相关源码（可以直接跳） 首先我们从Github上得到react
阅读全文
关于为什么使用React新特性Hook的一些实践与浅见
摘要：前言 关于Hook的定义官方文档是这么说的： Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 简单来说，就是在使用函数式组件时能用上state，还有一些生命周期函数等其他的特性。 如果想了解Hook怎么用， "
阅读全文
使用@babel/preset-typescript取代awesome-typescript-loader和ts-loader
摘要：前言 之前写过一篇旧React项目安装并使用TypeScript的文章： "在React旧项目中安装并使用TypeScript的实践" 。 博客里使用awesome typescript loader对Typescript代码进行检测和转换。 而这几天又修改了一下自己的脚手架，使用@babel/pr
阅读全文
使用dva改造React旧项目的数据流方案
摘要：## 前言 最近在给自己的脚手架项目转到TypeScript时，遇到了一些麻烦。 项目之前采用的是react + react-redux + redux-thunk + redux-actions +redux-promise的体系。 当项目转TypeScript时,react和react-redu
阅读全文
在React旧项目中安装并使用TypeScript的实践
摘要：前言 本篇文章默认您大概了解什么是TypeScript，主要讲解如何在React旧项目中安装并使用TypeScript。 写这个的目的主要是网上关于TypeScript这块的讲解虽然很多，但都是一些语法概念或者简单例子，真正改造一个React旧项目使用TypeScript的文章很少。 所以在这里记录
阅读全文
安利一个绘制指引线的JS库leader-line
摘要：前言 之前看到一篇推荐 "Magi" 这个搜索引擎的新闻，对于这个搜索引擎是否好用咱们不予置评，但是我在这个搜索引擎上面发现了一个好玩的前端功能。 如上图，将鼠标浮动到学习来源上时，会展示一堆指引线。 本博客的右侧文章目录也集成了这个功能，诸位可以玩一玩。 当时觉得这个功能很好玩，而且前端领域其实这
阅读全文
天坑之路：用js给选中文字添加样式
摘要：前言 本例基于react，但是实际上就是用原生js做的。兼容性做到了IE9，但是按照这个思路做是可以做到IE8甚至更低的。 需求与最初的思路 当我拿到这个需求的时候以为很简单，就是可以给页面上的文章做记号，比如添加个下划线，或者背景涂色做成荧光笔的样子。 因为只需要兼容IE9，所以window.ge
阅读全文
实现可调整宽高的DIV（左右拖动和上下拖动）
摘要：前言 本例是在React中实现，不过改一改通过原生js也很好实现，另外兼容性也做到了IE9。（IE8讲道理也是可以的）。 首先看一下需要实现的需求： 要拖动图中的白色横条调整绿色和蓝色区域的高度，要拖动白色竖条调整左边区域和红色区域的宽度。 一两年前曾经遇到过这个需求，当时直接在网上搜了个解决方案贴
阅读全文