iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
0

大家好,我是韋恩,今天是鐵人賽的二十四天,我們將繼續元件的新增功能,並會檢視下目前的元件設計與架構!

Day24專案實作: 元件開發與架構調整


在先前的樹狀元件實作裡,我們使用了jsonFile這個套件,並於Treeview的類別實作了讀取方法。現在我們要讓使用者選取編輯器程式碼後可以使用選單命令新增snippet,並呈現變化在樹狀元件上。為此,讓我們先初步實現新增snippet分類與snippet片段內容的功能。

class DataProvider {
    ...
    public addCategoryItem(category: string) {
		this.dataStorage?.push(new TreeViewItem(category, []));
		this.updateView();
	}
	public addSnippetItem(category: string, title: string, snippet: SnippetJsonObject) {
		const categoryItem = this.dataStorage?.find(i => i.label === category);
		const snippetItem = new TreeViewItem(title).setSnippet(snippet);
		categoryItem?.children?.push(snippetItem);
		this.updateView();
	}
    ...
}

實作完這兩個方法後,讓我們簡單綁定下選單的command新增樹狀選單的選項,執行命令測試下新增樹狀選單有無成功。

import * as vscode from 'vscode';
import { DataProvider } from './treeview';

export function activate(context: vscode.ExtensionContext) {
    ...
	const provider = new DataProvider(context);
 vscode.window.registerTreeDataProvider('cmtreeview', provider);
	let addSnippet = vscode.commands.registerCommand('ithome30-code-manager.addSnippet', () => {
		const textEditor = vscode.window.activeTextEditor;
		const selectionCode = textEditor?.document.getText(textEditor.selection);
		provider.addCategoryItem('Javascript');
		provider.addSnippetItem('Javascript', 'async function', {
			prefix: 'js-async',
			body: selectionCode?.split('\n') || [],
			description: 'js async function'
		});
	});
    ...
}

執行後,可以看到新增了一個Javascript的類別與底下的async function的snippet。

現在我們已經可以處理treeview的新增選項了,但這些改動在我們把擴充套件重新載入就會全部消失,因為我們並未將改動寫到對應的workspace的json檔案下面。

假如我們在treeview做寫入json的動作的話,大致的程式碼將會如下

class DataProvider {
    ...
    private writeSnippetJson(path, snippetObject) {
        ...
    }
    public addCategoryItem(category: string) {
		this.dataStorage?.push(new TreeViewItem(category, []));
		this.updateView();
        this.writeSnippetJson(somepath, snippetObject);
	}
	public addSnippetItem(category: string, title: string, snippet: SnippetJsonObject) {
		const categoryItem = this.dataStorage?.find(i => i.label === category);
		const snippetItem = new TreeViewItem(title).setSnippet(snippet);
		categoryItem?.children?.push(snippetItem);
		this.updateView();
        this.writeSnippetJson(somepath, snippetObject);
	}
    ...
}

可以看到我們的treeview裡的方法做的事情越來越多,並且這些方法跟treeview原先負責的事情並不相關,且讀取、寫入邏輯沒辦法被其他模組重複使用。在未來,我們將使用Webview實作查詢、新增跟編輯程式碼片段的功能。Webview元件裡同樣也需要讀取snippet的資料,但如果讓WebviewPanel類別直接讀取Treeview的dataStorage。會直接拿到一堆TeeViewItem,在資料處理上將更為綁手綁腳,也就是說我們在treeview裡進行data處理的這邏輯已經和treeview元件耦合了,妨礙專案的其他模組功能擴充。

在之後的元件重構裡,我們將會把dataStorage的資料載入與調整,移轉到workspace.ts裡面。

結語


好的,今天我們實作了treeview的資料新增,並且開始調整元件架構。
明天我們會繼續專案開發,我們明天見,掰掰!


上一篇
Day23 | 開發Snippet用的元件(一)
下一篇
Day25 | Extension事件與資料處理
系列文
自己用的工具自己做! 30天玩轉VS Code Extension之旅36
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言