# utiltsplugin

> 关于ts个人封装的常用方法,支持按需引入和全量引入

Latest version **0.1.0** (published 2023-08-22) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2023-08-22 |
| First published | 2023-04-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 553.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | electrolux |
| Maintainers | electrolux_ |
| Keywords | ts, util |

## Links

- npm: https://www.npmjs.com/package/utiltsplugin
- Repository: https://gitee.com/Electrolux/util-ts-plugin
- npm.io page: https://npm.io/package/utiltsplugin

## Dependencies (6)

- [path](https://npm.io/package/path.md) ^0.12.7
- [jsonfile](https://npm.io/package/jsonfile.md) ^6.1.0
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.26.0
- [babel-polyfill](https://npm.io/package/babel-polyfill.md) ^6.26.0
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.24.1
- [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) ^4.2.3

## Alternatives

- [csv-to-markdown-table](https://npm.io/package/csv-to-markdown-table.md) — 47.0K weekly downloads
- [@sapphire/ratelimits](https://npm.io/package/@sapphire/ratelimits.md) — 4.4K weekly downloads
- [js-csvparser](https://npm.io/package/js-csvparser.md) — 2.0K weekly downloads
- [@adadapted/js-sdk](https://npm.io/package/@adadapted/js-sdk.md) — 251 weekly downloads
- [@grapecity/spread-sheets-sparklines](https://npm.io/package/@grapecity/spread-sheets-sparklines.md) — 103 weekly downloads

## Recent versions

- 0.1.0 (latest) — 2023-08-22
- 0.0.10 — 2023-05-05
- 0.0.9 — 2023-05-04
- 0.0.8 — 2023-05-04
- 0.0.7 — 2023-04-26
- 0.0.6 — 2023-04-11
- 0.0.5 — 2023-04-10
- 0.0.4 — 2023-04-10
- 0.0.3 — 2023-04-10
- 0.0.2 — 2023-04-10
- 0.0.1 — 2023-04-10

## README

<div align="center"><h1>
<br/>
🍿
<br />
utiltsplugin
<br /><br />
</h1>
<sup>
<br />
<br />
<a href="https://gitee.com/Electrolux/util-ts-plugin"><img src="https://img.shields.io/static/v1?label=version&message=v0.0.6&color=blue" alt="npm package" /></a><a href=https://space.bilibili.com/286773126><img src="https://img.shields.io/static/v1?label=Bili&message=Electrolux&color=red" alt="temp" /></a>
<a href="https://gitee.com/Electrolux/util-ts-plugin">   <img src="https://img.shields.io/static/v1?label=Author&message=electrolux&color=yellow" alt="demos" /></a>
<a href="https://gitee.com/Electrolux/util-ts-plugin">   <img src="https://img.shields.io/static/v1?label=Contribute&message=welcome&color=green" alt="demos" /></a>
<br />
</a>
<br />
Translations: <a href="">🇨🇳 汉语</a>
</sup>
</div>
# 1.frontUtilTs

我封装的常用的方法，包括webpack打包示例，支持按需引入和全量引入

## 1.1 html原生

```js

实例看 test/test.html，下面是示例.目前支持五种常用的方法.

提供两种引入
全量引入
 <script src="https://cdn.jsdelivr.net/npm/utiltsplugin/dist/UtilPlugin.min.js"></script>
 
按需加载
<script src="https://cdn.jsdelivr.net/npm/utiltsplugin/dist/UtilPluginAsync.min.js"></script>


console.log(LoadingPlugin)
let temp =new UtilPlugin()


```











## 1.2 npm 安装



```js
npm install utiltsplugin

import UtilPlugin from "utiltsplugin/dist/UtilPlugin.min.js"


let temp =new UtilPlugin(
)

let cache =temp.cacheFn()
cache.set("param",2)
cache.set("data",3)
console.log("cache",cache)

```



## 1.3 全量使用



```js
let temp =new UtilPlugin()
```



### 1.3.1 eventbus

```js
let eventbus =  temp.eventbusFn()
eventbus.on("测试", (data) => {
    console.log("触发了该死的事件:" + data)
})

function click1(){
    eventbus.emit("测试",JSON.stringify({"ip":"127.0.0.1"}))
}
console.log("eventbus",eventbus)
```





### 1.3.2 cache

```js
let cache = temp.cacheFn()
cache.set("param",2)
cache.set("data",3)
console.log("cache",cache)
```





### 1.3.3 error

```js
let error = temp.errorFn()
error.errLogAdd({
    id:1,
    msg:"传值报错"
},)
error.errLogAdd({
    id:2,
    msg:"传值报错"
},)

console.log("error",error,error.errLogGet())
```



### 1.3.4 tdk

```js
let tdk = temp.tdkFn()
new tdk({
    title:"我的title",
    description:"描述",
    keywords:"hi hi,ei"
})
```



### 1.3.5 ajax

```js
// 5.ajax 示例
let ajax = temp.ajaxFn()
const result = await ajax({
    method: 'GET',
    url: 'http:localhost:8086/get?id=2',
    data: {
        // redirectURI
    }
});

console.log(result)
```



## 1.4 按需使用

```js
注意返回的是一个promise对象，如果想用可以用await接受

let temp =new UtilPluginAsync()
```

### 1.4.1 eventbus

```js

let eventbus =await  temp.eventbusFn()
eventbus.on("测试", (data) => {
    console.log("触发了该死的事件:" + data)
})

function click1(){
    eventbus.emit("测试",JSON.stringify({"ip":"127.0.0.1"}))
}
console.log("eventbus",eventbus)
```





### 1.4.2 cache

```js
let cache = await temp.cacheFn()
cache.set("param",2)
cache.set("data",3)
console.log("cache",cache)
```





### 1.4.3 error

```js
let error =await  temp.errorFn()
error.errLogAdd({
    id:1,
    msg:"传值报错"
},)
error.errLogAdd({
    id:2,
    msg:"传值报错"
},)

console.log("error",error,error.errLogGet())
```



### 1.4.4 tdk

```js
let tdk =await  temp.tdkFn()
new tdk({
    title:"我的title",
    description:"描述",
    keywords:"hi hi,ei"
})
```



### 1.4.5 ajax

```js
// 5.ajax 示例
let ajax =await  temp.ajaxFn()
const result = await ajax({
    method: 'GET',
    url: 'http:localhost:8086/get?id=2',
    data: {
        // redirectURI
    }
});

console.log(result)
```

### 1.4.6 webcomponent

```js
let webComponentFn =await  temp.webComponentFn()
```



## 1.5 一些解决的坑

```js
1.webpack 打包的css 无法导出成stylesheet，全部都是module导致shadowdom attach不上去

solution：css-loader 设置 exporttype 格式为 string，然后 nw stylesheet ,然后把字符串换上去

2.webpack loader 加载问题(报错再vscode看不到)

solution：再console控制台中 npm run build >> text.txt

3.webpack loader css加载顺序问题和加载规则问题
如果我们想导出 css文件，我们剋有使用mini-css-extract-plugin 然后 // new MiniCssExtractPlugin({
//   filename: "./css/[name].css",
// }),

先用css-loader加载css文件，再用style-loader 或者 是 MiniCssExtractPlugin加载到页面上，后面两个不能一起用。不然会失效

如果你想要输出stylesheet 那么我们只用一个css-loader就可以了

4.导出带了default 有点蠢
再webpack 打包配置中 output 加上 libraryExport 然后选项选择 default


5.多入口问题 和 异步 文件输出
entry:[name] 可以表示 output 中的输出 // 千万不要用id 可读性太低了
异步文件输出文职：outputchunkFilename: "./build/[name].min.js", // 异步加载的属性
```







## 1.6 目前功能

```shell
├─Api
│      ajax.ts # 需要跨域支持
│
├─Async
│      promise.ts # 延迟promise.all
│
├─Auth
│      control.ts # 控制组件显示隐藏
│      router.ts # 路由合并
│
├─Canvas
│      paint.ts # 
├─Data
│      cache.ts
│      eventbus.ts # 发布者订阅者模式
│      handle.ts # 链式处理数据
│      memoize.ts # 函数记忆
│      proxy.js
│      UiProxy.js
│      UiProxy.ts
│
├─MiddleWare
│      chain.ts # 责任链模式
│      curry.ts # 柯里化
│      enhance.ts # 函数增强 | 函数劫持
│      overload.ts # 函数重载
│      singleton.ts # 单例模式
│      strategy.ts # 策略模式
│
├─Project
│      error.ts
│
└─Proto
        index.ts
        
```











## 1.7 changelog

```
ver0.0.8 添加按需引入
ver0.0.1 初始化
```

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