# hks-function

> 常用函数

Latest version **1.0.8** (published 2021-07-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install hks-function
pnpm add hks-function
yarn add hks-function
bun add hks-function
```

## 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 | 2021-07-02 |
| First published | 2021-06-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 245.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | 小可爱天下无敌 |
| Maintainers | hks990109 |
| Keywords | throttle, debounce, oss上传 |

## Links

- npm: https://www.npmjs.com/package/hks-function
- Repository: https://github.com/HuangKaiSong/hks-utlis-function
- Homepage: https://github.com/HuangKaiSong/hks-utlis-function#readme
- Issues: https://github.com/HuangKaiSong/hks-utlis-function/issues
- npm.io page: https://npm.io/package/hks-function

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5

## Recent versions

- 1.0.8 (latest) — 2021-07-02
- 1.0.6 — 2021-07-02
- 1.0.5 — 2021-07-01
- 1.0.4 — 2021-07-01
- 1.0.3 — 2021-07-01
- 1.0.2 — 2021-06-29
- 1.0.1 — 2021-06-29
- 1.0.0 — 2021-06-29

## README

# hks-function

-----

一个基于 `vue` 的封装函数, 兼容vue2 和vue3

| ⚠️ 在 `vue3` 的 `setup` 方法中你可以这样获取实例属性 

```vue
import { onMounted, getCurrentInstance } from "vue";

export default {
    name: 'App',
    setup() {
        onMounted(() => {
          const { appContext : { config: { globalProperties } } } = getCurrentInstance()
        
        console.log(globalProperties.$hks)
    })
},

```

### 安装

使用 npm:

```shell
$ num install hks-function
$ npm i hks-function
```

使用 yarn:

```shell
$ num add hks-function
```

### 用法

#### 在 `vue2` 使用

```js
import Vue from 'vue'
import App from './App'
import hks from 'hks-function'

Vue.use(hks)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
```

----

#### 在 `vue3` 使用

```js
import { createApp } from 'vue'
import App from './App.vue'
import hks from '../lib/hks-function.umd.min'

createApp(App)
    .use(hks)
    .mount('#app')
```

### 使用示例

1. 节流

```
规定时间内，只触发一次，可以通过设置immediate来决定触发的时机在这个时间的开始，还是结束的时候执行。

throttle(func, wait = 500, immediate = true)
@param func <Function> 触发回调执行的函数
@param wait <Number> 时间间隔，单位ms
@parms immediate <Bool> 在开始还是结束处触发
```

```jsx
<template>
    <div class="">
		<!-- 此处用法为在模板中使用，无需写this，直接$hks.throttle()即可 -->
    	<div class="throttle" @click="$hks.throttle(btnAClick, 500)">
    		露从今夜白
    	</div>
    	<div class="throttle" @click="btnBClick">
    		月是故乡明
    	</div>
    </div>
</template>
<script>
  export default {
    methods: {
        btnAClick() {
            console.log('btnClick');
        },
        btnBClick() {
            // 此处用法为在js中调用，需要写this.$hks.throttle()
            this.$hks.throttle(this.toNext, 500)
        },
        toNext() {
            console.log('btnBClick');
        }
    }
}
</script>
```

2. 防抖

```
在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效
debounce(func, wait = 500, immediate = false)

@param func <Function> 触发回调执行的函数
@param wait <Number> 时间间隔，单位ms
@parms immediate <Bool> 在开始还是结束处触发
```

```jsx
<template>
    <div class="">
		<!-- 此处用法为在模板中使用，无需写this，直接$hks.debounce()即可 -->
    	<div class="throttle" @click="$hks.debounce(btnAClick, 500)">
    		露从今夜白
    	</div>
    	<div class="throttle" @click="btnBClick">
    		月是故乡明
    	</div>
    </div>
</template>
<script>
  export default {
    methods: {
        btnAClick() {
            console.log('btnClick');
        },
        btnBClick() {
            // 此处用法为在js中调用，需要写this.$hks.debounce()
            this.$hks.debounce(this.toNext, 500)
        },
        toNext() {
            console.log('btnBClick');
        }
    }
}
</script>
```

3. 时间格式化

```js
timeFormat(timestamp, format = "yyyy-mm-dd")
@parms timestamp <String> 任何合法的时间格式、秒或毫秒的时间戳
@pparm <String> 时间格式，可选。默认为yyyy-mm-dd
```

4. 多久之前

```js
timeFrom(time, format = String | false)
@param timestamp <String> 时间戳
@param format <String / false> 时间格式，默认为yyyy-mm-dd，年为"yyyy"，月为"mm"，日为"dd"，时为"hh"，分为"MM"，秒为"ss"，

```

```jsx
<template>
	<div>
		<div>
			时间为：{{$hks.timeFrom(new Date().getTime(), 'yyyy年mm月dd日')}}
		</div>
	</div>
</template>
```

5. 数组去重

```js
  let arr1 = [1,2,3,1,23,123,1]
  console.log(this.$hks.uniq(arr1)) // [1, 2, 3, 23, 123]
```

6. 数组分组

```js
    let arr1 = [
      {id: 2, group: 'admin', name: 'xxx'},
      {id: 3, group: 'web', name: 'xxx'},
      {id: 4, group: 'admin', name: 'xxx'},
    ]
    console.log(this.$hks.group(arr1, 'group')) // {admin: Array(2), web: Array(1)}
```

7. 将多维数组转化为一维

```js
    let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
    console.log(this.$hks.flatMap(arr)) // [0, 1, 2, 3, 4, 5, 6, 7]
```

8。 对象里的属性求和

```js
    let arr = [
      {
        subject: 'math',
        score: 10
      },
      {
        subject: 'chinese',
        score: 20
      },
      {
        subject: 'english',
        score: 30
      }
    ];
    console.log(this.$hks.objSum(arr, 'score')) // 60
```

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