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

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的資料新增，並且開始調整元件架構。
明天我們會繼續專案開發，我們明天見，掰掰！