作者archon (內湖流川楓)
看板Web_Design
標題[問題] 有推薦的前後端 design pattern 嗎？
時間Mon Jan 23 19:44:10 2023
大家新年好～，
實作網頁功能有時會很好奇別人是怎麼做的，舉個例子，
大家熟知的 Gitlab 把成員從專案裡移除的時候，就是按一個 button，
button 的 html 碼如下:
<button type="button" class="btn js-modal-action-primary btn-danger">
<span class="gl-button-text">Remove member</span>
</button>
首先，它上下沒 <form> tag，看起來不像是直接用 form submit 送出的，
button 裡沒 id 沒 name 沒 onclick()，只有 class，
像這樣的一個功能，前端做個動作後在後端做些計算，再在前端做些反應，
算是蠻常見的設計。
自己要實現也不難，但寫出來明顯就是跟檯面上的大網站長得很不一樣，
很好奇別人都是用什麼樣的方式來實現的，
是 form 還是 ajax，關鍵值是怎麼傳遞的... 等等，
請問，是不是有什麼 trace 的方式，
或者是有這類的 design pattern 可以學習的呢？
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 101.12.41.205 (臺灣)
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1674474254.A.47D.html
1F：→ Hsins: 開發者工具打開可以去 trace 綁定的事件，他的元素定位方式 01/23 19:52
2F：→ Hsins: 不一定是直接找 button 可能是上層父元素作為標識，再往下 01/23 19:52
3F：→ Hsins: 一層找唯一的 button 01/23 19:52
4F：→ Hsins: 除了檢查綁定的函數之外，按下按鈕之後也可以檢查送出的請 01/23 19:57
5F：→ Hsins: 求，去挖掘一下 DevTools 會滿有幫助的 01/23 19:57
目前我在追的 button 點進去 Event Listeners 看到了 30 個 click 的綁定，
之前追了一下，覺得比較可能的路線，一路挖到 webpack 就進不去了，
可能我自己還沒有掌握到 trace tool 的竅門，會再努力一下，謝謝大大～
6F：推 shter: var btn=document.querySelector('button.btn-danger'); 01/23 23:23
7F：→ shter: btn.addEventListener('click', (e)=>{ 按下的程式碼區 }); 01/23 23:24
8F：推 shter: 任何方法抓到 DOM 元素，就可以對它加事件，不用 id / name 01/23 23:26
嗯嗯，雖然是如此，但有點難想像 gitlab 會這麼寫，
畢竟一個頁面裡可能會有很多 btn-danger 的 button，
如果要實作與後端的互動，應該會有些比較有系統的寫法才對，
呣，其實 gitlab 也有開放 source code，
我連後端的程式碼一起看也還沒抓到頭緒就是了...（汗
※ 編輯: archon (114.37.196.21 臺灣), 01/24/2023 00:47:39
9F：推 gasbomb: 可以用chrome看network那一頁 看看按鈕送了什麼資訊出去 01/24 11:02
感謝大大的建議~!!
目前已知點下按鈕後，會呼叫
~/{{ user_name }}/{{ project_name }}/-/project_members/{{ number }}
Request Method: POST
[Payload]
_method: delete
是怎麼用 button 連結到 form submit 的還需要研究一下，努力中 QwQ
---
找到了一個可能有點用的關鍵字 data-qa-selector，
感謝各位大大的幫助，離真相近了不少... :D
※ 編輯: archon (114.37.203.41 臺灣), 01/24/2023 16:09:40
10F：→ ssccg: 現在用前端框架的網站很多，不如直接去找「真正的」原始碼 01/27 00:09
11F：→ ssccg: 學起來比較快吧，要深入也可以直接深入那些框架的原始碼 01/27 00:10
12F：推 imgodd: 主要就是js的部分，選擇器找到元素 點擊觸發函式執行 02/01 05:27
13F：→ imgodd: 原始碼看不出onclick 是框架的關係，但基礎其實都一樣的 02/01 05:28
14F：→ imgodd: 選擇元件,觸發事件 02/01 05:28
15F：→ imgodd: 如果想要原始碼有乾淨的風格，可以找一套框架學，比方說r 02/01 05:30
16F：→ imgodd: eact, vue,angular 02/01 05:30
17F：推 imgodd: 要執行函式不需要有form。 02/01 05:35
18F：→ imgodd: form是傳遞整包物件比較好的方法，要傳遞物件也不一定要 02/01 05:35
19F：→ imgodd: 用form，但有規則的使用更好維護。 02/01 05:35
20F：推 vi000246: 你學的方式怪怪的 這比較像逆向工程 從別人的code反推回 02/07 13:23
21F：→ vi000246: 去 你應該是先想要做什麼東西 再找要怎麼做 02/07 13:23
22F：推 secretfly: 這樣學完全沒問題 樓上根本吃嘴囡仔標準講幹話 02/23 20:14
23F：→ secretfly: 這個行業就是滿多人會在那邊屁東屁西 又不提供建議 02/23 20:15
24F：→ MonyemLi: 框架編譯，較大的專案很少直接寫原生js 03/06 07:50