# xyf_tools_js

> #### 介绍 通过typescript搭建的公共方法

Latest version **1.0.8** (published 2022-08-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install xyf_tools_js
pnpm add xyf_tools_js
yarn add xyf_tools_js
bun add xyf_tools_js
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2022-08-05 |
| First published | 2022-07-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 147.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | xyf_coco |
| Keywords | js, utils |

## Links

- npm: https://www.npmjs.com/package/xyf_tools_js
- Repository: https://gitee.com/xyf_npm/xyf-utils-ts
- npm.io page: https://npm.io/package/xyf_tools_js

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.8 (latest) — 2022-08-05
- 1.0.7 — 2022-08-04
- 1.0.6 — 2022-07-26
- 1.0.5 — 2022-07-21
- 1.0.4 — 2022-07-08
- 1.0.3 — 2022-07-08
- 1.0.2 — 2022-07-08
- 1.0.1 — 2022-07-07

## README

# xyf_tools_js

### 常用的一些js工具函数汇总,下面的函数会按照分类展示使用方式,都是按照按需导入的方式引用,完全不依赖第三方库

------

## animate
> 一个js动画函数，可以控制动画的执行进度，通过prmise和await使用

`Animator`的参数定义
| 参数名称        | 类型   |  定义  |
| :--------:   | :-----:  | :----:  |
|duration| number，默认值 2000|动画执行的时间
|update|  (p: number,sourceN:number) => void|每一帧的执行回调
|easing| (n:number) => number|动画函数，处理每一帧之后的回调

使用方式
```js
import  Animator  from 'xyf_tools_js/lib/animate'
const btn = document.getElementById('start')
const animator = new Animator(
2000,
(p,sourceP) => { // 随时间变化的回调值 sourceP  在 0 到 1之间  p 是经过第三个参数处理的值也就是 0 到 4
  const tx = -100 * Math.sin(2 * Math.PI * p);
  const ty = -100 * Math.cos(2 * Math.PI * p);
  // btn 是需要进行动画的元素
  btn.style.transform = "translate(" + tx + "px," + ty + "px)";
},
(p) => 4*p
);
btn.onclick = async () => {
await animator.animate();
console.log('动画执行完毕');
}
```

## arr
1、`flat`数组的扁平化
```js
import  arr  from 'xyf_tools_js/lib/arr'
var a = [[2,3],[[4,6]]]
console.log(arr.flat(a)); // [2, 3, 4, 6]
```
2、`generateArr` 生成指定长度的数组
```js
 /**
 *
 * @param start 起始值
 * @param stop 结束值
 * @param step 步长
 * @returns
 */
  console.log(arr.generateArr(1,30,2));
 //[1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29]
```

## blob
关于`blob`、`base64`、`file`、`buffer`、`img`之间的转化
```js
import  * as blob  from 'xyf_tools_js/lib/blob'
// file 转化为 base64
const base = wait blob.imgToBase64(file) //file表示input选择的文件

// base64转化为blob
var blobObj = blob.convertBase64ToBlob(base64)

// base64转化为file
var file = blob.base64toFile(base64,'ceshi') // 第二个参数为文件名称，现在只支持图片类型的

//  blob转化为base64
var base64 = await blob.blobToBase64(blob)

// 将 http图片转化为 base64
const base =await blob.convertUrlToBase64('https://xxx/detail_bac.png')
//返回结果
> {
>     dataURL: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABdw
>     ext: "png"
>     height: 280
>     name: "detail_bac"
>     type: "image/png"
>     with: 1500
> }

// buffer 转化为 blob
var blob = blob.bufferToBlob(arrbuffer,type) // type 是 blob类型
```

## browser
主要是和浏览器相关的一些原生api的使用

引入方式
```js
import  * as browser   from 'xyf_tools_js/lib/arr'
```

### 1、全屏切换
```js
var isScreen = browser.toggleFullscreen() // 返回值是当前的屏幕状态
```
注意：如果全屏之后是黑屏的话需要加上下面的css
```css
:not(:root):fullscreen::backdrop{
      background-color: yellow !important;
}
```
### 2、滚动到指定元素
```js
browser.smoothScroll(element) // 传入指定的元素
```

### 3、滚动到页面顶部
```js
browser.scrollToTop()
```

### 4、复制文字内容
```js
browser.copy('fasdf')
```

## cookie

引入方式
```js
import  * as cookie   from 'xyf_tools_js/lib/cookie'
```
### 1、设置cookie
```ts
cookie.setCookie(cname:string,cvalue:string,options = {
    path:"/",
    domain:window.location.hostname
})
```
### 2、获取cookie
```ts
cookie.getCookie(cname:string):string
```

### 3、删除所有cookie
```ts
cookie.delAllCookie(domain: string = document.domain)
```
## debounce

防抖,在指定的时间范围内多次触发，只会在最后停止`wait`毫秒之后才会触发,例如根据用户搜索发送请求的时候

```ts
/**
 * 防抖 延迟几秒后执行
 * @param { function } func
 * @param { number } wait 延迟执行毫秒数
 */
debounce(func: () => void, wait: number)
```

## diff
比较两个对象的不同
```js
const a = {
a: 232,
b: 3,
c:{
  a:123
}
}
const pre = {
b: 3,
c:{
  a:'131'
}
}
// a表示当前的数据，c表示之前的数据
console.log(diff(a,pre)); //{a: 232, c.a: 123}
```

## formCheck
多用于表单校验,目前只支持四种校验规则,下面是使用方法
```js
 let rules = {
    phone: [
      { require: true, message: "请输入手机号码" },
      { pattern: /^(1[3584]\d{9})$/, message: "请输入正确的手机号码" },
    ],
    password: [
      { require: true, message: "请输入密码" },
      { minLength: 6, message: "密码长度最低6位数" },
      { maxLength: 10, message: "密码长度最长10位数" },
    ],
  };
  let params = {
    phone: "15208888888",
    password: "111133",
  };
  let a = new formCheck(rules, params);
  let message = a.start();
  console.log(message);
```

## img

### 关于图片操作的一些方法

引入方式

```js
import {
  compressImg,
  getOrientation,
  resetOrientation,
  downloadFile,
  downloadFileByBase64,
  captureVideo,
} from "xyf_tools_js/lib/img";
```

使用方式

### 1、downloadFile, downloadFileByBase64 直接下载文件
```js
// 这个是下载网络图片
fetch('https://workyd.com/image/ydhl/detail_bac.png',{
      method:"get",
      responseType: 'blob'
}).then(res => {
  return res.blob()
}).then(blob => {
  const objectUrl = URL.createObjectURL(blob) // 生成一个url
  img.downloadFile(objectUrl,'ceshi.png')
})

// 必须是blob创建的url URL.createObjectURL(myBlob)
downloadFile(url, name)

//下载文件 base64文件的base64  name文件名称
downloadFileByBase64(base64, name)
```
### 2、获取视频的封面
其实就是对当前视频的一个截图，不一定是第一秒
```js
/**
<video id="videoEL" controls autoplay crossorigin="anonymous"
  src="https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4" width="500"></video>
*/
captureVideo(videoEle)  // videoEle html节点元素,返回的是base64
```
### 3、图片压缩
```js
// type OptionProp = {
//   scale: number; // 压缩比例 0-1，越小压缩越明显
//   size: number; // 表示的是多少M
// };
//  压缩图片
const base64 = await compressImg(file:File,options:OptionProp);
```

### 4、获取图片的旋转角度
```js
getOrientation(file:File,callBack:Function)

```

### 5、将图片旋转到正确的角度
```js
resetOrientation(base64: String, srcOrientation): Promise<string> 
```

## num

> 避免小数点计算的时候出现精度问题
> 引入方式

```js
import { accAdd, accSubtr, accMul, accDivCoupon } from "xyf_tools_js/lib/num";
```

使用方式

```js
accAdd(1, 2, 3); //可以添加更多参数  加
accSubtr(4, 2); //   减
accMul(4, 2); //    乘
accDivCoupon(4, 2); //    除
```

## obj

> 和对象有关的一些方法

> 引入方式

```js
import { cloneDeep } from "xyf_tools_js/lib/obj";
```

使用方式

```js
cloneDeep(object); //对象里面不能有函数
```

## js 原生交互

> js 调用原生方法

> 引入方式

```js
import "xyf_tools_js/lib/jsBridge";
```

源码实现

```js
/**
 * jsBridge 用于调用原生方法
 * window.jsNatives.dealFun()
 */
Function.prototype.getName = function () {
  return this.name || this.toString().match(/function\s*([^(]*)\(/)[1];
};
// 原生方法列表
let nativeMethods = [];
window.jsNatives = {
  isAndroid: false,
  initData() {
    const u = navigator.userAgent;
    const app = navigator.appVersion;
    const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; // g
    const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios缁堢
    if (isAndroid) {
      this.isAndroid = true;
    } else {
      this.isAndroid = false;
    }
  },
  bindWindow(callBack) {
    if (callBack != null) {
      window[callBack.getName()] = callBack;
      callBack = callBack.getName();
    }
    return callBack;
  },
  /**
   *  api  原生函数名称
   * params {
   *   api  原生调用的回掉函数
   *   data   需要得参数json
   *   callBack  回掉函数
   * }
   */
  dealFun(api, params = {}) {
    try {
      if (params.callBack) {
        window[api] = params.callBack;
        params.callBack = api;
      }
      const param = JSON.stringify(params);
      if (this.isAndroid) {
        if (window.callNativeHandler) {
          window.callNativeHandler[api](param);
        }
      } else {
        window.webkit.messageHandlers[api].postMessage(param);
      }
    } catch (err) {
      console.log(err);
    }
  },
};
window.jsNatives.initData();
```

## request 请求

> 引入方式

```js
import request, { clearToken } from "xyf_tools_js/lib/request";
```

使用方式

> 如果是 postfile 请求，需改修改 file 的 key，可以在 data 里面添加 name 属性

```js
/**
 * axios 请求库
 * options {
 *  method: get | delete | post | postfile | put | patch,
 *  data:  Object // 请求参数
 *  url:   string  // 请求的url
 *  headers:  Object  // 请求的header
 * }
 * userKey  默认值token  本次token的存储key
 * successCode 默认为0 数据成功返回时的code值
 */

const res = request(axios, options, userKey);

clearToken(); // 清除token 退出登录时调用
```

## 判断设备类型

> 检测挡墙的设备类型

引入方式

```js
import { isPC, isIos, isWeiXin } from "xyf_tools_js/lib/systemCheck";
```

使用方式

```js
isPC();
isIos();
isWeiXin();
isAndroid()
```

## throttle

> 节流，在一定时间内只会触发一次,可以用于防止二次点击，或者频繁操作的事件,注意这种方式有可能最后一次会不执行

> 引入方式

```js
import throttle from "xyf_tools_js/lib/throttle";
```

使用方式

```js
const fun = throttle(() => {}, 2000);
```

## time 方法

> 有关的时间格式化的处理方法

> 引入方式

```js
import { dateFormat } from "xyf_tools_js/lib/time";
```

使用方式

```js
/**
 *
 * @param {*} fmt  'yyyy-mm-dd HH:MM:SS'    2017-02-32
 * @param {*} date 要转化的日期
 */
const str = dateFormat(fmt: string, date: Date)
```

## tree 方法

> 有关树的操作方法汇总`以下的所有方法都会改变原始数组`

引入方式

```js
import {
  foreachTree,
  addTreePosition,
  createTree,
  filterTreeId,
} from "xyf_tools_js/lib/tree";
```

使用方式

### 1、foreachTree 遍历数组的每一项

```js
/**
 *
 * @param {*} data  要操作的数组
 * @param {*} childrenName child的key
 * @param {*} callback 每一项都会进行操作的回调函数
 */
 foreachTree(data: any[],
  childrenName = "children",
  callback = (item: any) => {})
```

### 2、addTreePosition 将数组添加 position 属性，记录 key 的历史

```js
/**
 * 将数组添加position属性，记录key的历史
 * @param {*} data  要操作的数组
 * @param {*} childrenName child的key
 * @param {*} idName position属性需要存储的key的值
 */
  var treeData = [
    {
      name:'1',
      children:[
        {
          name:'1-1',
          children:[
            {
              name:'1-1-1'
            },
            {
              name:'1-1-2'
            }
          ]
        },
        {
          name:'1-2',
          children:[
            {
              name:'1-2-1'
            },
            {
              name:'1-2-2'
            }
          ]
        }
      ]
    },
    {
      name:'2',
      children:[
        {
          name:'2-1',
          children:[
            {
              name:'2-1-1'
            }
          ]
        }
      ]
    },
  ]
  tree.addTreePosition(treeData,'children','name')
  console.log(treeData);
```

### 3、createTree 根据数组结构生成 tree

```js
/**
 * 根据数组结构生成tree
 *  @param { object } items 后台获取的数据
 *  @param { * } link 生成树形结构的依据
 *  @param { * } id 数据中的id
 */
const a = [
  {
    id: "31",
    name: "fas000",
  },
  {
    id: "24",
    name: "fas122",
    pid: "31",
  },
  {
    id: "35",
    name: "fas",
  },
];
const temp = createTree(a, "pid", "id");
```

### 4、filterTreeId 根据指定 id 过滤数组中的数据

```js
/**
 * 根据指定id过滤数组中的数据
 * @param items 传入的 数组
 * @param ids 返回指定id的数据
 */
const a = [
  {
    id: "31",
    name: "fas000",
    children: [
      {
        id: "24",
        name: "fas122",
        pid: "31",
      },
      {
        id: "35",
        name: "fas",
      },
    ],
  },
  {
    id: "389",
    name: "fas000",
    children: [
      {
        id: "240",
        name: "fas122",
        pid: "31",
      },
      {
        id: "354",
        name: "fas",
      },
    ],
  },
];

const temp = filterTreeId(a, ["389", "240", "24"]);
console.log(temp);
```

## 工具函数
引入方式
```js
import { runPromises,formatMoney } from "xyf_tools_js/lib/time";
```
### 1、promise 按顺序执行
```js
runPromises([pro1,peo2],initData) // initData 可以传入初始参数
```
### 2、formatMoney 将数字转化为千分位
```js
formatMoney(num) // num 传入的数字
```


## 解决 hash 改变不跳转

```js
window.addEventListener(
  "hashchange",
  () => {
    var currentPath = window.location.hash.slice(1); // 获取输入的路由
    if (this.$router.path !== currentPath) {
      this.$router.push(currentPath); // 动态跳转
    }
  },
  false
);
```

---
_Source: https://npm.io/package/xyf_tools_js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._