Pluto

原创 速通《深入理解Java虚拟机》| 第一章 走近Java

上机实验详情请见：https://juejin.cn/post/7264503091121979407。

原创 windows环境下编译OpenJDK12

环境：Windows11。

原创 解决zipvscode+flutter卡在Running Gradle task assembleDebug

解决卡在Running Gradle task assembleDebug的问题

原创 C++递归删除目录下所有文件(macOS和windows两种)

最近各种搞C++文件操作, 顺手记录一下也可以加个系统判断把这两段结合起来写个兼容方法macOS#include <dirent.h>#include <iostream>using namespace std;void removeDir(const char* dirPath){ struct dirent *dirp; cout << "dirPath:" <<dirPath << endl; DI

原创 纯css实现优惠券效果

最近UI小姐姐休假了，优惠券缺了我几个切图，不好意思打扰人家，就寻思着，干脆用css直接手写吧。这里记一下实现思路。先来看看效果图：看着还行叭。主要是这几个地方的样式：左上角书签；优惠券票孔；右上角状态标签。1. 左上角书签书签这里又分成两个部分，一部分是整体的半圆角矩形，一部分是左上的那个小折角。半圆角矩形很好实现：height: 20px;border-radius: 0 20px 20px 0;小折角是利用绝对定位和skew变换： display:

原创 JS脱敏处理-只展示前x和后x位

