Collection of common function tools
npm install @imshann/utilsCollection of common function tools
- Introduction
- import
- timer
- deepLoop
- toNumber
- Math
- simplifiedFraction
- event
- decorator
- getPosition
- tree
- flatten
- findById
- after
- before
- append
- prepend
- remove
- common
- clone
- value
- url
- guid
- object
- number
- between
- getTextWidthByElement
- strategy
- limitMin
- getCharacterWidth
- selection
- getText(): string
- element
- append(element: HTMLElement, position: number): void
- html
- toSourceIndex
- string
- toKebabCase
- toUnderScoreCase
- isUnderScoreCase
- toLowerCamelCase
- ucfrist
- append
- delete
- toHTML
- Proxy
- call method at the class outer
- call method in the class
- Collection
- isNotNull
- isNull
- isFunction
- isNumber
- isArray
- isString
- isUndefined
- isNotUndefined
- isBoolean
- isNotBoolean
- isEmpty
- isNotEmpty
- isTelephone
- isEmail
``js`
import * as _ from "@imshann/utils";
`js`
const newTimer = _.timer({delay:3000, callback: () => {}})
newTimer.start();
newTimer.stop();
`js`
_.deepLoop(data, (item) => {
console.log(item);
});
`js`
_.toNumber("123"); // => 123
简化分数
`js`
_.simplifiedFraction(4, 24); // => { numerator: 1, denominator: 6 }
事件类
装饰器
`js`
document.addEventListener("click", (event) => {
const dv = _.decorator(event);
});
#### getPosition
获取鼠标事件的 offset 位置
`js`
dv.getPosition(); // => {x: 100, y: 100}
`js`
const data = [
{
id: "da0bb8d9-6d37-4971-98a8-e762d684ba26",
label: "A",
children: [
{
id: "a2f126a5-ce30-4f52-aacf-129d5958de58",
label: "A1",
},
],
},
];
`js`
_.tree(data).flatten();
// => [{id: "da0bb8d9-6d37-4971-98a8-e762d684ba26", label: "A"}, {id: "a2f126a5-ce30-4f52-aacf-129d5958de58", label: "A1"}]
根据编号查找树的节点
`js`
_.tree(data).findById("a2f126a5-ce30-4f52-aacf-129d5958de58");
// => {id: "a2f126a5-ce30-4f52-aacf-129d5958de58", label: "A1"}
追加元素到指定节点后面
`js`
_.tree(data)
.findById("a2f126a5-ce30-4f52-aacf-129d5958de58")
.after({ label: "A2" });
// => [{id: "a2f126a5-ce30-4f52-aacf-129d5958de58", label: "A1"}, {id: "d7f35d7d-93fe-48d4-ab3d-5d37dc0dbcb1", label: "A2"}]
追加元素到指定节点前面
`js`
_.tree(data)
.findById("a2f126a5-ce30-4f52-aacf-129d5958de58")
.after({ label: "A2" });
/*
[
{ id: "d7f35d7d-93fe-48d4-ab3d-5d37dc0dbcb1", label: "A1" },
{ id: "a2f126a5-ce30-4f52-aacf-129d5958de58", label: "A1" },
]
*/
追加元素到指定节点的子节点列表往后的位置
`js`
_.tree(data)
.findById("da0bb8d9-6d37-4971-98a8-e762d684ba26")
.append({ label: "A2" });
// => [{id: "a2f126a5-ce30-4f52-aacf-129d5958de58", label: "A1"}, {id: "d7f35d7d-93fe-48d4-ab3d-5d37dc0dbcb1", label: "A1"}]
往子节点集合的前面追加新节点
`js`
_.tree(data)
.findById("da0bb8d9-6d37-4971-98a8-e762d684ba26")
.append({ label: "A2" });
/*
=> [
{id: "d7f35d7d-93fe-48d4-ab3d-5d37dc0dbcb1", label: "A2"}，
{id: "a2f126a5-ce30-4f52-aacf-129d5958de58", label: "A1"}
]
*/
移除指定节点
`js`
_.tree(data).remove("a2f126a5-ce30-4f52-aacf-129d5958de58");
// => []
对数组进行浅拷贝
`js`
_.clone([1, 2]); // => [1, 2]
获取对象或数组的值
`js`
_.value([1, 2], 1); // => 2
_.value([1, 2], 2); // => null
_.value({ a: { b: "c" } }, "a.b"); // => c
setQueryParam(key: string, value: string): string
`js`
_.url("https://example.com/index.html?id=1").setQueryParam({ name: "shann" });
// => https://example.com/index.html?id=1&name=shann
`js`
_.guid();
hasValue(value: string | boolean | number): boolean
`js`
const obj = { isActive: true };
_.object(obj).hasValue(true);
// => true
filterEmpty(): ObjectExtend
`js`
_.object({ a: 1, b: null }).filterEmpty();
// => { a: 1 }
each(fn: (value: any, key?: string) => void): void
`js`
_.object({ color: "red", backgroundColor: "blue" }).each((value, key) => {
values.push(key + ":" + value);
});
// => ['color:red', 'backgroundColor:blue']
assign( newVal: { [key: string]: any }, defaults: { [key: string]: any } = {} )
`js`
_.object({ a: 1, b: 2 }).assign({ a: 2, c: 3 });
// => { a: 2, b: 2 }
extend(target: { [index: string]: any }): ObjectExtend
`js`
_.object({ a: 1, b: 2 }).extend({ a: 2, c: 3 });
// => { a: 2, b: 2, c: 3 }
clone()
`js`
_.object({ a: 1, b: 2 }).clone();
// => { a: 1, b: 2 }
clear(properties: string[]): void
`js`
_.object({ a: 1, b: 2 }).clone(["b"]);
// => { a: 1 }
between(range: number[]): boolean
`js`
_.number(1).between(0, 10);
getTextWidthByElement(element: HTMLElement): number
`js`
_.getTextWidthByElement(document.getElementById("text")); // => 107
`js
const strategy = _.strategy();
strategy.add("case1", () => {
return "I am case1";
});
strategy.add("case2", () => {
return "I am case2";
});
strategy.call("case1"); // => I am case1
strategy.call("case2"); // => I am case2
`
limitMin(value: number, least: number): number
`js`
_.limitMin(10, 0); // => 10
_.limitMin(-1, 0); // => 0
getCharacterWidth(character: stirng, font: string): number
`js`
_.getCharacterWidth("A", "bold 12pt arial"); // => 14
`js`
_.selection().getText();
`js
function getElement(content) {
const div = document.createElement("div");
div.innerHTML = content;
return div;
}
const parent = _.element(document.querySelector("#parent"));
parent.append(getElement("111"));
parent.append(getElement("333"));
parent.append(getElement("222"), 0);
//
html
$3
js
// => a b => a b
// => 012 => 01234567
_.html("a b").toSourceIndex(2); // => 7
`string
$3
转成横杆命名
js
_.toKebabCase("MyName"); // => my-name
`$3
转成下划线命名
js
_.toUnderScoreCase("MyName"); // => my_name
`$3
判断是否下划线命名
js
_.isUnderScoreCase("my_name"); // => true
`$3
将大驼峰命名转成小驼峰命名
js
_.toLowerCamelCase("MyName"); // => myName
_.toLowerCamelCase("my_name"); // => myName
`$3
将英文字符串的首字母转成大写
js
_.ucfrist("home"); // => Home
`$3
js
_.string("ab").append("c"); // => abc
`$3
js
_.string("abc").delete(1); // => ac
`$3
js
_.string("a b").toHTML(); // => a b
`Proxy
$3
js
class Target {
sayHello() {
console.log("Hello, I am target class.");
}
}const target = _.ProxyFactory(Target, null, {
beforeMethod() {
console.log("The beforeMethod method has been called.");
},
afterMethod() {
console.log("The afterMethod method has been called.");
},
});
target.sayHello();
// => The beforeMethod method has been called.
// => Hello, I am target class.
// => The afterMethod method has been called.
`$3
js
class Target {
initialize() {
this.sayHello();
}
sayHello() {
console.log("Hello, I am target class.");
}
}const target = _.ProxyFactory(Target, null, {
beforeMethod() {
console.log("The beforeMethod method has been called.");
},
afterMethod() {
console.log("The afterMethod method has been called.");
},
});
// => The beforeMethod method has been called.
// => Hello, I am target class.
// => The afterMethod method has been called.
`Collection
add(element: any, index?: number): []
js
_.collection([1]).add(2); // => [1, 2]
_.collection([1]).add([2, 3]); // => [1, 2, 3]
_.collection([1, 3]).add(2, 1); // => [1, 2, 3]
_.collection([1, 4]).add([2, 3], 1); // => [1, 2, 3, 4]
`rewrite(element: any, start: number): []
js
_.collection([1]).rewrite(2, 0); // => [2]
_.collection([1, 2]).rewrite([2, 3], 1); // => [1, 2, 3]
`delele(index: number): []
js
_.collection([1, 2]).delete(1); // => [1]
`assign(target: { [key: string]: any })
js
_.collection([{ a: 1 }, { a: 2 }]).assign({ b: 3 }); // => [{ a: 1, b: 3}, { a: 2, b: 3}]
`removeByField(field: string, value: any): void
js
_.collection([{ a: 1 }, { a: 2 }]).removeByField("a", 1); // => [{ a: 2}]
`isNotNull
js
_.isNotNull("foo"); // => true
_.isNotNull(null); // => false
`isNull
js
_.isNull(null); // => true
_.isNull("foo"); // => false
`isFunction
js
_.isFunction(() => {}); // => true
`isNumber
js
_.isNumber(123); // => true
`isArray
js
_.isArray([]); // => true
`isString
js
_.isString("111"); // => true
`isUndefined
js
_.isUndefined(undefined); // => true
`isNotUndefined
js
_.isNotUndefined(undefined); // => false
`isBoolean
js
_.isBoolean(true); // => true
`isNotBoolean
js
_.isNotBoolean(true); // => false
`isEmpty
js
_.isEmpty(null); // => true
_.isEmpty(undefined); // => true
_.isEmpty([]); // => true
_.isEmpty(""); // => true
_.isEmpty(0); // => true
_.isEmpty({}); // => true
`isNotEmpty
js
_.isNotEmpty([1]); // => true
`isTelephone
js
_.isTelephone("13512345678"); // = true
`isEmail
js
_.isEmail("test@example.com"); // => true
``