feature: make funciton more powerful

Author: Simon he

README.md

@@ -8,6 +8,12 @@
 ## 此文是介绍封装的工具函数的文档[simon-js-tool](https://www.npmjs.com/package/simon-js-tool)
 目前整理了<strong>90+</strong>的常用函数,还在持续更新中...,你的认可是对我最大的鼓励!
 
+## 亮点
+- 纯js的工具函数,不依赖vue,react,angular
+- dom操作的api封装,如在vue中使用是不需要onMounted获取dom节点的,可以直接使用class或者id传入
+- 副作用函数,可以在函数执行的结果去stop,也会在页面销毁时被自动stop
+- api设计简单、实用
+
 ## 更多
 - 导出函数 [exports-function](https://github.com/SimonHe1995/exportsFunction)
 - threejs [@simon_he/s-three](https://github.com/SimonHe1995/sThree)
@@ -132,14 +138,15 @@ export default defineConfig({
 - 插入dom元素
 - 参数:
   - parent: string | HTMLElement 父元素
-  - element: 插入元素
+  - element: string | HTMLElement 插入元素
   - target: 插入位置 (默认插入到第一个节点)
 ```js
 const div = createElement('div', {
-  id: 'main',
+  id: 'test',
   style: 'background: red;font-size:20px',
 })
 insertElement('#main', div) // 插入到第一个节点
+insertElement('#main', '#test') // 插入到第一个节点
 insertElement('#main', div, null) // 插入到最后
 ```
 
@@ -969,13 +976,13 @@ vFetch(options:Record<string,string>).then(res =>{
 })
 ```
 
-
 ## stringify
 - 参数:
   - obj: 待转换的对象
 ```javascript
 console.log(stringify({ user: 'simon', age: '18' })) // 'user=simon&age=18'
 ```
+
 ## parse
 - 参数:
   - str: 待转换的字符串

README_en.md

@@ -8,6 +8,12 @@
 ## This article is documentation that describes the encapsulated utility functions [simon-js-tool](https://www.npmjs.com/package/simon-js-tool)
 At present, I have sorted out <strong>90+</strong> commonly used functions, and I am still updating..., and your recognition is the biggest encouragement to me!
 
+## Highlights
+- Pure js tool functions, not dependent on vue, react, angular
+- API encapsulation for dom operations, such as those used in vue, does not require onMounted to obtain dom nodes, and can be passed in directly using class or id
+- Side effect functions, which can be destop as a result of function execution, are also automatically stopped when the page is destroyed
+- Api design is simple and practical
+
 ## More
 - Export function [exports-function](https://github.com/SimonHe1995/exportsFunction)
 - threejs [@simon_he/s-three](https://github.com/SimonHe1995/sThree)
@@ -133,7 +139,7 @@ export default defineConfig({
 - Insert a dom element
 - params:
   - parent: string | HTMLElement /* The parent element */
-  - element: HTMLElement /* Insert elements */
+  - element: string | HTMLElement /* inserts the element */
   - target?: null | HTMLElement /* Insertion position (inserted to first node by default) */
 ```js
 const div = createElement('div', {

src/CreateSignatureCanvas.ts

@@ -1,9 +1,14 @@
 import type { ISignature } from './types'
+import { addEventListener } from './addEventListener'
+import { insertElement } from './insertElement'
+import { removeElement } from './removeElement'
 export class CreateSignatureCanvas implements ISignature {
   canvas: HTMLCanvasElement = document.createElement('canvas')
   ctx: CanvasRenderingContext2D = this.canvas.getContext('2d')!
+  stop: (() => void)[] = []
   constructor(w = 400, h = 400) {
     this.createCanvas(w, h)
+    window.onunload = () => this.unmount()
   }
 
   createCanvas(w = 400, h = 400) {
@@ -16,41 +21,48 @@ export class CreateSignatureCanvas implements ISignature {
     this.ctx.lineCap = 'round'
     let offsetY = 0
     let offsetX = 0
-    this.canvas.addEventListener('touchstart', (e) => {
+    this.stop.push(addEventListener(this.canvas, 'touchstart', (e: TouchEvent) => {
       offsetY = this.canvas.offsetTop
       offsetX = this.canvas.offsetLeft
       this.ctx.beginPath()
       this.ctx.moveTo(e.changedTouches[0].pageX + 2 - offsetX, e.changedTouches[0].pageY - offsetY)
-    }, false)
+    }, false))
     let down = false
-    this.canvas.addEventListener('mousedown', (e) => {
+    this.stop.push(addEventListener(this.canvas, 'mousedown', (e: MouseEvent) => {
       offsetY = this.canvas.offsetTop
       offsetX = this.canvas.offsetLeft
       down = true
       this.ctx.beginPath()
       this.ctx.moveTo(e.pageX + 2 - offsetX, e.pageY - offsetY)
-    }, false)
-
-    this.canvas.addEventListener('mousemove', (e) => {
+    }, false))
+    this.stop.push(addEventListener(this.canvas, 'mousemove', (e: MouseEvent) => {
       if (!down)
         return
       this.ctx.lineTo(e.pageX + 2 - offsetX, e.pageY - offsetY)
       this.ctx.stroke()
-    }, false)
-    this.canvas.addEventListener('mouseup', () => down = false)
-
-    this.canvas.addEventListener('mouseout', () => down = false)
-
-    this.canvas.addEventListener('touchmove', (e) => {
+    }, false))
+    this.stop.push(addEventListener(this.canvas, 'mouseup', () => down = false))
+    this.stop.push(addEventListener(this.canvas, 'mouseout', () => down = false))
+    this.stop.push(addEventListener(this.canvas, 'touchmove', (e: TouchEvent) => {
       this.ctx.lineTo(e.changedTouches[0].pageX + 2 - offsetX, e.changedTouches[0].pageY - offsetY)
       this.ctx.stroke()
-    }, false)
+    }, false))
   }
 
   clearCanvas() {
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
   }
 
+  mount(el: HTMLElement | string) {
+    insertElement(el, this.canvas, null)
+    return this
+  }
+
+  unmount() {
+    removeElement(this.canvas)
+    this.stop.forEach(s => s())
+  }
+
   save() {
     return this.canvas.toDataURL('image/png')
   }

src/insertElement.ts

@@ -1,7 +1,7 @@
 import { addEventListener } from './addEventListener'
 import { isStr } from './isStr'
 
-export function insertElement(parent: HTMLElement | string, element: HTMLElement, target?: HTMLElement | null): void {
+export function insertElement(parent: HTMLElement | string, element: HTMLElement | string, target?: HTMLElement | null): void {
   let isMounted = false
   let hasMounted = false
   update()
@@ -11,10 +11,14 @@ export function insertElement(parent: HTMLElement | string, element: HTMLElement
       return
     if (isStr(parent))
       parent = document.querySelector(parent as string) as HTMLElement || parent
-    if (!isMounted && isStr(parent))
+    if (isStr(element))
+      element = document.querySelector(element as string) as HTMLElement || element
+    if (!isMounted && (isStr(parent) || isStr(element)))
       return isMounted = true
     if (isStr(parent))
-      throw new Error(`${parent} is not a HTMLElement`);
+      throw new Error(`${parent} is not a HTMLElement`)
+    if (isStr(element))
+      throw new Error(`${element} is not a HTMLElement`);
     (parent as HTMLElement).insertBefore(element as HTMLElement, target === undefined ? (parent as HTMLElement).firstChild : target)
     hasMounted = true
   }

src/removeElement.ts

@@ -1,4 +1,11 @@
-export function removeElement(el: HTMLElement | ChildNode): void {
-  if (el.parentNode)
-    el.parentNode.removeChild(el)
+import { isStr } from './isStr'
+
+export function removeElement(el: HTMLElement | ChildNode | string): void {
+  if (isStr(el))
+    el = document.querySelector(el as string) as HTMLElement || el
+  if (isStr(el))
+    throw new Error(`${el} is not a element`)
+  const p = (el as HTMLElement).parentNode
+  if (p)
+    p.removeChild(el as HTMLElement)
 }