@imshann/utils v1.5.1

Introduction

Collection of common function tools

• Introduction
  • import
  • 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

import

import * as _ from "@imshann/utils";

Math

simplifiedFraction

简化分数

_.simplifiedFraction(4, 24); // =>  { numerator: 1, denominator: 6 }

event

事件类

decorator

装饰器

document.addEventListener("click", (event) => {
    const dv = _.decorator(event);
});

getPosition

获取鼠标事件的 offset 位置

dv.getPosition(); // => {x: 100, y: 100}

tree

const data = [
    {
        id: "da0bb8d9-6d37-4971-98a8-e762d684ba26",
        label: "A",
        children: [
            {
                id: "a2f126a5-ce30-4f52-aacf-129d5958de58",
                label: "A1",
            },
        ],
    },
];

flatten

_.tree(data).flatten();
// => [{id: "da0bb8d9-6d37-4971-98a8-e762d684ba26", label: "A"}, {id: "a2f126a5-ce30-4f52-aacf-129d5958de58", label: "A1"}]

findById

根据编号查找树的节点

_.tree(data).findById("a2f126a5-ce30-4f52-aacf-129d5958de58");
// => {id: "a2f126a5-ce30-4f52-aacf-129d5958de58", label: "A1"}

after

追加元素到指定节点后面

_.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"}]

before

追加元素到指定节点前面

_.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" },
]
*/

append

追加元素到指定节点的子节点列表往后的位置

_.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"}]

prepend

往子节点集合的前面追加新节点

_.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"}
]
*/

remove

移除指定节点

_.tree(data).remove("a2f126a5-ce30-4f52-aacf-129d5958de58");
// => []

common

clone

对数组进行浅拷贝

_.clone([1, 2]); // => [1, 2]

value

获取对象或数组的值

_.value([1, 2], 1); // => 2
_.value([1, 2], 2); // => null
_.value({ a: { b: "c" } }, "a.b"); // => c

url

setQueryParam(key: string, value: string): string

_.url("https://example.com/index.html?id=1").setQueryParam({ name: "shann" });
// => https://example.com/index.html?id=1&name=shann

guid

_.guid();

object

hasValue(value: string | boolean | number): boolean

const obj = { isActive: true };
_.object(obj).hasValue(true);
// => true

filterEmpty(): ObjectExtend

_.object({ a: 1, b: null }).filterEmpty();
// => { a: 1 }

each(fn: (value: any, key?: string) => void): void

_.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 } = {} )

_.object({ a: 1, b: 2 }).assign({ a: 2, c: 3 });
// => { a: 2, b: 2 }

extend(target: { index: string: any }): ObjectExtend

_.object({ a: 1, b: 2 }).extend({ a: 2, c: 3 });
// => { a: 2, b: 2, c: 3 }

clone()

_.object({ a: 1, b: 2 }).clone();
// => { a: 1, b: 2 }

clear(properties: string[]): void

_.object({ a: 1, b: 2 }).clone(["b"]);
// => { a: 1 }

number

between

between(range: number[]): boolean

_.number(1).between(0, 10);

getTextWidthByElement

getTextWidthByElement(element: HTMLElement): number

_.getTextWidthByElement(document.getElementById("text")); // => 107

strategy

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

limitMin(value: number, least: number): number

_.limitMin(10, 0); // => 10
_.limitMin(-1, 0); // => 0

getCharacterWidth

getCharacterWidth(character: stirng, font: string): number

_.getCharacterWidth("A", "bold 12pt arial"); // => 14

selection

getText(): string

_.selection().getText();

element

append(element: HTMLElement, position: number): void

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);

// <div id="parent">
//   <div>111</div>
//   <div>222</div>
//   <div>333</div>
// </div>

html

toSourceIndex

// => a b => a b
// => 012 => 01234567
_.html("a b").toSourceIndex(2); // => 7

string

toKebabCase

转成横杆命名

_.toKebabCase("MyName"); // => my-name

toUnderScoreCase

转成下划线命名

_.toUnderScoreCase("MyName"); // => my_name

isUnderScoreCase

判断是否下划线命名

_.isUnderScoreCase("my_name"); // => true

toLowerCamelCase

将大驼峰命名转成小驼峰命名

_.toLowerCamelCase("MyName"); // => myName
_.toLowerCamelCase("my_name"); // => myName

ucfrist

将英文字符串的首字母转成大写

_.ucfrist("home"); // => Home

append

_.string("ab").append("c"); // => abc

delete

_.string("abc").delete(1); // => ac

toHTML

_.string("a b").toHTML(); // => a b

Proxy

call method at the class outer

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.

call method in the class

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): []

_.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): []

_.collection([1]).rewrite(2, 0); // => [2]
_.collection([1, 2]).rewrite([2, 3], 1); // => [1, 2, 3]

delele(index: number): []

_.collection([1, 2]).delete(1); // => [1]

assign(target: { key: string: any })

_.collection([{ a: 1 }, { a: 2 }]).assign({ b: 3 }); // => [{ a: 1, b: 3}, { a: 2, b: 3}]

removeByField(field: string, value: any): void

_.collection([{ a: 1 }, { a: 2 }]).removeByField("a", 1); // => [{ a: 2}]

isNotNull

_.isNotNull("foo"); // => true
_.isNotNull(null); // => false

isNull

_.isNull(null); // => true
_.isNull("foo"); // => false

isFunction

_.isFunction(() => {}); // => true

isNumber

_.isNumber(123); // => true

isArray

_.isArray([]); // => true

isString

_.isString("111"); // => true

isUndefined

_.isUndefined(undefined); // => true

isNotUndefined

_.isNotUndefined(undefined); // => false

isBoolean

_.isBoolean(true); // => true

isNotBoolean

_.isNotBoolean(true); // => false

isEmpty

_.isEmpty(null); // => true
_.isEmpty(undefined); // => true
_.isEmpty([]); // => true
_.isEmpty(""); // => true
_.isEmpty(0); // => true
_.isEmpty({}); // => true

isNotEmpty

_.isNotEmpty([1]); // => true

isTelephone

_.isTelephone("13512345678"); // = true

isEmail

_.isEmail("test@example.com"); // => true