不管是什么语言，不管是前端还是后端，我们都有一个很重要的模块，那就是utils包。在java界有apache-commons这种出身明门的，也有像hutool这种民间的库。前端界目前还没有发现一个比应用比较频繁的库，那就出一个长期项的自己整理整一下吧。
注： 本篇文章开始于2020年12月8日，每次修改或新增时都会将时间更新时最新的时间。
1
2
3
4
5
6
7
8
| // meta-utils.ts
export const createMeta=(name:string,content:string):void=>{
consthead=document.getElementsByTagName('head');
constmeta=document.createElement('meta');
meta.name=name;
meta.content=content;
head[0].appendChild(meta);
};
|
使用
1
2
3
| import { createMeta } from './metaUtil'
createMeta('xxx', 'xxxx')
|
对函数只执行一次
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// eslint-disable-next-line @typescript-eslint/ban-types
export const once = <T extends Function, U>(fn: (...args: T[]) => U): typeof fn => {
let result: ReturnType<typeof fn>;
let func: typeof fn | undefined = fn;
return (...args: Parameters<typeof fn>): ReturnType<typeof fn> => {
if (func) {
result = func(...args);
func = undefined;
}
return result;
};
};
|
使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| import axios from 'redaxios';
import { AuthConfig } from '@/client/auth/index';
// eslint-disable-next-line no-restricted-imports
import { once } from '../utils/functionUtils';
export const fetchAuthConfig = once(
async (): Promise<AuthConfig> => {
const response = await axios({
url: '/oauth/v1/config',
method: 'get',
});
const config: AuthConfig = response.data as AuthConfig;
return config;
}
);
|
获取URL参数
1
2
3
4
5
6
7
8
9
10
| // ParmaterUtil.ts
export class ParameterUtil {
/**
* 根据名字获取url参数的值(不能获取带#的url参数)
**/
public static getUrlParameter(parameter:string): string|null{
return new URL(window.location.href).searchParams.get(parameter);
}
}
|
注：不支持 vue-router具有锚点的URL，例如 https://test.xiaomo.info/#?name=xiaomo&age=15。
只支持直接在url上拼参数的方式https://test.xiaomo.info?name=xiaomo&age=15
动态创建script
需要安装 loadjs
yarn add loadjs
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
| import loadjs, { LoadOptions } from 'loadjs';
interface CacheableOptions extends LoadOptions {
cacheable?: boolean;
}
export const loadScript = ((): ((
src: string,
options?: CacheableOptions
) => Promise<void>) => {
const cache: Record<string, Promise<void>> = {};
return (src: string, options?: CacheableOptions): Promise<void> => {
const opt: CacheableOptions = {
cacheable: true,
numRetries: 3,
...(options || {}),
};
if (opt.cacheable && cache[src]) {
return cache[src];
}
const promise = loadjs([src], {
...opt,
returnPromise: true,
});
if (opt.cacheable) {
cache[src] = promise;
}
return promise;
};
})();
|
邮箱格式检测
1
2
3
4
| export const checkEmail = (v: string): boolean =>
/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/.test(
v
);
|
