Decorative image frame

小鑫の随笔

http-server 的安装和使用

小工具
  326字   1分钟

http-server 是什么？有什么用？

http-server 是一个轻量级的 http 服务器，它可以让任意一个目录成为服务器的目录，讲的有点模糊？试想一下这个场景，假设项目开发完了，要打包发布，想看一下打包后的文件有没有问题，是不是得把文件复制到本地服务器上才能看到？这个工具可以让你直接在当前目录开个本地服务[此处应该有掌声]

使用方法

1.安装

全局安装

1
npm install -g http-server

按需安装

使用 npx 可以直接运行，而无需先安装 。不了解 npx 的童鞋可以看看我写的这篇文章：npm 和 npx 的区别

1
npx http-server [path] [options]

2.运行

打开命令行工具，切换到要开服务的目录下，执行

1
http-server

这是运行成功后的输出：

小鑫の随笔

把地址复制到浏览器就能看到服务有没有开启成功了，mama 再也不用担心我不会开启本地服务了~

小鑫の随笔

除了直接启动服务，还可以设置一些参数

  • -p或--port 使用的端口（默认为 8080）
  • -a 要使用的地址（默认为 0.0.0.0）

快点耍起来吧~

github：https://github.com/http-party/http-server

JS 在数组指定位置插入元素

代码片段
  226字   1分钟

最近有个需求：将一个元素插入到现有数组的指定位置

回忆了一下，添加数组元素有这几个方法：unshift、push、splice

前两个是只能在数组开头/末尾添加，显示是不符合需求的，那么只剩 splice 了

splice 的定义是：从数组中添加/删除项目，返回被删除的项目，并且会改变原数组。

这不就是我们想要实现的吗

上才艺

1
2
var array = [1, 3, 4];
array.splice(1, 0, 2);  // after：[1, 2, 3, 4]

每次都要这样写有点麻烦，来封装一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * 指定位置插入元素
 * @param index 添加元素的位置
 * @param items 向数组添加的新项目
 */
Array.prototype.insert = function(index, ...items) {
  if (isNaN(index)) {
    throw new TypeError('请输入数字');
  }
  this.splice(index, 0, ...items);
};

var array = [1];
array.insert(1, 2, 3, 4);   // after: [1, 2, 3, 4]

今天，你学废了吗~

react 倒计时 hook

造轮子
  209字   1分钟
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import { useRef, useState, useEffect } from 'react';

/**
 * 解析毫秒为天、时、分、秒
 * @param milliseconds 毫秒
 */
const parseMs = (milliseconds: number) => {
  return {
    days: Math.floor(milliseconds / 86400000),
    hours: Math.floor(milliseconds / 3600000) % 24,
    minutes: Math.floor(milliseconds / 60000) % 60,
    seconds: Math.floor(milliseconds / 1000) % 60,
  };
};

/**
 * 倒计时
 * @param endTimeStamp 结束时间的时间戳
 */
const useCountDown = (endTimeStamp: number) => {
  const timer = useRef(0);
  const [state, setState] = useState(endTimeStamp);

  // 计算时间的差值
  const calcTimeDiff = () => {
    // 获取当前时间戳
    const currentTime = +new Date();
    // 计算当前时间和结束时间的差值
    const seconds = Math.floor((endTimeStamp || 0) - currentTime);
    // 如果是负数 就清空定时器
    if (seconds <= 0) {
      clearInterval(timer.current);
      return setState(0);
    }
    setState(seconds);
  };

  useEffect(() => {
    calcTimeDiff();
    timer.current = setInterval(() => {
      calcTimeDiff();
    }, 1000);
    return () => {
      clearInterval(timer.current);
    };
  }, []);

  const { days, hours, minutes, seconds } = parseMs(state);
  return { days, hours, minutes, seconds };
};

export default useCountDown;

点击下方链接查看运行效果：

Edit react 倒计时 hook

github：https://github.com/isxiaoxin/front_end_wheel

JS 判断日期是不是今天、昨天、明天

代码片段
  65字   1分钟
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 判断日期是不是今天、昨天、明天
const isToday = (str) => {
    let d = new Date(str).setHours(0, 0, 0, 0);
    let today = new Date().setHours(0, 0, 0, 0);

    let obj = {
      '-86400000': '昨天',
      0: '今天',
      86400000: '明天',
    };

    return obj[d - today] || '啥也不是';
};

isToday(new Date());	// 今天

JS 类型判断

代码片段
  32字   1分钟
1
2
3
4
5
6
7
8
9
10
11
/**
 * 判断对象类型
 * @param [obj: any] 参数对象
 * @returns String
 */
function isType(obj: any) {
  return Object.prototype.toString
    .call(obj)
    .replace(/^\[object (.+)\]$/, '$1')
    .toLowerCase();
}