vavr
你的地图是一张白纸，所以即使想决定目的地，也不知道路在哪里。——《解忧杂货店》 分享一个java函数式库，简介我们的代码：https://www.vavr.io/ 首先我们引入： 12345<dependency> <groupId>io.vavr</groupId> <artifactId>vavr</artifactId> <version>1.0.0-alpha-4</version></dependency> 文档：https://docs.vavr.io/ 例如以前我们编写类似代码： 1234int divide(int dividend, int divisor) { // throws if divisor is zero return dividend / divisor;} 可能会抛出除0异常 使用vavr： 1234// = Success(result) or Failure(exception)Try&l...
vue2配置vite
天可补，海可填，南山可移。日月既往，不可复追。——曾国藩 本篇博客针对新vue2项目，老项目就先不说了哈哈(坑太多) 首先新建一个vue2项目 1vue create simple-vue2-vite 选择Default ([Vue 2] babel, eslint) 1234567891011success Saved lockfile.Done in 3.92s.⚓ Running completion hooks...📄 Generating README.md...🎉 Successfully created project simple-vue2-vite.👉 Get started with the following commands: $ cd simple-vue2-vite $ yarn serve 安装完毕后我们进入，执行 12cd simple-vue2-viteyarn serve 可以看到正常运行： 我们首先安装vite 1pnpm i -D vite vite-plugin-vue2 根目录新建一个vite.config....
chrome复制、导出请求
一个人的行动，比他所说的话，更有详细的表现。——卡耐基 可以通过右键点击我们的请求，进行重放，这样就能发起相同的请求 也可以复制出来，例如以fetch格式复制 复制出来后，粘贴是这个样子： 1234567891011121314151617181920fetch("https://api.bilibili.com/x/space/acc/info?mid=34830549&jsonp=jsonp", { "headers": { "accept": "application/json, text/plain, */*", "accept-language": "zh-CN,zh;q=0.9", "cache-control": "no-cache", "pragma": "no-cache", "sec-c...
fokus
死亡，就是你加上这个世界，再减去你。——卡尔维诺 分享一个好玩的开源项目，演示地址： https://lab.hakim.se/fokus/ 代码仓库：https://github.com/hakimel/Fokus 演示效果： 当我们在页面上框选时，会在页面上加个蒙版，高亮框选区域 使用方式，首先下载fokus.min.js 官方链接 备用链接 然后引用 1<script src="/js/fokus.min.js"></script> 最后编写代码(随便写点) 1234567891011121314151617181920212223242526272829303132333435363738394041<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont...
opencc4j
“不用给我爱，不用给我钱，不用给我声誉，给我真理吧。我们应该有勇气去面对真实的内心，即使前面荆棘满地，也要坚定地走下去。为了不浪费你的这一辈子。”——梭罗《瓦尔登湖》 分享一个java简繁转换的库opencc4j https://github.com/houbb/opencc4j Group ArtifactId Version 12345<dependency> <groupId>com.github.houbb</groupId> <artifactId>opencc4j</artifactId> <version>1.7.2</version></dependency> 使用起来： 繁简体转换转为简体123String original = "生命不息，奮鬥不止";String result = ZhConverterUtil.toSimple(original);Assert.assertEquals("生命不息，奋斗不止...
overflow和动态计算高度
人们总会找到某种带头人,把他供奉起来,培养成伟人……暴君就是这么来的;暴君最初都是以保护者的形象出现的。——柏拉图,《理想国》 首先是MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow 其中对overflow进行了描述： CSS 属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是 overflow-x 和overflow-y的 简写属性 。 重点在这里： 为使 overflow 有效果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap。 那问题来了，我这里有一个折叠面板 我希望这里多个折叠面板每一项的头部都能显示在页面中，并且其子项能够适应屏幕高度和折叠情况变化 为了实现上面的效果，我们需要在每一个折叠面板子项中设置overflow-y:auto，然后给其设置height或者max-height 我们知道css中有个计算函数calc可以计算我们的高度，这里的卡片为了保证屏幕自适应，可...
htmlToCanvas
利用时间是一个极其高级的规律。——恩格斯 今天分享一个html转canvas的插件： http://html2canvas.hertzen.com/ 使用方式特别简单： 引入： 12pnpm install --save html2canvas# import html2canvas from 'html2canvas'; 或者直接上link 1<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> 需要转换的html节点 123<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4></div> 使用： 123html2canvas(docu...
ts装饰器(注解)
书，能保持我们的童心；书能保持我们的青春。——严文井 官方文档：https://www.typescriptlang.org/docs/handbook/decorators.html 这个东西在java里叫注解，不过在ts中，一个装饰器对应一个方法 首先执行命令： 1tsc --target ES5 --experimentalDecorators 然后配置一下tsconfig.json就可以使用了 123456{ "compilerOptions": { "target": "ES5", "experimentalDecorators": true }} 首先我们定义一个class 1234class User { private id: Number | undefined; private name: string | undefined;} 我们编写一个装饰器对应的逻辑，实现ja...
虚拟列表
我来到这个世界，为了看看太阳和蓝色的地平线。——《城门开》 分享一个vue虚拟列表的组件： https://github.com/tangbc/vue-virtual-scroll-list 官方文档： https://tangbc.github.io/vue-virtual-scroll-list 沙盒： https://codesandbox.io/s/live-demo-virtual-list-e1ww1 使用方式： 1pnpm install vue-virtual-scroll-list --save 示例： 12345678910111213141516171819202122232425<template> <div> <virtual-list style="height: 360px; overflow-y: auto;" // make list scrollable :data-key="'uid'" :data-sources=&q...
ts中枚举
现实生活喜欢对称和轻微的时间错移。——博尔赫斯《南方》 填坑，官方文档：https://www.typescriptlang.org/docs/handbook/enums.html 我新建了一个vue项目用来演示 这里代码如下： 12345678910enum Direction { Up, Down, Left, Right}console.log({ Direction });console.log({ 'Object.entries(Direction)': Object.entries(Direction) });console.log({ 'Direction[0]': Direction[0] });console.log({ 'Direction.Up': Direction.Up }); 打印结果如下： 定义一个双向绑定的值 1const count = ref(Direction.Up)...