js/ts常用公有方法收集整理(长期向)

不管是什么语言,不管是前端还是后端,我们都有一个很重要的模块,那就是utils包。在java界有apache-commons这种出身明门的,也有像hutool这种民间的库。前端界目前还没有发现一个比应用比较频繁的库,那就出一个长期项的自己整理整一下吧。

注: 本篇文章开始于2020年12月8日,每次修改或新增时都会将时间更新时最新的时间。

动态创建meta的方法

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
  );
署名 - 非商业性使用 - 禁止演绎 4.0