发表更新技术 / 前端开发几秒读完 (大约40个字)

简单实现一个useSignal

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export const useSignal = (initialState) => {
  const [state, setState] = useState(initialState)
  const stateRef = useRef(initialState)

  const getState = () => stateRef.current

  const editState = (newState) => {
    setState(newState)

    if (typeof newState === 'function'){
      stateRef.current = newState(stateRef.current)
    } else {
      stateRef.current = newState
    } 
  }

  return [state, editState, getState]
}
发表更新 vear 技术 / 前端开发5 分钟读完 (大约785个字)

2024-05-16 一个Npm包"hanzi-utils"，提供了一些汉字相关的处理函数.md

汉字处理工具库

简介

本库提供了一系列用于处理汉字（中文字符）的JavaScript函数。这些函数包括查询汉字的异体字、发音、部首、笔画、获取所有Unicode汉字、Unicode编码与汉字字符的转换以及计算汉字字符串的长度等。

安装

1
npm i @vearvip/hanzi-utils

使用

引入模块

首先，确保你已经将@vearvip/hanzi-utils引入到你的项目中。

查询汉字的异体字

1
2
3
4
5
6
7
import { queryVariant } from '@vearvip/hanzi-utils';

const character = '说';
const variants = queryVariant(character);

console.log(`"${character}" 的异体字有：`, variants);
// "说" 的异体字有： [ "說", "説" ]

查询汉字的部首、笔画

1
2
3
4
5
6
7
import { queryRadicalStrokeCount } from '@vearvip/hanzi-utils';

const hanzi = '额';
const result = queryRadicalStrokeCount(hanzi);
console.log(result); // 输出：[ "页", 15 ]

// 解释：汉字"额"的部首是"页"，总笔画数为15。

查询汉字在多种方言和语言中的读音,当前支持以下方言/语言的读音查询：

  • 普通话（mandarin）
  • 粤语（cantonese）
  • 日语音读（japaneseOn）
  • 日语训读（japaneseKun）
  • 韩语（korean）
  • 越南语（vietnamese）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { queryReading } from '@vearvip/hanzi-utils';

// 查询汉字“一”的粤语、日语、韩语、普通话及越南语读音
const readings = queryReading('一');
console.log(readings);
/*
输出:
{
  kCantonese: "jat1",
  kJapaneseKun: "HITOTSU HITOTABI HAJIME",
  kJapaneseOn: "ICHI ITSU",
  kKorean: "IL",
  kMandarin: "yī",
  kVietnamese: "nhất",
}
*/

获取所有Unicode的汉字（截止Unicode 版本：15.1，本函数可返回99142个汉字，实际只有99139个，因为部首扩展：2E9A 是空码位，兼容汉字：FA6E、FA6F 是空码位。）

1
2
3
4
5
6
7
import { getAllHanziCharacters } from '@vearvip/hanzi-utils';

const allHanzi = getAllHanziCharacters();
console.log(allHanzi.slice(0, 10));
// [ "一", "丁", "丂", "七", "丄", "丅", "丆", "万", "丈", "三"]
console.log(allHanzi.length);
// 99142

Unicode编码与汉字字符的转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { 
  unicode2Hanzi,
  hanzi2Unicode, 
} from '@vearvip/hanzi-utils';

// Unicode编码转汉字字符
const hexCode = '4E2D'; // '中'的Unicode编码
const hanzi = unicode2Hanzi(hexCode);
console.log(hanzi); // 输出：中

// 汉字字符转Unicode编码
const anotherHanzi = '字';
const unicode = hanzi2Unicode(anotherHanzi);
console.log(unicode); // 输出：5B57

计算汉字字符串的长度

1
2
3
4
5
6
import { unicodeLengthIgnoreSequence } from '@vearvip/hanzi-utils';

const str = '豕型';
const strLength = unicodeLengthIgnoreSequence(str);
console.log(str.length); // 输出：4
console.log(strLength); // 输出：2

函数检查一个字符是否是汉字

1
2
3
4
5
import { isHanzi } from '@vearvip/hanzi-utils';

console.log(isHanzi('汉')); // true
console.log(isHanzi('A'));  // false
console.log(isHanzi('𠀀')); // true

提取字符串中的汉字

1
2
3
import { extractHanzi } from '@vearvip/hanzi-utils';

