公用功能

此包包括axios封装+cookie封装+localStorage封装+工具包

开始使用

安装

npm i -D @yuxun/common

引用

javascript引用

import {setStorage} from "@yuxun/common/libs/index.js";

typescript引用

import {setStorage} from "@yuxun/common";

localStorage库

setStorage本地存储（存）

setStorage是基于localStorage.setItem进行封装的，目的是为了方便开发者更好的校验数据类型，下面演示一下使用示例

javascript使用

import { setStorage } from "@yuxun/common/libs/index.js";

// 数字类型
setStorage("userId",100);
// 字符串类型
setStorage("token","123123");
// json类型
setStorage("userInfo",{id:1,userName:"xingsk"});
// 数组类型
setStorage("userInfoList",[{user:1,userName:'xingsk'},{user:1,userName:'张三'}]);

typescript使用

import { setStorage } from "@yuxun/common";

/* 字符串类型 */
setStorage("userId",1);

/* 字符串类型 */
setStorage("token","123123");

/* json类型 */
// 定义接口
interface IUserInfo{
    id:number;
    userName:string;
}
const userInfo:IUserInfo={id:1,userName:"xingsk"};
setStorage<IUserInfo>("userInfo",userInfo);

/* 数组类型 */
// 定义接口
interface IUserInfo{
    id:number;
    userName:string;
}
const userInfoList:Array<IUserInfo>=[{user:1,userName:'xingsk'},{user:1,userName:'张三'}];
setStorage<Array<IUserInfo>>("userInfoList",userInfoList);

方法重载(ts)

export function setStorage(key: string, value: string): void;
export function setStorage(key: string, value: number): void;
export function setStorage<T>(key: string, value: T): void;

getStorage本地存储（取）

getStorage是基于localStorage.getItem进行封装的，目的是为了方便开发者更好的校验数据类型，下面演示一下使用示例

javascript使用

import { getStorage,setStorage } from "@yuxun/common/libs/index.js";

// 没有存储则返回字符串的空 if(getStorage('token')!=""){ token没有值 } 
// 也可以使用 if(!getStorage('token')){ token没有值 }
// 示例：if(getStorage('token')){ 有值 }
getStorage('token'); 

/* 数字类型 */
// 1. 存储
setStorage('userId',100);
// 2. 取值
getStorage('userId');// 这里返回的是100

/* 字符串类型 */
// 1. 存储
setStorage('token','abc123')
// 2. 取值
getStorage("token");// 这里返回的是 "abc123"

/* json类型 */
// 1. 存储
setStorage('userInfo',{'userName':"xingsk"})
// 2. 取值
getStorage("userInfo");// 这里返回的是 {'userName':'xingsk'}

/* 数组(Array)类型 */
// 1. 存储
setStorage("userList",[{"userName":"xingsk"}]);
// 2. 取值
getStorage('userList'); // 这里返回的是 [{"userName":"xingsk"}]

typescript使用

import { getStorage,setStorage } from "@yuxun/common";

/* 数字类型 */
setStorage('userId',100)
getStorage<number>('userId');// 这里返回的是100

/* 字符串类型 */
// 1. 存储
setStorage('token','abc123')
// 2. 取值
getStorage<string>("token");// 这里返回的是 "abc123"

/* json类型 */
// 用户基本信息接口
interface IUserInfo{
    userName:string;
}
// 1. 存储 注意泛型位置IUserInfo为入参泛型
setStorage<IUserInfo>('userInfo',{'userName':"xingsk"})
// 2. 取值 注意泛型位置IuserInfo为出参泛型
getStorage<IUserInfo>("userInfo");// 这里返回的是 {'userName':'xingsk'}

/* 数组(Array)类型 */
// 用户基本信息接口
interface IUserInfo{
    userName:string;
}
// 1. 存储
setStorage<Array<IUserInfo>>("userList",[{"userName":"xingsk"}]);
// 2. 取值
getStorage<Array<IUserInfo>>('userList');// 这里返回的是 [{"userName":"xingsk"}]

cookie库

setCookie cookie存储 (存)

setCookie是基于document.cookie进行封装的，目的是为了方便开发者更好的校验数据类型，下面演示一下使用示例

javascript使用

import { setCookie } from '@yuxun/common/libs/index.js'

// 数字类型
setCookie("userId",100);
// 字符串类型
setCookie("token","123123");
// json类型
setCookie("userInfo",{id:1,userName:"xingsk"});
// 数组类型
setCookie("userInfoList",[{user:1,userName:'xingsk'},{user:1,userName:'张三'}]);

typescript使用

import { setCookie } from "@yuxun/common";

/* 字符串类型 */
setCookie("userId",1);

/* 字符串类型 */
setCookie("token","123123");

/* json类型 */
// 定义接口
interface IUserInfo{
    id:number;
    userName:string;
}
const userInfo:IUserInfo={id:1,userName:"xingsk"};
setCookie<IUserInfo>("userInfo",userInfo);

/* 数组类型 */
// 定义接口
interface IUserInfo{
    id:number;
    userName:string;
}
const userInfoList:Array<IUserInfo>=[{user:1,userName:'xingsk'},{user:1,userName:'张三'}];
setCookie<Array<IUserInfo>>("userInfoList",userInfoList);

getCookie cookie存储 (取)

getCookie是基于document.cookie进行封装的，目的是为了方便开发者更好的校验数据类型，下面演示一下使用示例

javascript使用

import { getCookie,setCookie } from "@yuxun/common/libs/index.js";

