隨著前后端分離成為互聯網專案開發的標準模式， API 成為了前后端聯通的橋梁，而面對越來越頻繁和復雜的呼叫需求，專案里的 API 數量也越來越多，我們需要通過搜索功能來快速定位到對應的 API來進行使用，
下面我們會通過這篇文章向大家介紹 Eolink 的全域搜索功能，
| Eolink 全域搜索功能介紹
Eolink 的全域搜索功能支持 API 管理 及 API 自動化測驗 兩個模塊的使用，如圖1，
圖1
它可以同時完成兩種環境的搜索，分別是：
專案內搜索，
全域搜索，
接下來，我們看看在 API 管理 和** API 自動化測驗** 的頁面中，全域搜索功能會有什么區別，
API 管理與測驗
在專案內搜索（圖2）和全域搜索（圖3）環境下，展示的搜索型別是不一樣的，在全域搜索的時候會多一個搜索專案的型別，對比如下圖，
圖2
圖3
API 自動化測驗
在 API 自動化測驗頁面當中，專案內搜索（圖4）和全域搜索（圖5）環境所展示的搜索型別和在 API 管理與測驗頁面也是不一樣的，對比如下圖，
圖4
圖5
| 全域搜索功能的亮點 - 鍵盤控制
Eolink 的全域搜索支持鍵盤控制，使用者可完全脫離滑鼠進行使用，體驗非常方便，
*** Ctrl + F 鍵使搜索框聚焦**
*** Tab 鍵切換搜索環境**
*** 上下鍵控制選中項**
*** Enter 鍵確定**
*** Backspace 鍵可重新輸入關鍵字**
| 全域搜索功能的實作
不同模塊全域搜索框有不同的展示和搜索物件，這些都是通過路由和正則運算式一起去進行判斷和控制的，
搜索狀態不同時，搜索框下方的搜索展示框所展示的內容也是不同的，在搜索框聚焦的時候才會出現搜索展示框，使用 ngSwitch 去控制展示框展示的內容，
*** 搜索框聚焦且沒有輸入搜索內容時顯示搜索歷史框
- 進行一次搜索之后，就會把本次的一個搜索資料存到本地的 localStorage 中，搜索歷史記錄就從 localStorage 中獲取，
- 搜索框聚焦且輸入搜索內容時顯示搜素型別框（點擊某個搜索型別后，改變搜索關鍵字，展示框里面的內容會從搜索資料變成搜索型別）
- 搜索框聚焦且點擊搜索型別之后顯示搜索資料框**
對接 UI 函式統一采用：
fn_watch_ui(inAction:string,inParams:any) 去進行暴露，fn_watch_ui 函式相當于頁面訪問 js 函式的一個入口，當頁面想訪問 js 中的某個函式，只有通過這個入口，觸發一個動作才會訪問到指定的函式，
html 部分示例：
js 示例：
以上就是對 Eolink 全域搜索的介紹以及功能實作的簡要描述，它的出現提高了用戶的作業效率，讓用戶快速定位到目標內容，
圖中所使用的的介面管理工具是eolink，感興趣可以自行使用：www.eolink.com
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/453837.html
標籤：其他
上一篇：啟動 Tomcat 后報出 Java 永久區記憶體溢位（OutOfMemoryError）
下一篇：同態加密在聯邦計算中的應用