console.log(extractHanzi('Hello, 世界! 𠀀✨ 你好，世界！')); // 输出: ["世", "界", "𠀀", "你", "好", "世", "界"]

注意事项

  • 本库中的函数假设你正在使用支持ES6及以上语法的JavaScript环境。
  • unicodeLengthIgnoreSequence使用了Intl.Segmenter，请确保你的JavaScript环境支持该API（通常在较新的浏览器和Node.js版本中可用）。
  • 本库的代码未经优化，可能不适用于大型项目或需要高性能的场景。如有需要，请进行适当的性能优化。

贡献

如果你发现任何错误或想要提出改进建议，请随时通过GitHub或其他方式联系我。欢迎任何形式的贡献！

发表更新 vear 技术 / 前端开发2 分钟读完 (大约367个字)

2023-11-10 JS复制表格到Excel.md

简单示例，这里用的是Fusion的Table

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import { Table, Button } from "@alifd/next";

function App() {

  const dataSource = [
    {
      item: '棉鞋1',
      img: 'https://img.alicdn.com/imgextra/i3/O1CN01oa2oWk1THYOTjD8um_!!6000000002357-2-tps-110-110.png',
      sku: '34码',
      amount: 999,
      induction: {
        a: 10,
        b: 12
      }
    },
    {
      item: '棉鞋1',
      img: 'https://img.alicdn.com/imgextra/i2/O1CN010URR3q1qa5aKdpsOh_!!6000000005511-2-tps-110-110.png',
      sku: '35码',
      amount: 88,
      induction: {
        a: 23,
        b: 77
      }
    },
    {
      item: '拖鞋1',
      img: 'https://img.alicdn.com/imgextra/i4/O1CN01xUEUfU1TCyQuxXEps_!!6000000002347-2-tps-110-110.png',
      sku: '38码',
      amount: 0,
      induction: {
        a: 0,
        b: 100
      }
    },
    {
      item: '拖鞋2',
      img: 'https://img.alicdn.com/imgextra/i2/O1CN01wtSTlr28OmrVgPKQ9_!!6000000007923-2-tps-200-200.png',
      sku: '35码',
      amount: 123,
      induction: {
        a: 90,
        b: 8
      }
    },

  ]
  const cellProps = (rowIndex, colIndex) => {
    if (rowIndex === 0 && colIndex === 0) {
      return {
        // take 3 rows's space
        rowSpan: 2
      };
    }

  };

  const convertTableToExcel = (
    id = undefined, // Fusion Table 的id 
    filterHeader = false, // 复制时是否滤掉表头
  ) => {
    return new Promise((resolve, reject) => {
      try {
        let htmlString = document.getElementById(id).innerHTML
        const filterDOM = (selector) => { 
          // 创建一个临时div元素
          var tempDiv = document.createElement('div');
          // 将HTML字符串赋值给临时div的innerHTML属性
          tempDiv.innerHTML = htmlString;
          // 使用querySelectorAll方法获取所有要过滤的元素，并将其从临时div中移除
          tempDiv.querySelectorAll(selector).forEach(function (element) {
            element.remove();
          });
          // 获取过滤后的HTML字符串
          return tempDiv.innerHTML;
        }
        htmlString = filterDOM('.next-table-lock-left')
        if (filterHeader) {
          htmlString = filterDOM('thead')
        }

        console.log(htmlString)
        const type = "text/plain";
        const blob = new Blob([htmlString], { type });
        const data = [new ClipboardItem({ [type]: blob })];

        navigator.clipboard.write(data).then(
          () => resolve(),
          (error) => reject(error),
        );
      } catch (error) {
        reject(error)
      }
    })
  }
  return (
    <div>
      <Button type="primary" onClick={() => convertTableToExcel('table1')} style={{ marginRight: 10 }}>复制</Button>
      <Button type="primary" onClick={() => convertTableToExcel('table1', true)}>复制（不含表头）</Button>
      <Table id="table1" dataSource={dataSource} cellProps={cellProps}>
        <Table.Column title="商品" width={300} dataIndex="item" lock="left" />
        <Table.ColumnGroup title="信息">
          <Table.Column title="规格" width={200} dataIndex="sku" />
          {/* <Table.Column title="图片" width={200} dataIndex="img" cell={(val) => <img src={val} />} /> */}
          <Table.Column title="库存" width={200} dataIndex="amount" />
          <Table.Column title="说明" width={200} dataIndex="induction" cell={(val) => {
            return <div>
              <div>全包：{val.a}%</div>
              <div>半包：{val.b}%</div>
            </div>
          }}  />

        </Table.ColumnGroup>
      </Table>
    </div>
  )
}

