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

看板Web_Design作者 (內湖流川楓)時間1年前 (2023/01/23 19:44), 1年前編輯推噓7(7017)
留言24則, 8人參與, 1年前最新討論串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

01/23 19:52, 1年前 , 1F
開發者工具打開可以去 trace 綁定的事件,他的元素定位方式
01/23 19:52, 1F

01/23 19:52, 1年前 , 2F
不一定是直接找 button 可能是上層父元素作為標識,再往下
01/23 19:52, 2F

01/23 19:52, 1年前 , 3F
一層找唯一的 button
01/23 19:52, 3F

01/23 19:57, 1年前 , 4F
除了檢查綁定的函數之外,按下按鈕之後也可以檢查送出的請
01/23 19:57, 4F

01/23 19:57, 1年前 , 5F
求,去挖掘一下 DevTools 會滿有幫助的
01/23 19:57, 5F
目前我在追的 button 點進去 Event Listeners 看到了 30 個 click 的綁定, 之前追了一下,覺得比較可能的路線,一路挖到 webpack 就進不去了, 可能我自己還沒有掌握到 trace tool 的竅門,會再努力一下,謝謝大大~

01/23 23:23, 1年前 , 6F
var btn=document.querySelector('button.btn-danger');
01/23 23:23, 6F

01/23 23:24, 1年前 , 7F
btn.addEventListener('click', (e)=>{ 按下的程式碼區 });
01/23 23:24, 7F

01/23 23:26, 1年前 , 8F
任何方法抓到 DOM 元素,就可以對它加事件,不用 id / name
01/23 23:26, 8F
嗯嗯,雖然是如此,但有點難想像 gitlab 會這麼寫, 畢竟一個頁面裡可能會有很多 btn-danger 的 button, 如果要實作與後端的互動,應該會有些比較有系統的寫法才對, 呣,其實 gitlab 也有開放 source code, 我連後端的程式碼一起看也還沒抓到頭緒就是了...(汗 ※ 編輯: archon (114.37.196.21 臺灣), 01/24/2023 00:47:39

01/24 11:02, 1年前 , 9F
可以用chrome看network那一頁 看看按鈕送了什麼資訊出去
01/24 11:02, 9F
感謝大大的建議~!! 目前已知點下按鈕後,會呼叫 ~/{{ 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

01/27 00:09, 1年前 , 10F
現在用前端框架的網站很多,不如直接去找「真正的」原始碼
01/27 00:09, 10F

01/27 00:10, 1年前 , 11F
學起來比較快吧,要深入也可以直接深入那些框架的原始碼
01/27 00:10, 11F

02/01 05:27, 1年前 , 12F
主要就是js的部分,選擇器找到元素 點擊觸發函式執行
02/01 05:27, 12F

02/01 05:28, 1年前 , 13F
原始碼看不出onclick 是框架的關係,但基礎其實都一樣的
02/01 05:28, 13F

02/01 05:28, 1年前 , 14F
選擇元件,觸發事件
02/01 05:28, 14F

02/01 05:30, 1年前 , 15F
如果想要原始碼有乾淨的風格,可以找一套框架學,比方說r
02/01 05:30, 15F

02/01 05:30, 1年前 , 16F
eact, vue,angular
02/01 05:30, 16F

02/01 05:35, 1年前 , 17F
要執行函式不需要有form。
02/01 05:35, 17F

02/01 05:35, 1年前 , 18F
form是傳遞整包物件比較好的方法,要傳遞物件也不一定要
02/01 05:35, 18F

02/01 05:35, 1年前 , 19F
用form,但有規則的使用更好維護。
02/01 05:35, 19F

02/07 13:23, 1年前 , 20F
你學的方式怪怪的 這比較像逆向工程 從別人的code反推回
02/07 13:23, 20F

02/07 13:23, 1年前 , 21F
去 你應該是先想要做什麼東西 再找要怎麼做
02/07 13:23, 21F

02/23 20:14, 1年前 , 22F
這樣學完全沒問題 樓上根本吃嘴囡仔標準講幹話
02/23 20:14, 22F

02/23 20:15, 1年前 , 23F
這個行業就是滿多人會在那邊屁東屁西 又不提供建議
02/23 20:15, 23F

03/06 07:50, 1年前 , 24F
框架編譯,較大的專案很少直接寫原生js
03/06 07:50, 24F
文章代碼(AID): #1ZpdCEHz (Web_Design)
文章代碼(AID): #1ZpdCEHz (Web_Design)