🎨

Author: Simon he

playground/src/main.ts

@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import routes from 'virtual:generated-pages'
-import { copy, log, monitorPef, timeCost, vFetch } from 'simon-js-tool'
+import { copy, monitorPef, vFetch } from 'simon-js-tool'
 import App from './App.vue'
 
 import '@unocss/reset/tailwind.css'
@@ -15,7 +15,6 @@ const router = createRouter({
 })
 app.use(router)
 app.mount('#app')
-
 vFetch.interceptors.request.use((response) => {
   // console.log(response)
   return response
@@ -26,7 +25,6 @@ vFetch.interceptors.request.use((response) => {
 const instance = vFetch.create({
   baseURL: 'http://localhost:5001/',
 })
-
 instance({
   url: 'test',
 }).then((res: any) => {
@@ -38,10 +36,10 @@ monitorPef()
 window.onclick = () => {
   copy('hello')
 }
-timeCost(() => {
-  for (let i = 0; i < 1000; i++)
-    log(i)
-})
+// timeCost(() => {
+//   for (let i = 0; i < 1000; i++)
+//     log(i)
+// })
 
 // console.log(calNum.sub(0.1, 0.2, 0.2))
 // console.log(calNum.mul(0.1, 0.2, 0.2))

src/DotImageCanvas.ts

@@ -1,5 +1,6 @@
 import { memorizeFn } from './memorizeFn'
 import { idleCallbackWrapper } from './idleCallbackWrapper'
+import { createElement } from './createElement'
 
 export class DotImageCanvas {
   canvas: HTMLCanvasElement = document.createElement('canvas')
@@ -53,12 +54,13 @@ export class DotImageCanvas {
       this.getCanvas(imagePointSet)
       return
     }
-    const img = new Image()
+    const img = createElement('img', {
+      crossOrigin: 'anonymous',
+      src: this.originSrc,
+    })
     return new Promise((resolve) => {
-      img.setAttribute('crossorigin', 'anonymous')
-      img.src = this.originSrc
       img.onload = () => {
-        this.getCanvas(this.createDotImage(img))
+        this.getCanvas(this.createDotImage(img as HTMLImageElement))
         resolve(img)
       }
       img.onerror = () => {

src/DotTextCanvas.ts

@@ -27,7 +27,6 @@ export class DotTextCanvas {
     ctx.font = `${size}px SimSun`
     ctx.fillText(text, 0, 14 * pRatio)
     const { data: imageData, width, height } = ctx.getImageData(0, 0, size, size)
-
     const textPointSet = []
     for (let i = 0; i < height; i++) {
       const temp: number[] = []

src/animationFrameWrapper.ts

@@ -1,5 +1,6 @@
 export function animationFrameWrapper(fn: () => void, delta = 1000, autoStop = false): (() => void) {
-  let start: number; let work = true
+  let start: number
+  let work = true
   const animationFrame = window.requestAnimationFrame
     || window.webkitRequestAnimationFrame
     || window.mozRequestAnimationFrame

src/copy.ts

@@ -1,12 +1,14 @@
+import { createElement } from './createElement'
 export function copy(s: string): boolean {
   try {
-    const dom = document.createElement('textarea')
-    dom.setAttribute('readonly', 'readonly')
-    dom.value = s
-    document.body.appendChild(dom)
-    dom.select()
+    const textarea: any = createElement('textarea', {
+      readonly: 'readonly',
+    })
+    textarea.innerHTML = s
+    document.body.appendChild(textarea)
+    textarea.select()
     const res = document.execCommand('copy')
-    document.body.removeChild(dom)
+    document.body.removeChild(textarea)
     return res
   }
   catch (error: any) {

src/createElement.ts

@@ -1,5 +1,7 @@
-export function createElement(tag: string, attributes: Record<string, string>) {
+export function createElement(tag: string, attributes?: Record<string, string>) {
   const el = document.createElement(tag)
+  if (!attributes)
+    return el
   for (const key in attributes)
     el.setAttribute(key, attributes[key])
 

src/download.ts

@@ -1,9 +1,10 @@
+import { createElement } from './createElement'
 export function download(url: string) {
   try {
-    const a: HTMLAnchorElement = document.createElement('a')
-    a.href = url
-    a.download = url.substring(url.lastIndexOf('/') + 1, url.length)
-    a.click()
+    createElement('a', {
+      href: url,
+      download: url.substring(url.lastIndexOf('/') + 1, url.length),
+    }).click()
   }
   catch (error: any) {
     throw new Error(error)

src/fileSplice.ts

@@ -3,11 +3,11 @@ import type { FileChunk, FileMD5 } from './types'
 
 export async function fileSplice(_file: File, _chunkSize: number = 1024 * 100): Promise<FileChunk[]> {
   const { HASH, suffix } = await getMD5(_file)
+  const chunks: FileChunk[] = []
   // 实现切片处理 [固定切片大小 & 数量]
   let max = _chunkSize // 100kb
   let count = Math.ceil(_file.size / max)
   let index = 0
-  const chunks: FileChunk[] = []
 
   if (count > 100) { // 如果切片的数量大于100,可以固定切片的数量为100,来调整每一个切片的大小
     count = 100
@@ -29,8 +29,8 @@ function getMD5(_file: File): Promise<FileMD5> {
   return new Promise((resolve, reject) => {
     try {
       fileReader.onload = function (e: any) {
-        const buffer = e?.target.result // buffer编码
-        const spark = new SparkMD5.ArrayBuffer()
+        const buffer = e?.target.result; const // buffer编码
+          spark = new SparkMD5.ArrayBuffer()
         spark.append(buffer)
         const HASH = spark.end()
         const suffix = /\.([a-zA-Z0-9]+)$/.exec(_file.name)![1]

src/idleCallbackWrapper.ts

@@ -18,7 +18,8 @@ export function idleCallbackWrapper(tasks: Function[], timeout: Timeout = 2000,
           return Math.max(0, 50.0 - (Date.now() - startTime))
         },
       }), 1)
-  }; const idleCancel = window.cancelIdleCallback || clearTimeout
+  }
+  const idleCancel = window.cancelIdleCallback || clearTimeout
   const animationId = idleCallback(async function animationCallback(deadline: Deadline) {
     if (!work)
       return

src/index.ts

@@ -89,3 +89,5 @@ export { animationFrameWrapper } from './animationFrameWrapper'
 export { idleCallbackWrapper } from './idleCallbackWrapper'
 export { htmlTransform } from './htmlTransform'
 export { sleep } from './sleep'
+export { createElement } from './createElement'
+export { addLink } from './addLink'