// 没有存储则返回字符串的空 if(getStorage('token')!=""){ token没有值 } 
// 也可以使用 if(!getStorage('token')){ token没有值 }
// 示例：if(getStorage('token')){ 有值 }
getCookie('token'); 

/* 数字类型 */
// 1. 存储
setCookie('userId',100);
// 2. 取值
getCookie('userId');// 这里返回的是100

/* 字符串类型 */
// 1. 存储
setCookie('token','abc123')
// 2. 取值
getCookie("token");// 这里返回的是 "abc123"

/* json类型 */
// 1. 存储
setCookie('userInfo',{'userName':"xingsk"})
// 2. 取值
getCookie("userInfo");// 这里返回的是 {'userName':'xingsk'}

/* 数组(Array)类型 */
// 1. 存储
setCookie("userList",[{"userName":"xingsk"}]);
// 2. 取值
getCookie('userList'); // 这里返回的是 [{"userName":"xingsk"}]

typescript使用

import { getCookie,setCookie } from "@yuxun/common";

/* 数字类型 */
setCookie('userId',100)
getCookie<number>('userId');// 这里返回的是100

/* 字符串类型 */
// 1. 存储
setCookie('token','abc123')
// 2. 取值
getCookie<string>("token");// 这里返回的是 "abc123"

/* json类型 */
// 用户基本信息接口
interface IUserInfo{
    userName:string;
}
// 1. 存储 注意泛型位置IUserInfo为入参泛型
setCookie<IUserInfo>('userInfo',{'userName':"xingsk"})
// 2. 取值 注意泛型位置IuserInfo为出参泛型
getCookie<IUserInfo>("userInfo");// 这里返回的是 {'userName':'xingsk'}

/* 数组(Array)类型 */
// 用户基本信息接口
interface IUserInfo{
    userName:string;
}
// 1. 存储
setCookie<Array<IUserInfo>>("userList",[{"userName":"xingsk"}]);
// 2. 取值
getCookie<Array<IUserInfo>>('userList');// 这里返回的是 [{"userName":"xingsk"}]

axios库

请求封装库

tools工具库

isEmpty判断值是否为空

判断某个值是否为空 可判断值例如：undefined/null/""/" "/[]/NaN 等.

javascript和typescript除了引用方式不同外具体使用方式相同

// javascript引用
import { isEmpty } from "@yuxun/common/libs/index.js"
// typescript引用
import { isEmpty } from "@yuxun/common";

isEmpty("");// true 判断字符串是否为空
isEmpty(" ");// true 判断带空格的字符串是否为空
isEmpty(undefined);// true 判断undefined是否为空
isEmpty(null);// true 判断null是否为空
isEmpty([]);// true 判断数组是否为空
isEmpty({});// true 判断json是否为空
isEmpty(0);// false 判断0是否为空
isEmpty(NaN);// true 判断NaN是否为空

let str="abc";
isEmpty(str*12);// true 计算结果为NaN所以结果返回的是true

isJSON判断值是否为JSON类型

判断值是否为JSON类型

javascript和typescript除了引用方式不同外具体使用方式相同

// javascript引用
import { isJSON } from "@yuxun/common/libs/index.js"
// typescript引用
import { isJSON } from "@yuxun/common";

isJSON({});// true
isJSON([]);// false

isArray判断值是否为Array类型

判断值是否为Array类型

javascript和typescript除了引用方式不同外具体使用方式相同

// javascript引用
import { isArray } from "@yuxun/common/libs/index.js"
// typescript引用
import { isArray } from "@yuxun/common";

isArray([]);// true
isArray({});// false

formatDate时间格式化转换

将时间戳转换为时间格式

javascript和typescript除了引用方式不同外具体使用方式相同

// javascript引用
import { formatDate } from "@yuxun/common/libs/index.js"
// typescript引用
import { formatDate } from "@yuxun/common";

formatDate(1639447507073, "yyyy-MM-dd hh:mm:ss");// 2021-12-14 10:05:07
formatDate(1639447507073, "yyyy年MM月dd日 hh时mm分ss秒");// 2021年12月14日 10时05分07秒
formatDate(1639447507073, "yyyy-MM-dd");// 2021-12-14
formatDate(1639447507073, "yyyy年MM月dd日");// 2021年12月14日
formatDate(1639447507073, "hh:mm:ss");// 10:05:07
formatDate(1639447507073, "hh时mm分ss秒");// 10时05分07秒

| 参数 | 说明 | 默认值 | | ----------- | --------------------------- | --------------------- | | timestamp | 时间戳 | - | | format | 转换格式 支持格式见以下详情 | yyyy-MM-dd hh:mm:ss |

format支持 yyyy-MM-dd hh:mm:ss/yyyy年MM月dd日 hh时mm分ss秒/yyyy-MM-dd/yyyy年MM月dd日/hh:mm:ss/hh时mm分ss秒 其余格式不支持

getExtension获取字符串扩展名

可以获取文件的扩展名暂时只支持字符串

javascript和typescript除了引用方式不同外具体使用方式相同

// javascript引用
import { getExtension } from "@yuxun/common/libs/index.js"
// typescript引用
import { getExtension } from "@yuxun/common";

getExtension("https://www.baidu.com/abc.bdc/www.png"); // png
getExtension("https://www.baidu.com/abc.bdc/www.png",true); // .png

| 参数 | 必填 | 说明 | 默认值 | | ------ | ---- | ----------------------------------- | ------ | | data | 是 | 需要从哪个字符串中获取扩展名 | - | | spot | 否 | 是否需要扩展名前面的点(.) 例如 .png | false |