b 23
,
r 137
,
❤ 正在询问中

代码片段

  • pubdate:2020-10-20 14:39:50
  • tags:代码片段

简短而又有用的一些代码片段,一般都是 ts 版本 可以利用 TypeScript 游乐场 很方便的将 ts 的代码转为 js 的代码然后使用

依赖浏览器 dom

// 复制文本
export const copy = (str: string) => {
  // 第一种
  navigator.clipboard.writeText(str);
};

export const copy2 = (str: string) => {
  // 第二种
  const input = document.createElement("textarea");
  input.style.opacity = "0";
  document.body.appendChild(input);
  input.value = str;
  input.select();
  const r = document.execCommand("copy");
  input.remove();
  return r;
};

纯粹无依赖

Array

数组求和

/** 数组求和 */
export function ArraySum<T>(arr: T[], f: (el: T) => number) {
  return arr.map(f).reduce((a, b) => a + b, 0);
}

数组取随机 n 个元素

/** 从数组中随机取 n 个元素 */
export function sampleSize<T>([...arr]: T[], n = 1) {
  let m = arr.length;
  while (m) {
    const i = Math.floor(Math.random() * m--);
    [arr[m], arr[i]] = [arr[i], arr[m]];
  }
  return arr.slice(0, n);
}

今天(2020-11-17)发现 GitHub 的消息那里的分页也是存在问题的,就是在一开始如果有两页数据一直点已读然后点下一页发现是空的,再点上一页才能看见消息


数组去重 & 求和

/** 数组去重
 * 1. 可以设置函数来决定什么样算重复
 * 2. 可以设置函数来决定遇到重复的结果该怎么合并
 */
export function Array去重<T>(
  arr: T[],
  /** 需要返回该对象的一个唯一标识(需要是原始值 用于和其他的进行比较) */ f: (el: T) => unknown = (el: T) => el,
  /** 用于决定和重复对象的合并方式,默认取后面的值,丢弃旧值 */ mergeF: (a: T, b: T) => T = (a, b) => b,
) {
  let result = [] as T[];
  let label = [] as unknown[];

  for (const el of arr) {
    const id = f(el);
    const i = label.findIndex((el) => el === id);
    if (i !== -1) {
      result[i] = mergeF(result[i], el);
    } else {
      label.push(id);
      result.push(el);
    }
  }

  return result;
}

ts 版 防抖函数

type unPromise<T> = T extends Promise<infer R> ? R : T;

export function debounce<T extends (...args: any) => any>(fn: T, time: number) {
  let timeout = 0; // 创建一个标记用来存放定时器的返回值
  return function (this: any, ...args: any) {
    return new Promise<unPromise<ReturnType<T>>>((resolve, reject) => {
      clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
      timeout = setTimeout(() => {
        // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话,就不会执行 fn 函数
        resolve(fn.apply(this, args));
      }, time);
    });
  };
}

#日常# 新增整理 : css伪类


#日常# 今天突然发现在 爱发电 image.png 收到了 5 元的赞助,非常开心 ヾ(≧▽≦*)o


#日常# 新增文章 : vue动态引入替换组件


#日常# #闲评# 2021年了 微信小程序还不支持 first-of-type 微信社区相关 image.png


css 实现列表左侧线条样式,起始和结束少一半的线条长度。还有一个思路是 在第一个和最后一个元素上使用和背景色相同的颜色来覆盖原先的线条

  .c-item::before {
    content: "";
    --h: 100%;
    --h2: 0%;
    width: 1px;
    height: var(--h);
    background: #cccccc;
    position: absolute;
    left: 0px;
  }
  .c-item:nth-child(1)::before {
    --h2: calc(var(--h) - 50%);
    height: var(--h2);
    transform: translateY(50%);
  }
  .c-item:nth-last-child(1)::before {
    /** --h2 为了在只有一个 item 的时候让左侧边线消失 */
    height: calc(var(--h) - 50% - var(--h2));
    transform: translateY(-50%);
  }

css 实现三个点的动画效果

.g-loading-dot {
	display: inline-block;
	min-width: 2px;
	min-height: 2px;
	box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor;
	animation: dot 4s infinite step-start both; 
}

@keyframes dot{
	25% { box-shadow: none; }                                  /* 0个点 */
	50% { box-shadow: 2px 0 currentColor; }                    /* 1个点 */
	75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor;  /* 2个点 */ }
}

#日常# : 微信小程序 在scroll-view中使用sticky的bug。 #闲评# : 又耽搁我半个多小时

  • 表征:滚动了一个 scroll-view 上设定的高度后设置 sticky 会被滚动上去
  • 猜测原因:微信小程序的 sticky 的计算很可能是直接根据父元素的高度来计算了
  • 解决方案:在scroll-view 中再套一层然后将所有元素放这一层里面

#日常# : 新增文章 vue异步数据呈现方案

#日常# 发现 Firefox 的一个奇怪实现,鼠标按住左键滑动选择一但进入 Web Components 就转为只选中 Web Components 中的内容,在 页面中 ctrl + a 也无法选中 Web Components 中的内容, Web Components slot 中的内容却是可以选中的

#日常# 发现文章, 如何看待 snabbdom 的作者开发的前端框架 Turbine 抛弃了虚拟 DOM? - 徐飞的回答 - 知乎 对于 vdom 和相关的 diff 讲的非常好


{{{
#日常# #uniapp/坑# 这个 v-for 的数组使用模板内定义的数据就得到了 很奇怪的结果 ,但使用变量的话就没问题image.png

参数 p 可能是 uni-app 内部的包装image.png

}}}


  • 国家宗教事务局 可以很方便的查询某地有哪些宗教活动场所
    • 今日方知我家旁边山上的观属于正一派系 image.png
    • 海宁这边则是佛教居多,道教只有一两个

quark量子计划迷你linux开发版


今天给 md2website 加上了动态内容块渲染的功能(效果: 日常 ),期间尝试了很多方案,最终还是使用了 xgo 这个令人难受的一点在于他要拉取网上的依赖代码,在国内的网络下下载速度令人十分不感动,尤其 lute 的代码库体积超大花了很长时间


QQ 这一波扫描浏览器历史让人害怕【知乎】如何看待 QQ 扫描所有浏览器历史 使用 火绒的防护方法


其他代码片段相关

by 崮生 from 崮生 • 一些随笔 🎨,欢迎 赞助本文
本文欢迎分享与聚合,全文转载未经授权( 联系我)不许可。