export default App

实际上核心代码就这几行

1
2
3
4
5
6
7
8
9
const htmlString = '' // 这里就是你要复制的东西
const type = "text/plain";
const blob = new Blob([htmlString], { type });
const data = [new ClipboardItem({ [type]: blob })];

navigator.clipboard.write(data).then(
  () => resolve(),
  (error) => reject(error),
);
发表更新 vear 技术 / 前端开发几秒读完 (大约75个字)

2023-08-04 JavaScript统计字符串广义上的长度

就这一个函数就可解决，非常好用

1
2
3
4
5
6
7
8
9
10
function unicodeLengthIgnoreSequence(str) {
  let segmenter = new Intl.Segmenter();
  let segments = segmenter.segment(str);
  return [...segments].length;
}

console.log(
  '👪𠄘👨‍👩‍👧‍👦'.length, 
  unicodeLengthIgnoreSequence('👪𠄘👨‍👩‍👧‍👦'),
)

得到结果👇🏻

1
> 15 3
发表更新 vear 技术 / 移动端开发4 分钟读完 (大约613个字)

Flutter 3.0首次运行时卡在"Running Gradle task assembleDebug"的解决办法

第一步

找到flutter sdk路径下的这个文件

flutter/packages/flutter_tools/gradle/flutter.gradle

打开，并找到这个位置

1
2
3
4
5
6
7
buildscript {
    repositories {
      google()
      mavenCentral() 
    }
    ...
}

注释掉 google() 和 mavenCentral() ,并更改为 

1
2
3
4
5
6
7
8
9
10
buildscript {
    repositories {
      // google()
      // mavenCentral() 
      maven { url 'https://maven.aliyun.com/repository/google' }
      maven { url 'https://maven.aliyun.com/repository/jcenter' }
      maven { url 'https://maven.aliyun.com/nexus/content/groups/public' }
    }
    ...
}

第二步

找到当前工程路径下的这个文件

/android/build.gradle

和第一步一样，打开，并注释掉 google() 和 mavenCentral()并更改

注意第二步有两处，所以要改两个地方

第三步

还是这个文件

/android/build.gradle

找到DEFAULT_MAVEN_HOST并替换为国内的镜像地址

1
2
3
4
5
class FlutterPlugin implements Plugin<Project> {
    // private static final String DEFAULT_MAVEN_HOST = "https://storage.googleapis.com"; 
    private static final String DEFAULT_MAVEN_HOST = "https://storage.flutter-io.cn";
    ...
}

基本上完成上面这三步，就可以运行如下命令尝试再次启动了

1
flutter clean
1
flutter run

什么？你还不行啊。。。我倒，接着往下看吧，真没想到你这么倒霉

第四步

有可能是第三步的镜像地址挂了，可以把第三步再改回来，咱们改host

打开这个网站 https://tool.chinaz.com/speedtest/storage.googleapis.com

获取你的能访问到的加速ip地址，改hosts

有好多个呢，你自己试试吧

1
2
3
4
5
# localhost name resolution is handled within DNS itself.
#	127.0.0.1       localhost
#	::1             localhost

142.251.43.16 storage.googleapis.com # 例如这样改，Mac和Linux不做介绍

再试试咯，不行就往下走

1
flutter clean
1
flutter run

第五步

到这基本上宣告你的gradle是死活下载不下来了，只能离线下载了，找到工程目录下的这个文件打开,找到里面的distributionUrl

/android/gradle/wrapper/gradle-wrapper.properties

1
2
...
distributionUrl=https\://services.gradle.org/distributions/gradle-7.5-all.zip

你看啊，我这里是gradle-7.5-all.zip

那就去访问gradle的离线下载网站吧，找到gradle-7.5-all.zip并且下载下来

https://services.gradle.org/distributions/

然后去系统的gradle存放目录替换掉死活下载不下来的那些东西

例如我是C:\Users\vear\.gradle\wrapper\dists\gradle-7.5-all\6qsw290k5lz422uaf8jf6m7co\gradle-7.5-all.zip

