code
前陣子收到了 Github Copilot 的年繳帳單，突然想到最近好像很少用它做了什麼功能，現在 AI Agent 大爆發，任何開發都入門都簡易化了。
於是就想著用 AI Vibe Coing 一下，開始盤點之前有做那些想一半就放棄的功能。
於是就先跑了這個 LinkEveryWord ，這功能的主體就是 我想在瀏覽網頁的時候，快速查到我電腦裡面的資料，這樣我比較追蹤這東西我到底抓了沒，或是是否有沒有這個檔案的存在，需求很小眾，但是實作起來很難。
對一個有數位囤物症的我來說，在電腦裡面下載或是安裝一些東西都算是稀鬆平常的事情，電腦常常又會堆積著大量用不到的檔案或是已經抓過的重複檔案。這點對我來說相當的困擾。如果我在手殘要下載之前可以快速比對一下電腦裡面有沒有安裝或是下載，這樣可以阻擋我點下去下載的需求。
由於電腦規則的設計，當你用瀏覽器的時候，大部分情況下瀏覽器是讀取不到你電腦內的檔案的，所以需要 Chrome 擴充元件跟其他應用程式的溝通才有辦法在瀏覽器中呈現你要的資料
n8n 有多厲害，這邊就不贅述了，作為一個自動化工作流的軟體，n8n 相當適合用來產生判定輸入的工作流程，聊天機器人就是一個案例， n8n 有很多種建立方式，這邊就不著重於介紹了，以往很多 n8n 串 LINEBOT 都直接請使用原生的 webhook 功能，現在社群推出了一個 n8n-nodes-linewebhook 可以很快速地把發送以及推送給簡化，這邊就快速紀錄一下建立的流程。
首先要準備幾個東西
現代開發環境不得不說，只需要下幾行指令之後，開發環境就隨之建立，Windows 自從 Windows 10 推出之後，利用WSL 子系統模式來執行 Linux ， 近年來流行的 Docker 也快速的發展，利用系統層虛擬化，讓開發環境與正式環境相當的貼近。
在開發專案的時候相當推薦採用 統一的 Docker 環境來處理這些環境架設的問題，減少各個系統的問題處理，統一函示庫元件之類的套件載入方法，推薦使用 Docker 。
今天要介紹的就是利用 Laravel 官方推出的 Laravel Sail ，配合我最近整合的 LINEBOT套件，快速的建立起開發環境。
首先需要作業系統為 Windows 10 1909 以上，並安裝 WSL2 ，Windows 作業系統的部分我就不再贅述
透過官方的教學文件 Getting Started On Windows，你還需要安裝 Docker Desktop，萬事都備妥了之後，你需要打開命令提示字元，按下 WIN+R 輸入 CMD，或是直接執行命令提示字元
輸入
wsl接著會跳入 wsl 子系統
前情提要? 上一篇實作方法利用了三個迴圈，取得標題，將標題的資料利用索引(index) 抓取表格的內容，
程式碼如下：
let headData = Array.from(document.querySelectorAll('thead > tr > th')).map(n=>n.innerText)
console.log('headData', headData )
let tableObject = []
for(let trNode of document.querySelectorAll('tbody > tr') ){
let data = {};
Array.from(trNode.querySelectorAll('td')).forEach((n , index)=>{
data[ headData[index] ] = n.innerText
})
tableObject.push(data)
}
console.log( 'tableObject ',tableObject )其中內容可以看到，第二段的地方，所跑的迴圈是針對 td 來做處理，headData 的部分其實也是針對 tr 下的 欄位去做處理，以前針對 XHTML 有稍微看一下規範，在標準的 HTML 結構下 TABLE 的子節點必須是 caption,colgroup,thead,tbody,tr 幾種節點，tr 這個節點下也只能有 th 跟 td 在這個標準規範下，我們理論上可以信任瀏覽器會解析這些元素來使用
自從工作開始分前後端分離之後，JavaScript 的東西就比較少去鑽研。但近期工作又開始大量使用到 JavaScript ，開發的途中會需要重複使用一些迴圈函數。還記得為了因應瀏覽器的變化以及複雜程度， jQuery 的出現就讓開發者省去不少事情，DOM 的迴圈 each 可以直接從選擇器的 $(dom).each 來使用，演變到現在瀏覽器大多直接使用 querySelectorAll 的方法來跑 forEach， ECMAScript 的演化大大降低了對 jQuery 的依賴程度，開發前端開始探究起 JavaScript 的深度，進而演變許多框架，想要學好JavaScript MDN 就是個很好用的工具。
寫程式不需要一步到位，逐步漸進的達成目的，有機會再去把程式碼精簡調校，能夠理解其原理才會是最好的解法
這次就用個簡單的範例，當遇到表格的時候，要怎麼轉成 一般的 Plain Object ，這個例子也是我使用 Greasemonkey 腳本開發的時候，要將 DOM 的內容轉換成可以快速重複利用資料的做法，當使用腳本的時候，需要分解的網頁會是結果，要轉換成可利用的資料還需要經過一番抓取變換，熟悉操作之後就可以很容易地將資料轉換成畫面。
首先來一個範例：
前陣子在爬 Laravel 的路由，發現在呼叫 Controller 的時候，並不是直接執行，而是採用 callback function 去呼叫的模式，在路由裡面有一段路徑：
Illuminate\Routing\ControllerDispatcher
public function dispatch(Route $route, $controller, $method)
{
$parameters = $this->resolveClassMethodDependencies(
$route->parametersWithoutNulls(), $controller, $method
);
if (method_exists($controller, 'callAction')) {
return $controller->callAction($method, $parameters);
}
return $controller->{$method}(...array_values($parameters));
}
可以看到 Controller 在執行之前會先去檢查你的 Controller 有沒有一個叫做 callAtion 的 function 沒有就回傳並呼叫路由指定的 Controller method。
前端開發中的時候，很容易把 API 事件寫在同一個 component 裡面，大部分人會進行封裝，讓傳送 API 的方法變得更簡單
先前碰到同事裡用前端框架系統 Vue 的時候，則是把 API 放到 Vuex 裡面，之前看過 React 裡面，如果上下層傳遞有點過於遙遠或是複雜，通常會用 State 來管控， Vue 使用 Vuex ，React 則是用 redux 來表達貫穿這個元件的參數。
不過正如上面說的 Vuex 跟 redux 都是用來放狀態的，如果拿來放其他東西，並不是說不可以，只是如果在物件導向的裡面中，這樣就違反了 單一功能原則的項目，狀態管理就不再是狀態管理。
自從看了一點 Clean Code的書之後，開始針對 Clean Architecture 很感興趣，原本我主要寫後端跟一點點的前端，開始把後端架構邏輯設計延伸到了前端，開始修正前端同事的程式碼。
Clean Architecture：
回到正題 要實現乾淨的架設設計，首先先把專案中的 Vuex 裡面，包了一堆 API 的模式給抽離開來，去年我重新理解一次 新的 JavaScript 的時候，發現 ES6 有個相當好用的東西叫做 Classes 如果你懂一點物件導向就可以知道這個東西是用來做什麼的。
實際操作了一下真的讓我感動到哭，很久很久以前操作 JavaScript 的時候要實現到類似的事情必須要 function 一層包了一層才有可能實現這件事情，現在原生 JS 支援把這個東西當成特別的 function 讓你使用更簡潔的方式建立物件，以及處理繼承，真的相當方便
這邊先設計一個範例，採用 https://reqres.in 來顯示 REST API 的方式，這個資源是隨意 Google到的，要套用現有的 資源應該也不是問題。
JS 自從有了打包工具之後，很多工具造福不少開發者，以往要送個 AJAX 到後端，大多都是一個頁面處理一個 method
框架化後，每個程式碼開始有了 物件化、封裝方式來做，現在大多都用 axios 來送 AJAX
但是遇到一個問題就是送檔案的時候，需要使用到 FormData 的物類別物件。
但是整個像後端送的程式碼都封裝起來了，要針對一個檔案上傳的方法，做出額外處理，當檔案上傳處理頁面多了之後
維護除錯方法就有點麻煩。
所以比較好的方式還是修改 API 送出前，先把物件轉換好判定是否有 File 類型，然後轉換成 FormData 就可以一勞永逸
Vue3 HOC( higher order components )，原本我還不知道 HOC 的意思，主要是用了 Quasar 元件庫之後，針對原有的組件有些事件、方法想要異動，當然想操作到最少異動達到我的效果，所以搜尋了類似的關鍵字，最後才知道利用 HOC ( higher order components ) 可以達到我要的目的，HOC 在 React 已經是相當成熟的概念了，但是在 Vue 裡面實際上看到的案例相當少。
首先可以理解一下 Vuc 的 HOC 的來由，可以參考這篇：探索Vue高阶组件
我能夠快速理解的模式就是，撰寫一個 function 幫你與目標元件溝通，並且取代成原本的 component
下列這個專案：@hoc-element/table 就是一個針對 element plus 修改的例子