封面

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

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

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

动态创建meta的方法

// 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);
};

使用

import { createMeta } from './metaUtil' 

createMeta('xxx', 'xxxx')

对函数只执行一次


// 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;
};
};

使用

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参数

// ParmaterUtil.ts
export class ParameterUtil {
/**
* 根据名字获取url参数的值(不能获取带#的url参数)
*比如 : https://admin.local.g123.jp/#/operationLog/index
**/
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

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;
};
})();

邮箱格式检测

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
);
文章目录
  1. 1. 动态创建meta的方法
  2. 2. 对函数只执行一次
  3. 3. 获取URL参数
  4. 4. 动态创建script
  5. 5. 邮箱格式检测


twitter分享


如果想及时收到回复,可在 订阅中心Participating中勾选Email

Fork me on GitHub