那就把C:\Users\vear\.gradle\wrapper\dists\gradle-7.5-all\6qsw290k5lz422uaf8jf6m7co下面的东西全删了

把新下载的gradle-7.5-all.zip拷贝进去

再回来试试咯，反正我是行了，你不行就只能另请高明了

1
flutter clean
1
flutter run
发表更新 vear 技术 / 前端开发几秒读完 (大约64个字)

简单手写防抖节流

不多逼逼，直接上代码

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

export const debounce = (func: Function, timeout: number) => {
  let timeoutList: Array<NodeJS.Timeout> = [];

  return (...args: any[]) => {
    let timeoutId: NodeJS.Timeout;
    timeoutList.forEach(_timeoutId => clearTimeout(_timeoutId))
    timeoutId = setTimeout(() => {
      func(...args);
    }, timeout);
    timeoutList.push(timeoutId)
  };
};



export const throttle = (func: Function, timeout: number) => {
  let flag = true
  return (...args: any[]) => {
    if (flag) {
      flag = false
      setTimeout(() => {
        func(...args);
        flag = true
      }, timeout);
    }
  };
};

发表更新 vear 技术 / 前端开发2 分钟读完 (大约233个字)

Fetch简单封装

不多逼逼，直接上代码

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
function request(option = {
  method: 'GET',
  formData: false
}) {
  let url = option.url
  if (option.param) {
    url = `${url}?${qs(option.param)}`
  }
  function qs(data, flag) {
    const typeObj = (obj) => Object.prototype.toString.call(obj).slice(8, -1) === 'Object'
    const typeArr = (obj) => Object.prototype.toString.call(obj).slice(8, -1) === 'Array'
    var str = '', originData, encodeData;
    for (var i in data) {
      if (data.hasOwnProperty(i)) {
        originData = data[i]
        if (typeObj(originData) || typeArr(originData)) {
          str += qs(originData, i)
        } else {
          encodeData = encodeURIComponent(originData)
          if (typeObj(data) && flag) {
            str += `${flag}[${i}]=${encodeData}&`
          } else if (typeArr(data) && flag) {
            str += `${flag}[${i}]=${encodeData}&`
            // str += `${flag}=${encodeData}&`
          } else {
            if (str.length > 0 && str[str.length - 1] !== '&') str += '&';
            str += `${i}=${encodeData}&`
          }
        }
      }
    }
    return str[str.length - 1] === '&' ? str.slice(0, -1) : str
  }
  return fetch(url, {
    method: option.method,
    headers: option.formData ? undefined : {
      'Content-Type': 'application/json',
    },
    body: option.formData ? Object.keys(option.data).reduce((ret, val) => {
      ret.append(val, option.data[val])
      return ret
    }, new FormData()) : JSON.stringify(option.data),
  }).then(response => response.json())
}

用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// get请求
await request({
  url: 'https://netease-cloud-music-api-dv7rufaa3-vearvip.vercel.app/search',
  method: 'GET', 
  param: {
    keywords: '海阔天空'
  }
})
// post请求
// formData自行决定是否开启，默认不开启
await request({
  url: 'https://netease-cloud-music-api-dv7rufaa3-vearvip.vercel.app/search',
  method: 'POST',
  formData: true,
  data: {
    keywords: '海阔天空'
  }
})
发表更新 vear 技术 / 前端开发2 分钟读完 (大约279个字)

Js转文件为Base64和Js下载Base64文件

非常的好用！

js转文件为base64字符串

1
2
3
4
5
6
7
8
function fileToBase64(file, callback) {
  let reader = new FileReader();
  reader.addEventListener('load', (e) => {
    callback(e.target.result);
    reader = null;
  });
  reader.readAsDataURL(file);
}

竟然还有童鞋不知道咋上传文件，下面封装了一下，直接调用pickerFileBase64这个函数就可以选取文件并且得到base64字符串了

用例：纯Js获取文件并转base64

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function pickerFileBase64() {
  return new Promise((resolve) => {
    const inputFile = document.createElement('input')
    inputFile.type = 'file'
    inputFile.onchange = event => {
      const file = event.target.files[0]
      function fileToBase64(file, callback) {
        const reader = new FileReader();
        reader.addEventListener('load', (e) => {
          callback(e.target.result);
          reader = null;
        });
        reader.readAsDataURL(file);
      }
      fileToBase64(file, resolve)
    }
    inputFile.click()
  })
}

