vscode原始碼分析【九】視窗裡的主要元素

liulun發表於2019-06-21
VSCode原始碼

第一篇： vscode原始碼分析【一】從原始碼執行vscode
第二篇：vscode原始碼分析【二】程式的啟動邏輯，第一個視窗是如何建立的
第三篇：vscode原始碼分析【三】程式的啟動邏輯，效能問題的追蹤
第四篇：vscode原始碼分析【四】程式啟動的邏輯，最初建立的服務
第五篇：vscode原始碼分析【五】事件分發機制
第六篇：vscode原始碼分析【六】服務例項化和單例的實現
第七篇：vscode原始碼分析【七】主程式啟動訊息通訊服務
第八篇：vscode原始碼分析【八】載入第一個畫面

在上一節中，我們講到載入第一個畫面時，載入了一個workbench.js
（src\vs\code\electron-browser\workbench\workbench.js）
這個檔案中執行了：

bootstrapWindow.load([
	'vs/workbench/workbench.main',
	'vs/nls!vs/workbench/workbench.main',
	'vs/css!vs/workbench/workbench.main'
]

載入了workbench.main，這個檔案負責初始化介面需要用到的庫
它本身不負責執行任何邏輯，但卻載入了三百多個類，哈！
bootstrapWindow.load的回撥方法裡，執行了：

require('vs/workbench/electron-browser/main').main(configuration);

這句程式碼很重要
我們看看這個類的main方法；它執行了：

	const renderer = new CodeRendererMain(configuration);
	return renderer.open();

CodeRendererMain類也在同一個檔案裡
（src\vs\workbench\electron-browser\main.ts）
它的建構函式裡做了一些初始化工作（介面縮放事件設定、檔案讀寫庫的設定等）
不重要，先不理會，先看open方法：

this.workbench = new Workbench(document.body, services.serviceCollection, services.logService);
//......
const instantiationService = this.workbench.startup();

你看到，我們把body傳給了workbench的例項
workbench的建構函式裡，並沒有用這個body做什麼事情；
而是把他傳遞給了它的父類：Layout（src\vs\workbench\browser\layout.ts），儲存在父類parent屬性裡
這個類很重要，我們待會兒會說；
現在我們看看workbench的startup方法

				// Layout
				this.initLayout(accessor);
				// Registries
				this.startRegistries(accessor);
				// Context Keys
this._register(instantiationService.createInstance(WorkbenchContextKeysHandler));
				// Register Listeners
				this.registerListeners(lifecycleService, storageService, configurationService);
				// Render Workbench
this.renderWorkbench(instantiationService, accessor.get(INotificationService) as NotificationService, storageService, configurationService);
				// Workbench Layout
this.createWorkbenchLayout(instantiationService);
				// Layout
				this.layout();

initLayout方法，初始化了一堆服務（environmentService，lifecycleService等），監聽了一堆事件（全屏、編輯器顯隱等）
renderWorkbench方法（最重要！），給body和一個叫container的元素加了一系列的樣式；
container元素是在父類Layout裡初始化的，這個元素最終會是所有元件的父親；

	private _container: HTMLElement = document.createElement('div');
	get container(): HTMLElement { return this._container; }

之後，給container元素加了幾個子元素：

[
			{ id: Parts.TITLEBAR_PART, role: 'contentinfo', classes: ['titlebar'] },
			{ id: Parts.ACTIVITYBAR_PART, role: 'navigation', classes: ['activitybar', this.state.sideBar.position === Position.LEFT ? 'left' : 'right'] },
			{ id: Parts.SIDEBAR_PART, role: 'complementary', classes: ['sidebar', this.state.sideBar.position === Position.LEFT ? 'left' : 'right'] },
			{ id: Parts.EDITOR_PART, role: 'main', classes: ['editor'], options: { restorePreviousState: this.state.editor.restoreEditors } },
			{ id: Parts.PANEL_PART, role: 'complementary', classes: ['panel', this.state.panel.position === Position.BOTTOM ? 'bottom' : 'right'] },
			{ id: Parts.STATUSBAR_PART, role: 'contentinfo', classes: ['statusbar'] }
		].forEach(({ id, role, classes, options }) => {
			const partContainer = this.createPart(id, role, classes);

			if (!configurationService.getValue('workbench.useExperimentalGridLayout')) {				this.container.insertBefore(partContainer, this.container.lastChild);
			}

			this.getPart(id).create(partContainer, options);
		});

這幾個子元素分別是最左側的ACTIVITYBAR_PART，中間的EDITOR_PART，等等（注意：視窗的選單欄也是他自己渲染的）

這些元素建立出來之後，就加入到container裡去了；
然後把container加入到body裡去了（parent存的是body）

this.parent.appendChild(this.container);

在startup方法裡還呼叫了this.layout()方法

				position(this.container, 0, 0, 0, 0, 'relative');
				size(this.container, this._dimension.width, this._dimension.height);
				// Layout the grid widget
this.workbenchGrid.layout(this._dimension.width, this._dimension.height);
				// Layout grid views
				this.layoutGrid();

在這裡把container放到到最大，佔據整個body
至此介面主要元素渲染完成！


另外：
想除錯介面裡的內容，就不能用第一節講的除錯方法來除錯了；
你可以執行：

.\scripts\code.bat

先啟動畫面，然後按Ctrl+Shift+i開啟除錯視窗；
如果需要重新整理畫面的話，可以按Ctrl+R重新整理畫面；

相關文章