2019年8月5日

常用程式碼片段的管理技巧及使用工具

常用程式碼片段的管理技巧及使用工具

Wayne Fu 0 A+
協助前端架站久了之後,有許多常見的小工具會用到,代表需要安裝的程式碼中,有一部份是重複性高的,例如:

  • FB 讚、分享按鈕
  • 各種社群分享按鈕
  • FB 留言板等等

能重複使用的程式碼自然較有價值,即使是不能 100% 套用,但只要修改一部份就能用在新的情境,也是可節省大量時間,這些程式碼都值得用一套規則保存及管理。

只有 10 組程式碼要管理時當然很輕鬆,但有上百組、數百組時怎麼辦呢?有沒有好的管理工具或技巧,可以快速找到需要的程式碼呢?



一、原始作法的困境


一開始寫的 code 比較少時,我用 2 種方式記錄保存:

  • Evernote
  • 存成對應的 html/css/js 檔案,再使用 Windows 軟體「Everything」搜尋

當資料數量較少,搜尋起來雜訊沒那麼多,終歸可以找到需要的 code。但等到資料量一大時,缺點就浮現了。


1. Evernote

  • 由於先天上的限制,Evernote 的分類最多只有 2 層,很難對所有程式碼進行較有系統的分類及管理。
  • 很多客戶會用到類似的程式碼,那麼進行搜尋時,很容易就列出所有相似的程式碼,不容易有精確搜尋的方法
  • Evernote 會同時對標題及內文進行搜尋,因此不相關的搜尋結果太多
  • 如果為了這件事改用其他記事軟體,例如 oneNote,同時使用多個記事軟體在管理上不是好的作法


2. Everything

  • 直接用 Window 資料夾進行分類,管理上會比 Evernote 來得有效率,再搭配 Everything 搜尋更是完美
  • 可惜實際操作上還是會遇到跟 Evernote 一樣的情形,當多個客戶用到類似程式碼時,搜尋結果會出現大量雜訊。


總之,不管使用哪種方案,需要的都是如何縮短搜尋的時間,有效排除不精確的搜尋結果



二、程式碼管理工具


1. 管理工具

因此研究了一下,是否有什麼管理程式碼的好工具,大致找到這些:



2. 使用缺點

大致裝來玩一玩後,總覺得沒有 Evernote 或 Everything 來得方便,大概歸納一下:

  • Evernote 或 Everything 都是系統必備的常駐工具,有熱鍵可以隨時叫出來搜尋
  • 如果另外安裝程式碼管理工具,需要使用時才執行軟體,效率上有點慢
  • 如果要在多個裝置使用,得每個裝置都安裝、建立所有程式碼片段。
  • 這些軟體不會有雲端同步的功能,代表每個裝置要自己想辦法同步所有程式碼
  • 這些工具多半使用英文開發,對中文的支援度不一定夠

所以沒多久我就放棄使用這些工具了,轉而想辦法研究能否讓 Evernote 或 Everything 更好操作。



三、Everything 搜尋特定資料夾


為了能夠讓程式碼在所有裝置同步,必須在 Dropbox 內建立一個專門存放程式碼片段的資料夾。

為這個資料夾建立多個分類資料夾、多層子分類資料夾之後,如果可使用 Everything 單單搜尋這個資料夾之下的所有內容,排除其他不相關的內容,我想就是一個最簡便的方案了

搜尋到 Everything 這個討論串「Limiting search to within a folder」,提供了不少概念。


1. 使用命令列

官方提供了許多命令列的指令,可參考官網文件「Command Line Interface」。

例如使用以下的指令,就能搜尋特定資料夾,及所有子目錄:

C:\Everything\Everything.exe -path 完整路徑


2. 寫入登錄檔

原討論串有網友提供了密技,將一些指令寫入 Windows 登錄檔,將來按右鍵時就會出現選項,可以直接用 Everything 搜尋特定的資料夾。


3. 從檔案總管搜尋資料夾

詳細設定方法請參考這篇「Everything 重要技巧」,在設定中勾選右鍵選單的選項後,將來在檔案總管任何資料夾,只要按右鍵都能直接用 Everything 搜尋該目錄及所有子資料夾。


4. 搜尋捷徑

經過我的實測,如果將某些常用資料夾設成捷徑,放在 Windows 桌面上,按右鍵用 Everything 搜尋這個捷徑,一樣有搜尋該目錄及所有子資料夾的效果

那麼這個作法比進入檔案總管選取資料夾,再按右鍵搜尋,會來得快更多。


5. 製作熱鍵

如果能直接做個熱鍵,按了就執行搜尋特定資料夾,那麼又比以上所有方案快更多。

研究了一下,作法如下:

  • 用文書編輯軟體製作一個 .bat 檔,內容類似以下:
    • C:\Everything\Everything.exe -path E:\Dropbox\
    • 前一個路徑為 Everything 所在位置,後一個路徑為要搜尋的資料夾
  • 儲存後將 .bat 檔放在自己記得住的地方
  • 對這個 .bat 檔按右鍵,建立捷徑,將捷徑放在桌面
  • 對這個捷徑按右鍵 → 內容,可設定快速鍵

將來直接快速鍵,就能執行用 Everything 搜尋特定資料夾了。



四、小結


簡單做個總結,Evernote 由於會同時搜尋標題及內文,因此較難搜尋到精確的結果。而 Everything 將搜尋範圍縮小到特定資料夾後,只要用心為標題命名,就可以有精確的搜尋結果,能有效管理整理好的程式碼片段

不過提醒一下,本篇的方法比較適合業餘愛好者使用,如果是職業工程師,只要打開電腦就使用 Visio Studio 這類專業開發工具的話,其本身就有相關的 code snippet 套件可使用,會有不一樣的管理方式與技巧,就不一定需要另外存放程式碼片段了。


更多網頁開發工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

2 則留言:

  1. Evernote 可以用 intitle:keyword 搜尋標題的關鍵詞,用 keyword -intitle:keyword 搜尋內文關鍵詞。

    ref: https://help.evernote.com/hc/zh-tw/articles/208313828-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-Evernote-%E7%9A%84%E9%80%B2%E9%9A%8E%E6%90%9C%E5%B0%8B%E8%AA%9E%E6%B3%95

    回覆刪除
    回覆
    1. 可以這麼做,除了操作不方便,本文也有說明了,evernote 搜尋結果雜訊太多

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP