refactor: optimized code

wanpan11 · Jul 5, 2024 · d8fbdae · d8fbdae
1 parent d12126e
commit d8fbdae
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 79 deletions.
diff --git a/package.json b/package.json
@@ -44,6 +44,9 @@
       "prettier --parser=typescript --write"
     ]
   },
+  "dependencies": {
+    "@babel/runtime": "^7.24.7"
+  },
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/joystick.ts b/src/joystick.ts
@@ -1,3 +1,4 @@
+import type * as CSS from 'csstype';
 import {
   CreateConfig,
   DirectionType,
@@ -6,7 +7,7 @@ import {
 } from './interface';
 import {
   angle,
-  buildDom,
+  appleStyle,
   distance,
   findCoord,
   getDirection,
@@ -95,14 +96,90 @@ class Joystick {
 
       let startDom = zoneNode;
       if (this.mode === 'static') {
-        buildDom(this, zoneNode);
+        this.buildDom(this, zoneNode);
         startDom = this.currentJoystick.ui as HTMLElement;
       }
 
       this.initListener(startDom);
     }
   };
 
+  private buildDom = (instance: Joystick, zone: HTMLElement): void => {
+    const { mode, currentJoystick, joystickSize, position, color, backImg } =
+      instance;
+
+    if (mode === 'static') {
+      zone.style.position = 'relative';
+    }
+
+    const ui = document.createElement('div');
+    const back = document.createElement('div');
+    const front = document.createElement('div');
+    currentJoystick.ui = ui;
+    currentJoystick.back = back;
+    currentJoystick.front = front;
+
+    ui.setAttribute('class', 'joystick_box');
+    back.setAttribute('class', 'back');
+    front.setAttribute('class', 'front');
+
+    const uiStyle: CSS.Properties<string | number> = {
+      position: 'absolute',
+      top:
+        mode === 'static'
+          ? position.top
+          : `${currentJoystick.y - joystickSize / 2}px`,
+      left:
+        mode === 'static'
+          ? position.left
+          : `${currentJoystick.x - joystickSize / 2}px`,
+      right: position.right,
+      bottom: position.bottom,
+      opacity: mode === 'static' ? '0.5' : '1',
+      transition: 'opacity 100ms',
+    };
+    const backStyle: CSS.Properties = {
+      width: `${joystickSize}px`,
+      height: `${joystickSize}px`,
+      backgroundColor: color.back !== '' ? color.back : 'red',
+      borderRadius: '100%',
+    };
+    const frontStyle: CSS.Properties = {
+      width: `${joystickSize / 2}px`,
+      height: `${joystickSize / 2}px`,
+      backgroundColor: color.front !== '' ? color.front : '#fff',
+      borderRadius: '100%',
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      margin: `${joystickSize / 4}px 0 0 ${joystickSize / 4}px`,
+      transform: 'translate(0px, 0px)',
+    };
+
+    if (backImg.back !== '') {
+      delete backStyle['backgroundColor'];
+      backStyle['backgroundImage'] = `url(${backImg.back})`;
+      backStyle['backgroundPosition'] = 'center';
+      backStyle['backgroundRepeat'] = 'no-repeat';
+      backStyle['backgroundSize'] = '100% 100%';
+    }
+    if (backImg.front !== '') {
+      delete frontStyle['backgroundColor'];
+      frontStyle['backgroundImage'] = `url(${backImg.front})`;
+      frontStyle['backgroundPosition'] = 'center';
+      frontStyle['backgroundRepeat'] = 'no-repeat';
+      frontStyle['backgroundSize'] = '100% 100%';
+    }
+
+    appleStyle(ui, uiStyle);
+    appleStyle(back, backStyle);
+    appleStyle(front, frontStyle);
+
+    ui.append(back, front);
+    zone.appendChild(ui);
+    currentJoystick.build = true;
+  };
+
   private initListener = (zoneNode: HTMLElement): void => {
     const body = document.getElementsByTagName('body')[0];
 
@@ -125,7 +202,7 @@ class Joystick {
       }
 
       if (this.mode === 'dynamic') {
-        buildDom(this, zoneNode);
+        this.buildDom(this, zoneNode);
       } else {
         this.currentJoystick.ui!.style.opacity = '1';
       }

diff --git a/src/util.ts b/src/util.ts
@@ -1,6 +1,5 @@
 import type * as CSS from 'csstype';
 import { DirectionType } from './interface';
-import Joystick from './joystick';
 
 interface Position {
   x: number;
@@ -48,78 +47,3 @@ export const appleStyle = (
 ): void => {
   Object.assign(node.style, style);
 };
-export const buildDom = (instance: Joystick, zone: HTMLElement): void => {
-  const { mode, currentJoystick, joystickSize, position, color, backImg } =
-    instance;
-
-  if (mode === 'static') {
-    zone.style.position = 'relative';
-  }
-
-  const ui = document.createElement('div');
-  const back = document.createElement('div');
-  const front = document.createElement('div');
-  currentJoystick.ui = ui;
-  currentJoystick.back = back;
-  currentJoystick.front = front;
-
-  ui.setAttribute('class', 'joystick_box');
-  back.setAttribute('class', 'back');
-  front.setAttribute('class', 'front');
-
-  const uiStyle: CSS.Properties<string | number> = {
-    position: 'absolute',
-    top:
-      mode === 'static'
-        ? position.top
-        : `${currentJoystick.y - joystickSize / 2}px`,
-    left:
-      mode === 'static'
-        ? position.left
-        : `${currentJoystick.x - joystickSize / 2}px`,
-    right: position.right,
-    bottom: position.bottom,
-    opacity: mode === 'static' ? '0.5' : '1',
-    transition: 'opacity 100ms',
-  };
-  const backStyle: CSS.Properties = {
-    width: `${joystickSize}px`,
-    height: `${joystickSize}px`,
-    backgroundColor: color.back !== '' ? color.back : 'red',
-    borderRadius: '100%',
-  };
-  const frontStyle: CSS.Properties = {
-    width: `${joystickSize / 2}px`,
-    height: `${joystickSize / 2}px`,
-    backgroundColor: color.front !== '' ? color.front : '#fff',
-    borderRadius: '100%',
-    position: 'absolute',
-    top: '0',
-    left: '0',
-    margin: `${joystickSize / 4}px 0 0 ${joystickSize / 4}px`,
-    transform: 'translate(0px, 0px)',
-  };
-
-  if (backImg.back !== '') {
-    delete backStyle['backgroundColor'];
-    backStyle['backgroundImage'] = `url(${backImg.back})`;
-    backStyle['backgroundPosition'] = 'center';
-    backStyle['backgroundRepeat'] = 'no-repeat';
-    backStyle['backgroundSize'] = '100% 100%';
-  }
-  if (backImg.front !== '') {
-    delete frontStyle['backgroundColor'];
-    frontStyle['backgroundImage'] = `url(${backImg.front})`;
-    frontStyle['backgroundPosition'] = 'center';
-    frontStyle['backgroundRepeat'] = 'no-repeat';
-    frontStyle['backgroundSize'] = '100% 100%';
-  }
-
-  appleStyle(ui, uiStyle);
-  appleStyle(back, backStyle);
-  appleStyle(front, frontStyle);
-
-  ui.append(back, front);
-  zone.appendChild(ui);
-  currentJoystick.build = true;
-};