作者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/cn.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