Hexo

需求是写一个小程序，用来实现一个app大部分功能。里面有个功能是列表的左划删除，可能app那边有现成的组件/库可以用，小程序官方没有提供这样的组件，于是求助于google。 搜到了这个 ,看起来挺好的，但是要求高度固定，我列表里面有图片，我无法确定图片的高度固定，跟相关人员沟通起来又是一堆废话，算是备选。 然后找到了这个 nutui的swipe组件，源码 vue写的，我项目用的是react，不过没关系，vue3的Composition api与react hooks是师出同门。看懂它然后翻译一下(我又找到了一个适合自己的巨人)。 源码解读布局html、css、js永远是一家人，不要看不起html、css，优秀的布局可以省好多代码。 布局分为3部分，content、left、right，content为列表的主要内容，left/right分别表示向右/左滑所展示的额外内容，然后left、right分别绝对定位，并且配合translate移出content的可见范围。 逻辑12345678910111213141516171819202122<tem ...

腾讯课堂“贴心”的给我们提供了回放功能，但是图心理安慰，老想着如何下载下来才安心。（自己看，不传播） 随便打开一个腾讯课堂视频，比如这个 随便找一个。chrome浏览器右击检查，打开开发者控制台，NetWork面板，再次刷新网页，NetWork筛选m3u8关键词。 这便是该视频不同分辨率的资源，这些链接是不能直接下载的，需要解密，用这个 解，貌似c#写的。 对，没错，我就是搬用工，一点技术含量也没有。 如果有多个视频需要下载，上述过程略显麻烦。可以移步火狐浏览器，下载Video DownloadHelper 插件，这玩意能直接识别出资源，并且告诉你不同的分辨率，然后还是需要解密m3u8。 如果需要下载的视频巨多，连用插件copy链接都觉的麻烦，后续看能不能写个爬虫什么的，自动copy链接。然后研究下解密m3u8那工具支不支持批量下载，暂时就这样。

前言作为一个只擅长javascript的伪程序员，学习java还是挺费劲的，不过没关系，再庞然大物，也能分而治之。 google搜内部类，好多文章都说java有四种内部类。成员内部类，静态内部类、局部内部类、匿名内部类。记性好的可以直接记住，彷佛回到了读书时代。 四大内部类成员内部类java是一门强大的面向对象编程语言。在java中，一个类的成员变量，可以是字符串、数字这样的基础数据类型，也可以是数组、Map这样的复杂数据类型，甚至可以是别的类的实例，那为什么不能是一个类呢？ 所以把一个类放在java的成员变量位置上，这个类就是成员内部类，放到静态变量位置上，这个类就是静态内部类。 所以很容易写出这样的代码。 123456789101112131415public class xxxOuterClass { private String a = "1212"; class Inner{ void log(){ System.out.println(a); //标记1  ...

前言项目地址 无意间看到这个库，利用getClientRects与二分法实现多行文字的超出截断，虽说flex更简洁，但是想起我n年前兼容IE时的痛楚，虽说现在不用兼容IE了，但是原理什么的还是忍不住瞅一眼。 关键是知不知道getClientRects 。这玩意兼容性好强大。假如是行内元素调用getClientRects，会返回一个rects集合，这个集合的length就是文本的行数，好简洁，完全不用关心行高什么的。 api tag: 由于内部是由render函数生成的vnode，比起template，tag是可以变的，默认是div。 autoresize: 内部使用resize-detector这个库监听组件的resize事件，size变化时，更新截断状态。 max-lines: 最大行数 max-height: 最大高度。max-height与max-lines指定一个即可。 ellipsis: 省略符号，默认… location: ellipsis的位置，默认end。 expanded: 初始状态是否展开，默认false。 slot default：默认插槽为文本的实际内容（非 ...

前言ahooks算是react hooks生态库重要的一环，其中useRequest算是使用比较多的hooks。（试问哪个前端页面没有http请求） useRequest的自我介绍useRequest 是一个强大的异步数据管理的 Hooks，React 项目中的网络请求场景使用 useRequest 就够了。 useRequest 通过插件式组织代码，核心代码极其简单，并且可以很方便的扩展出更高级的功能。目前已有能力包括…. 主要是第二句：useRequest的核心代码很简单，其他什么防抖、节流都是通过插件实现的。 代码分层带着上一节的官方介绍来看useRequest的代码分层入口文件 123456789101112131415161718function useRequest<TData, TParams extends any[]>( service: Service<TData, TParams>, options?: Options<TData, TParams>, plugins?: Plugin<TData, TParams& ...

前言我们在用react写业务时，常常要处理一些条件逻辑，由于jsx里面只有写表达式，不能写语句，所以有时不得不写一大坨这样的代码。 12345render(){ return ( isMatch ? <CommentA/> : <CommentB/> )} 要么像这样把大片逻辑封装成组件，要么写个函数 12345678render(){ return ( {this.renderComponent()} )}renderComponent(){ return isMatch ? <CommentA/> : <CommentB/>} 这两种方法都不完美，有时候并不想凭空写一个方法或者封装组件，并且代码可读性也不好。 那么有没有更优雅的方法，当然有，所谓前人栽树，后人乘凉，我们只要虚心学习就可以了。 react-whether ,看文档可以去这里，本文介绍的是其源码。 源码解读首先打开src/in ...

前言大数据的列表滚动一直是很头疼的问题，尤其无限滚动这种场景，不像人家安卓，有RecyclerView这种内置组件可以用。前端只能可怜巴巴的自己实现，幸好前人栽树，后人乘凉，业界有同行已经写了一些实现，本文将要介绍的便是其中一种。 https://github.com/hdcoo/recycler-view 大概原理先去这里 ,下载demo源代码，clone下来后npm install,然后访问http://localhost:5211/recycler-view-demo/， 我们要介绍的是经典两列布局的瀑布流，也就是入口是waterfall.js的那个例子。 demo项目运行起来以后，打开控制台发现每个例子的布局都很奇怪。正常情况下我们写一个局部滚动，代码应该是这样的。 可是这个库的布局是这样的 内层元素是以绝对定位+translate的方式“贴”上去的，比起普通的流式布局，这样做的好处是一旦周围的元素有变化（位置变化或者干脆从dom树中删除），主体元素的位置不会变化。我们可以利用这一特性，在页面初始化中只渲染能覆盖一屏的元素个数（假如是15个），在滚动容器的过程中，势必有 ...