控制台调试库bigonion-kit （dev）
本帖最后由 bigonion 于 2023-3-11 11:53 编辑# Web调试库bigonion-kit （dev）
## 起因
最近发现自己写脚本重复的函数比较多，捉摸着写一个自己的Npm包，来封装这些常用的库，并适当的暴露到全局变量当中
另外为了解决原生cookie操作比较困难，console.log，document.getElementById写起来比较费劲，没有直观的delay延迟函数等这些痛点问题，提供了
* log
* findId
* findClass
* setCookie
* getCookie
* sleep
等等这些非常简单，但是一时间想在控制台调试（比如kit.addStyle就对应了GM_addStyle），却又不太好写的函数，也不太愿意导入类似与Jquery这些非常臃肿的包，bigonion-kit 就很好解决了这些痛点，可以帮助你更方便的在控制台调试
## 快速上手
```js
// @require https://cdn.jsdelivr.net/npm/bigonion-kit/umd/umd-kit.min.js
//油猴（或其他）导入后控制台直接输入以下代码，快速体验
kit.addStyle(`body{background:pink}`)//快速增加style
sleep(2000).then(()=>{log("Delaying now is so easy!")})//delay函数
kit.sound2Word()//快速语言转换
```
# Onion的dev-kit
## npm链接
(https://www.npmjs.com/package/bigonion-kit?activeTab=readme)
## 下载(Download)
```js
npm i bigonion-kit
```
## 简介(Introduction)
本NPM包提供了This NPM package provides
* moveIt
* findId
* findClass
* setCookie
* getCookie
* log
* sleep
* addStyle
* removeAddedStyle
* sound2Word
* getUUID
* ajax
* isFocus
常用方法（未完待续...）
## 支持umd，web请使用umd来导入(Support umd, please use umd to import web)
eg：
```js
<script src="https://cdn.jsdelivr.net/npm/bigonion-kit/umd/umd-kit.min.js"></script>
```
ES6导入
```js
<script type="module">
import kit from "https://cdn.jsdelivr.net/npm/bigonion-kit/index.min.mjs";
window.kit = kit;
window.moveIt = kit.moveIt;
window.findId = kit.findId;
window.findClass = kit.findClass;
window.setCookie = kit.setCookie;
window.getCookie = kit.getCookie;
window.log = kit.log;
window.sleep = kit.sleep;
window.version=kit.version;
</script>
```
## Nodejs
使用.mjs扩展来支持import
```js
import kit from 'bigonion-kit/index.mjs'
```
或commonJS规范
```js
const kit = require('bigonion-kit/umd/umd-kit.js')
```
来快速导入
## 函数详情 (Function details)
web已经挂载全局变量,可以直接输入`kit`来查看已有的函数
也可以直接控制台输入
```js
log("你好")
```
来使用
### **sleep**
Eg:
```js
/**
* fast pause some time, just like delay function
* @param {int} time
* @Return {Promise}
* @public
*/
sleep(3000).then(()=>{log("你已经成功导入devKit")})
```
### **log**
Eg:
```js
/**
* fast log sth...
* @param {string} a
* @public
*/
log("Nihao")
```
### **findId**
Eg:
```js
/**
* fast find Element by Id
* @param {string} id
* @return {Object}
* @public
*/
findId("id")
```
### **findClass**
Eg:
```js
/**
* fast find Element by className
* @param {string} className
* @return {Array}
* @public
*/
findClass("className")
```
### **moveIt**
Eg:
```js
/**
* fast move Sth by holding on "controlEle" to move "movedEle"
* @param {Object} controlEle
* @param {Object} movedEle
* @public
*/
controlEle=findId("controlEle")
movedEle=findId("movedEle")
moveIt(controlEle,movedEle)
```
### **setCookie**
Eg:
```js
/**
* fast set cookie by Native function
* @param {string} cname
* @param {Any} cvalue
* @param {int} exdays {days}
* @public
*/
setCookie("cookieName","cookieValue", 30)
```
### **getCookie**
Eg:
```js
/**
* fast get cookie value
* @param {string} cname
* @return {string} cvalue
* @public
*/
getCookie("cookieName")
```
## 版本更新日志(Version update log)
v0.4.x demo Verv0.5.3 增加了esm和 umd模块
v0.7.4 增加了isFocus、ajax、setClipboard、getUUID
## 开源协议(Open source agreement)
**MIT**
## 作者(Author)
**bigonion**
nameSpace: (https://bigonion.cn)| [大聪花的家](https://bigonion.cn)
Email: bigonion@bigonion.cn **&&** olderonion@gmail.com 没有类型提示吗？ shabby 发表于 2023-1-24 12:32
没有类型提示吗？
函数详情写了类型，但是你的意思是控制台提示类型吗？ bigonion 发表于 2023-1-24 16:36
函数详情写了类型，但是你的意思是控制台提示类型吗？
呃呃，我的意思是通过 pnpm 安装然后在 vscode 里使用的时候的 类型提示 shabby 发表于 2023-1-25 10:42
呃呃，我的意思是通过 pnpm 安装然后在 vscode 里使用的时候的 类型提示
这个怎么实现呢{:4_102:} bigonion 发表于 2023-1-25 16:55
这个怎么实现呢
packjson里声明types类型库
或者独立一个编译一个dts发布到ts的tpyes库里 李恒道 发表于 2023-1-25 20:05
packjson里声明types类型库
或者独立一个编译一个dts发布到ts的tpyes库里
话说jsdoc可以么？
不写ts，dts好麻烦啊
王一之 发表于 2023-1-25 21:51
话说jsdoc可以么？
不写ts，dts好麻烦啊
ts的资料已经很少了
jsdoc的资料更少，而且类型支持能力也不是dts灵活
写jsdoc几乎可以说是自己为难自己... 李恒道 发表于 2023-1-25 22:06
ts的资料已经很少了
jsdoc的资料更少，而且类型支持能力也不是dts灵活
写jsdoc几乎可以说是自己为难自己. ...
最近去看看ts bigonion 发表于 2023-1-26 16:33
最近去看看ts
哥哥加油~
页:
[1]