/** * 脱敏处理，加*号，只展示前preLen位和后subLen位 */function desensitize = (str = "", preLen, subLen = 0) => { if (!str) { return str || ""; } str = str.toString(); const len = str.length; const subIndex = len - subLen > preLen ? len - subLen : pr

原创 闲聊两句吧

言论防骗指南：你挣不到认知之外的钱。高效能人士的七个习惯：习惯一：积极主动——个人愿景的原则习惯二：以终为始——自我领导的原则习惯三：要事第一——自我管理的原则习惯四：双赢思维——人际领导的原则习惯五: 知彼解己——移情沟通的原则习惯六: 统合综效——创造性合作的原则习惯七：不断更新——平衡的自我更新的原则我们终此一生，就是要摆脱他人的期待，找到真正的自己。——《无声告白》最大最小后悔值法，又名最小遗憾值法：首先计算各方案的最大后悔值，然后进行比较，再选择最大后

原创 从一个简单的反爬小技巧说起

最近修仙时发现了很多有意思的反爬技巧，今天就从一个最简单的反爬技巧说起：debugger。1、反爬开始debugger 是个断点调试语句，在正常情况下是不会被触发的，只有当有调试器可用的时候，如用户打开了控制台，才会进入断点调试。只有一句debugger，用户点一下蓝色小箭头就可以跳过。但，如果我们有无数debugger呢？没错，就是这么粗暴：const debug = new Function('debugger');setInterval(debug, 0);这里用定时器不断调用

原创 当我们谈Currying时，我们在谈些什么

在数学中，函数是集合到集合的映射，即集合 A 中的元素，经过处理后，映射到集合 B 中的元素。可以简单表示如下：f(A)->B函数式编程，顾名思义，就是用函数的方式去编程。关于函数式编程的起源可以追溯到20世纪初的λ演算。在λ演算中，函数只有一个参数，为了实现多参数，于是出现了函数的柯里化(currying)，本质上是单参数函数的语法糖。所谓柯里化，可以理解为把多参数的函数，转换成单参数的函数链，简单表示如下：f(X1, X2, …, Xn)->->g(X1)(X2)…(Xn

原创 当面试官问你“前端如何渲染海量数据”的时候他在想什么？

当面试官问你：**“前端如何渲染海量数据”**的时候，他在想什么？你可能会觉得他在想peach，毕竟这种问题在实际业务中出现的频率低到陨石撞地球，但是，他还是想问你。暴力渲染也不是不可以，就是用户体验不太好，甚至浏览器可能会崩溃。既然如此，海量数据，后端就是不给分页，那就前端做个分页呗。比如一页10条，可以用setTimeout渲染完10条再渲染10条，也可以优化一下，用requestAnimation使其丝滑。你自信满满给出答案，然后面试官又问：“还有吗？”你内心已然掀桌，但却依旧面带微笑地回

原创 硬核！手撕源码第一弹：UpdateNotifier

目录项目简介源码分析动手实现总结1、项目简介update-notifier是yeoman团队出品的，之所以选择这个项目，主要是大佬推荐，其次是，项目体积只有15.3kB，功能也不复杂，在github上目前有1.6k star，比较适合当作入门源码。update-notifier用于检查包的当前版本是否是最新版本，如果不是，则提示更新。这个项目的使用场景一般是脚手架应用，可以在npm主页上看到有哪些项目用到了update-notifier：我去考证了一下，实际上npm只在早期版本

原创 【闲聊】前端转后端是一种怎样的体验

大家好，我来划水了~最近后端团队在重构项目，时间紧任务重，刚好我前段时间手头基本完事，又因为之前和领导说过我曾经写过一点后端，所以领导说：“要不你来帮忙写几个接口吧。”于是我就屁颠屁颠跑过去和后端xdm写接口了。当然，我的后端水平实在太菜惹，只能写些简单的CURD。你问我写后端什么感受？就一个字，太累了。反正我最近是真切感受到996福报了。上周加了个前端源码阅读小组，然后看了个 package.json 就没有然后了，代码根本写不完，明天还要来公司加班。现在写后端相当不熟练，一整天就算

原创 当程序员遇到会写代码的产品经理......

1、缘起事情是这样的，上周我接到了个需求，产品经理想在微信内嵌的H5里，静默获取图片的详细信息，比如拍照的时间、地理位置、设备指纹等。一方面最近活儿太多影响我摸鱼，另一方面是这个需求没办法完全实现，因为有些图片信息就是没有，又懒得解释，于是我和产品经理说：这个需求做不了。原以为事情到这里就结束了，万万没想到，我遇到了一个会写代码的产品经理…第二天早上，我的直属技术领导直接找到了我，和我说：“xxx(产品经理)”把获取图片信息的Demo写出来了，这个需求可以做，之后就你来吧。当时我的内心是这样的

原创 手摸手写个webpack loader

目录：基本概念loader开发入门本地loader调试发布并引用loaderDemo: 雪碧图loader1. 基本概念众所周知，webpack是个模块打包器。但是webpack只能处理js和json文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。loader本质上是一个导出函数的JS模块，函数的入参和出参可以理解为文件流(String或Buffer类)，函数对传入的文件流进行处理，然后返回处理后的

原创 手摸手写个webpack loader

目录：基本概念loader开发入门本地loader调试发布并引用loaderDemo: 雪碧图loader1. 基本概念众所周知，webpack是个模块打包器。但是webpack只能处理js和json文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。loader本质上是一个导出函数的JS模块，函数的入参和出参可以理解为文件流(String或Buffer类)，函数对传入的文件流进行处理，然后返回处理后的

原创 前端开发人员成长路线

原创 这锅我背了......

目录防抖(debounce)节流(throttle)防抖和节流的区别上周写了个表单，没仔细看Toast的遮罩配置，以为和之前一样都是默认开启的，然而实际上是被关了，又因为我偷懒没给按钮加防抖节流，于是出现了用户重复提交多条数据的情况…默默掏出小本本记下仇：究竟谁关了我的遮罩按钮 一定要记得加防抖节流！！！好了，言归正传，来复习下防抖节流。1、防抖防抖，debounce。这个概念最早来自于相机，现在流行的相机防抖原理也分很多种，有镜头防抖、机身防抖等，我们代码里的防抖比较类似软件防抖：

原创 requestAnimationFrame

目录浏览器渲染过程requestAnimationFrame应用案例：进度条&文字跑马灯浏览器兼容性1. 浏览器渲染过程浏览器通过http请求获取到资源之后，会将HTML解析成一棵DOM树，并根据CSS构建一棵CSSOM树，然后将DOM树和CSSOM树结合，组合成一棵Render树；再根据Render树进行布局(layout)，即确定每个树节点的宽、高、位置及元素之间的位置关系(第一次确定节点的大小和位置称为布局。随后对节点大小和位置的重新计算称为重排(reflow)，也有些文章称之

原创 ES2021新特性解读

目录提案流程ES2021新特性提案流程一个新特性从提出到最终纳入标准，需要经历5个步骤：ECMAScript标准是TC39(ECMA国际组织第39号技术委员会)制定的，更多有关提案的信息可以到官网上查看：https://www.ecma-international.org/technical-committees/tc39/。ES2021新特性截止目前，2021年已有5个新特性到了stage4：String.prototype.replaceAll2021Promise.any

原创 用魔法打败魔法：前端代码规范化

目录工具简介实现思路具体实现总结附录代码千万行，规范第一行。编码不规范，同事两行泪。早几年接手过一个项目，一堆bug不说，代码还又臭又长，据说之前写代码的那位仁兄经常改一个bug又带出十个bug????项目里充斥着各种含义不明的变量、没有用到的不知道从哪里复制粘贴过来的函数、乱七八糟的console、随心所欲的空行和毫无意义的注释……很多程序员没有代码规范意识，经常觉得只要功能能用就行了，代码规范浪费时间，于是写出来的代码过一段时间可能连自己都看不懂是坨什么东西，更不用说接手的同事

原创 聊聊我司的git工作流......

最近新来了个萌新，一顿操作猛如虎：有时直接把其他同事的代码给覆盖没了，有时忘了把代码合并到要投产的分支，有时直接改投产分支代码……分析原因：一是公司没有对新人进行相关培训，或者哪怕就给个规范文档；二是之前的git工作流也没有形成规范，大家就各自按照自己的理解去操作(不理解的就瞎操作=o=)。今天就聊聊我们团队不规范的git工作流。我们的项目里日常一般有这么些分支：feature-日期：这个日期是以发版日期来确定的，比如每月的8号、22号是发版日，那么就会在上一个版本发完后拉下一个发版日期的分支

原创 手摸手教你搭个脚手架

目录脚手架全局命令交互式输入拉取远程仓库代码优化总结1、脚手架今天工地的砖有点烫，我抬头望了望天，思考了半分钟，决定为了以后搬砖方便，先搭个脚手架：不好意思，拿错了，是这个：相信很多小伙伴都用过vue-cli、create-react-app或angular-cli之类的脚手架，一个命令行就能快速搭起项目框架，告别刀耕火种的复制粘贴，分分钟解放生产力。作为一个有追求的切图仔，这种摸鱼神器，必须立马安排。好了，那么问题来了：什么是脚手架？从表现形式上来看，脚手架主要有以下几

原创 手摸手教你写个chrome插件

目录需求分析官网Demo入门Manifest配置文件实现思路核心代码实现效果不知道大家有没有过类似的经历，查阅资料时经常会打开一堆临时tab标签，不至于到要加入收藏夹的地步，但是直接关了再找又麻烦，而且挤挤挨挨的一堆找起来也很费眼睛…有没有什么工具能保存下我打开的tab，并且能方便地查看？受到印象笔记剪藏插件的启发，我找到了个插件OneTab，可以一键关闭所有标签页并保存到一个页面中：出于好奇，我去了解了下：如何写一个chrome插件？再次打开一堆tab…写一个chrom

原创 手摸手教你搭建npm私有库

最近终于有时间可以做一些业务需求之外的东西了，就把组件库需求提上了日程。对于一些不适合开源的组件，我想到了搭建私有npm仓库。于是我跑去咨询了一下有经验的大佬，大佬微微一笑，说：verdaccio。这是个啥？果断打开github搜索关键词，果然不出我所料，这是一个坐拥11.8kstar的开源库（https://github.com/verdaccio/verdaccio）。总而言之，这是一个搭建npm仓库的工具。出于好奇，我去维基百科了一下这个单词：verdaccio是意大利语，意为黑色

原创 在线博客转PDF电子书 | JS爬虫初探

最近在看一位大佬写的源码解析博客，平时上下班用手机看不太得劲，但是平板又没有网卡，所以就想搞个离线pdf版，方便通勤时间学习阅读。所以，问题来了: 怎么把在线网页内容转成pdf？这位大佬的博客是用gitbook写的，我先上网搜了下工具，发现大多是将自己本地gitbook转pdf，只有一个开源工具是用python爬取的在线gitbook，但是一看issues，中文乱码、空白页、看不到图等等问题都没解决，遂放弃……经过我不懈的搜索，终于找到了一个可以直接把网页保存成pdf工具：phantomjs。pha

原创 [高效工具]vscode配置jsx模板

首先打开vscode，菜单选项：File>Preferences>User Snippets>javascritreact.json文件内容改为：{ "JSX": { // 函数式组件 "prefix": "jsx", "body": [ "import React, { useEffect, useState } from \"react\"", "", "function DemoPage$1 (props){", "\tuseEffect(()

原创 源码学习之Mustache(双大括号)正则解析

目录1. 正则语法2. defaultTagRE解析3. exec()检索匹配var defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g;这句就是Vue源码中，用于匹配双大括号的正则语句。1. 正则语法先来复习一下这句正则表达式里出现的一些语法：\{表示匹配左花括号\}表示匹配右花括号()标记一个子表达式的开始和结束位置?:表示匹配内容，但是不捕获内容.号匹配除换行符 \n 之外的任何单字符|表示或，即两者之间满足一个即可匹配\r匹配回.

原创 解决 wx is not defined，调用wx.getLocalImgData微信API的报错

先上解决代码：wx.config之后，调用wx.chooseImagewx.ready(() => { wx.chooseImage({ count: 9, // 最多可上传 sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有 success

原创 源码学习之noop

/** * Perform no operation. * Stubbing args to make Flow happy without leaving useless transpiled code * with ...rest (https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/). */function noop(a, b, c) { }这是一段vue2里的源码。noop，是No Operatio

原创 源码学习之void 0

今天看源码的时候看到 void 0 这样的写法，平时在业务代码里基本没有这样的写法，于是学习了一下。在控制台运行了一下void 0，得到返回值是undefined。在MDN上搜了一下void，了解到：void是个运算符void用于获取原始数据类型undefinedvoid可以将function关键字识别为函数表达式（立即执行函数）void可以用于箭头函数以避免泄漏以vue的源码为例： var createEmptyVNode = function (text) { if (te

原创 源码学习之noConflict冲突处理机制

最近接手了一个古早项目，用的backbone，于是正好学习一下早期MVC框架的源码。这篇主要写冲突处理机制，源码其实就一个函数，代码也很短。原理也很好理解，总结起来就是：每执行一次noConflict()函数，框架就往前回退一个版本。这个 回退版本的意思是，当你引用多个backbone.js时，比如按顺序引入了v1、v2、v3，按照正常情况，你现在拿到的是v3，当你执行一次noConflict()之后，你就会回退到v2，再执行一次noConflict()，你就回退到v1，再再执行一次noConflict

原创 ssh免密登录

A服务器要免密登录B服务器，在A服务器执行ssh-keygen，生成两个密钥，这两个秘钥在用户目录：~/.ssh下，将其中的公钥文件id_rsa.pub中的内容，复制追加粘贴到B服务器的~/.ssh下的authorized_keys中即可。注意用户名和端口号。如root用户免密登录22端口：ssh [email protected]...

原创 前端模块化

《源码学习之前端模块化》一、什么是模块化模块化并不是前端独有的思想。模块化是一种自顶向下的过程，通过把一个大的系统，逐步划分为一个个小的模块，这些模块内部封装了一些特定的功能，通过约定的接口对外暴露。各个模块之间互不干扰，易于插拔。模块化可以解耦代码，更好地进行复用，每个模块之间互不影响，不用担心变量污染、命名冲突等问题，同时也有利于并行开发，提升效率。js最初是没有模块化的。随着前端应用越来越复杂，比如，当一个html页面要请求多个js文件时，如何保证这些js文件之间的变量互不干扰？为了解决诸如变

原创 【bug】解决nodejs的post请求只有option预请求

在app.js里添加这段：app.all('*', function (req, res, next) { res.header('Access-Control-Allow-Origin', "*"); res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type'); res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, O

原创 node+express连接mysql数据库并实现get请求demo

npm install mysql --save安装成功后// dao.jsvar $sql = require('./sqlMapping'); // 这个文件是定义sql语句的var mysql = require('mysql');// 采用连接池连接var pool = mysql.createPool({ host: '127.0.0.1', user: 'root', password: '123456', database: 'database_te

原创 shell循环判断数组中的文件夹是否存在，不存在则创建，存在则进行清理

arr=("a" "b" "c")for folder in ${arr[@]}do #如果文件夹不存在，创建文件夹 echo $folder if [ ! -d "$folder" ]; then mkdir "$folder" echo $folder else # 如果存在则清理文件夹 rm -rf $folder/* fidone

原创 shell列出文件夹下的文件及其更新时间

ls -l --time-style=iso

原创 Javascript标准内置对象Proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。语法：const p = new Proxy(target, handler)target：要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。handler：一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。handler 对象的方法handler 对象是一个容纳一批特定属性的占位符对象。它包含有

原创 【Javascript】Object.prototype

几乎所有的 JavaScript 对象都是 Object 的实例；一个典型的对象继承了Object.prototype的属性（包括方法）。存在两种不具备原型链的创建Object的方法：Object.create(null)和Object.setPrototypeOf(obj, null)。通过Object.create(null)创建的对象没有prototype：var a = Object.create(null);var b = {}console.log(a); // 没有prototy

原创 【Javascript】Object.defineProperty()

语法：Object.defineProperty(obj, prop, descriptor)返回参数中的obj。obj：要定义的对象；prop：要定义或修改的属性的名称（或者Symbol）；descriptor：要定义或修改的属性描述符。descriptor里有以下几种选项：configurableenumerablevaluewritablegetsetJavascript对象有两种描述符：数据描述符和存取描述符。数据描述符没有get和set选项，存取描述符没有valu