(async () => {
  const base64 = await pickerFileBase64()
  console.log(base64)
})()

下载base64字符串文件也是非常简单的，直接调用就完事了

js下载base64字符串文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function downloadBase64File(base64,name){
    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }

    function downloadFile(url,name=new Date().toLocaleString()){
        var a = document.createElement("a")
        a.setAttribute("href",url)
        a.setAttribute("download",name)
        a.setAttribute("target","_blank")
        let clickEvent = document.createEvent("MouseEvents");
        clickEvent.initEvent("click", true, true);  
        a.dispatchEvent(clickEvent);
    }
    var myBlob = dataURLtoBlob(base64)
    var myUrl = URL.createObjectURL(myBlob)
    downloadFile(myUrl,name)
}

发表更新 vear 技术 / 前端开发1 分钟读完 (大约164个字)

业务代码问题记录

二维数组合并

输入这样一个数组

1
2
3
4
[
  ['A', 'B'],
  ['C', 'D'], 
]

要求经过处理得到这样一个结果, 也就是 2x2 = 4个

1
2
3
4
5
6
[
  'AC',
  'AD',
  'BC',
  'BD',
]

或者这个数组

1
2
3
4
5
[
  ['A', 'B'],
  ['C', 'D'], 
  ['E', 'F', 'G'], 
]

要求经过处理得到这样一个结果, 也就是 2x2x3 = 12个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
  'ACE',
  'ACF',
  'ACG',
  'ADE',
  'ADF',
  'ADG',
  'BCE',
  'BCF',
  'BCG',
  'BDE',
  'BDF',
  'BDG', 
]

代码也很简单，没啥难度，只是做一下记录

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
let arr = [
  ['A', 'B'],
  ['C', 'D'], 
  ['E', 'F', 'G'], 
]

const foo = (origin, index = 1, next) => {
  let result = []
  if (origin.length === 1 || origin.length === 0) {
    return origin[0] || []
  }
  if (index === 1) {
    next = origin[0]
  }
  next.forEach(ele => {
    origin[index].forEach(item => {
      result.push(ele + item)
    })
  })
  if (index === origin.length - 1) {
    return result
  }
  return foo(origin, index + 1, result)
}
console.log('result', foo(arr))
发表更新技术 / 前端开发1 分钟读完 (大约202个字)

React hooks使用setInterval产生的问题

需求: 显示当前的最新时分秒

一看哇，着很简单啊，刷刷刷开始写代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, { useEffect, useState } from "react";

export default function App() {
  const [hour, setHour] = useState();
  const [minute, setMinute] = useState();
  const [second, setSecond] = useState();

  useEffect(() => { 
    const intervalId = setInterval(() => {
    const nowDate = new Date();
      setHour(() => nowDate.getHours());
      setMinute(() => nowDate.getMinutes());
      setSecond(() => nowDate.getSeconds());
    }, 1000);
    return clearInterval(intervalId)
  }, []);

  return <h1>{hour}时{minute}分{second}秒</h1>;
}

一顿操作猛如虎，运行一看就咋回事跑成这个鬼样子呢？

怎么没正常显示呢

写一个useInterval的hooks，这样时间就正常显示了

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
import React, { useEffect, useState, useRef } from "react";

const useInterval = (callback, delay) => {
  const savedCallback = useRef(() => {});

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    if (delay !== null) {
      const interval = setInterval(() => savedCallback.current(), delay || 0);
      return () => clearInterval(interval);
    }

    return undefined;
  }, [delay]);
};

export default function App() {
  const [hour, setHour] = useState();
  const [minute, setMinute] = useState();
  const [second, setSecond] = useState();

  useInterval(() => {
    const nowDate = new Date();
    setHour(nowDate.getHours());
    setMinute(nowDate.getMinutes());
    setSecond(nowDate.getSeconds());
  }, 1000);

  return <h1>{hour}时{minute}分{second}秒</h1>;
}

分类

最新文章

归档

标签

C#1
Cloudflare Pages1
Dart1
Flutter1
Hexo3
JavaScript17
React1
SEO1
Unity1
Vercel1
Vue1
业务问题3
×