[問題] 有推薦的前後端 design pattern 嗎？

看板Web_Design作者archon (內湖流川楓)時間1年前 (2023/01/23 19:44)推噓7(7推 0噓 17→)

留言24則, 8人參與討論串1/1

大家新年好～，實作網頁功能有時會很好奇別人是怎麼做的，舉個例子，大家熟知的 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://www.ptt.cc/bbs/Web_Design/M.1674474254.A.47D.html

→

Hsins

01/23 19:52, 1年前 , 1^F

01/23 19:52, 1^F

→

Hsins

01/23 19:52, 1年前 , 2^F

01/23 19:52, 2^F

→

Hsins

01/23 19:52, 1年前 , 3^F

01/23 19:52, 3^F

→

Hsins

01/23 19:57, 1年前 , 4^F

01/23 19:57, 4^F

→

Hsins

01/23 19:57, 1年前 , 5^F

01/23 19:57, 5^F

目前我在追的 button 點進去 Event Listeners 看到了 30 個 click 的綁定，之前追了一下，覺得比較可能的路線，一路挖到 webpack 就進不去了，可能我自己還沒有掌握到 trace tool 的竅門，會再努力一下，謝謝大大～

推

shter

01/23 23:23, 1年前 , 6^F

01/23 23:23, 6^F

→

shter

01/23 23:24, 1年前 , 7^F

01/23 23:24, 7^F

推

shter

01/23 23:26, 1年前 , 8^F

01/23 23:26, 8^F

嗯嗯，雖然是如此，但有點難想像 gitlab 會這麼寫，畢竟一個頁面裡可能會有很多 btn-danger 的 button，如果要實作與後端的互動，應該會有些比較有系統的寫法才對，呣，其實 gitlab 也有開放 source code，我連後端的程式碼一起看也還沒抓到頭緒就是了...（汗 ※ 編輯: archon (114.37.196.21 臺灣), 01/24/2023 00:47:39

推

gasbomb

01/24 11:02, 1年前 , 9^F

01/24 11:02, 9^F

感謝大大的建議~!! 目前已知點下按鈕後，會呼叫 ~/{{ 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

→

ssccg

01/27 00:09, 1年前 , 10^F

01/27 00:09, 10^F

→

ssccg

01/27 00:10, 1年前 , 11^F

01/27 00:10, 11^F

推

imgodd

02/01 05:27, 1年前 , 12^F

02/01 05:27, 12^F