Skip to content

Commit

Permalink
[from now] 2023/08/17 11:44:44
Browse files Browse the repository at this point in the history
diff --git a/articles/1ad6e51eed13ae.md b/articles/1ad6e51eed13ae.md
index e549737..a30242b 100644
--- a/articles/1ad6e51eed13ae.md
+++ b/articles/1ad6e51eed13ae.md
@@ -53,14 +53,6 @@ kawamataryo/sky-follower-bridge#7
 ## Before

 リファクタリング前のコードは以下のようになっていました。
-`insertAdjacentHTML`で条件に合わせたDOMを構築、`addEventListener`でアクションボタンのclickイベントと、hoverイベントを登録しています。
-
-Reactiveな動作は主にボタンに集中しています。
-
-![](/images/1ad6e51eed13ae/button.gif)
-
-このボタンの挙動を実現するためにDOM APIで直接クラスの付け変えやテキストの書き換えを行なっているのですが、UIとイベントの関連が分かりにくく、書いた本人ながらあまり触りたくないコードです😅
-

 ```ts:src/lib/domHelpers.ts
 export const insertBskyProfileEl = ({ dom, profile, statusKey, btnLabel, abortController, followAction, unfollowAction }: {
@@ -152,6 +144,15 @@ export const insertBskyProfileEl = ({ dom, profile, statusKey, btnLabel, abortCo
 }
 ```

+`insertAdjacentHTML`で条件に合わせたDOMを構築、`addEventListener`でアクションボタンのclickイベントと、hoverイベントを登録しています。
+
+Reactiveな動作は主にボタンに集中しています。
+
+![](/images/1ad6e51eed13ae/button.gif)
+
+このボタンの挙動を実現するためにDOM APIで直接クラスの付け変えやテキストの書き換えを行なっているのですが、UIとイベントの関連が分かりにくく、書いた本人ながらあまり触りたくないコードです😅
+
+
 ## After

 VanJSでのリファクタリング後です。
  • Loading branch information
kawamataryo committed Aug 17, 2023
1 parent e8983b4 commit 59f7fd8
Showing 1 changed file with 9 additions and 8 deletions.
17 changes: 9 additions & 8 deletions articles/1ad6e51eed13ae.md
Expand Up @@ -53,14 +53,6 @@ https://github.com/kawamataryo/sky-follower-bridge/pull/7
## Before

リファクタリング前のコードは以下のようになっていました。
`insertAdjacentHTML`で条件に合わせたDOMを構築、`addEventListener`でアクションボタンのclickイベントと、hoverイベントを登録しています。

Reactiveな動作は主にボタンに集中しています。

![](/images/1ad6e51eed13ae/button.gif)

このボタンの挙動を実現するためにDOM APIで直接クラスの付け変えやテキストの書き換えを行なっているのですが、UIとイベントの関連が分かりにくく、書いた本人ながらあまり触りたくないコードです😅


```ts:src/lib/domHelpers.ts
export const insertBskyProfileEl = ({ dom, profile, statusKey, btnLabel, abortController, followAction, unfollowAction }: {
Expand Down Expand Up @@ -152,6 +144,15 @@ export const insertBskyProfileEl = ({ dom, profile, statusKey, btnLabel, abortCo
}
```

`insertAdjacentHTML`で条件に合わせたDOMを構築、`addEventListener`でアクションボタンのclickイベントと、hoverイベントを登録しています。

Reactiveな動作は主にボタンに集中しています。

![](/images/1ad6e51eed13ae/button.gif)

このボタンの挙動を実現するためにDOM APIで直接クラスの付け変えやテキストの書き換えを行なっているのですが、UIとイベントの関連が分かりにくく、書いた本人ながらあまり触りたくないコードです😅


## After

VanJSでのリファクタリング後です。
Expand Down

0 comments on commit 59f7fd8

Please sign in to comment.