軟件工程導論——結對項目隊友代碼分析

背景介紹

軟件工程這門創新課程，提倡作中學。咱們一開學便感覺到了他的威力，第一週便要求完成一個我的項目。在第二週的結對編程中，咱們互相審覈搭檔的代碼，進行學習。

技術選型分析

個人隊友不單單停留在命令行上，而是搭建了圖形界面，技術選型選擇了Electron與React。

Electron是GitHub開發的一個開源框架。它容許使用Node.js和Chromium完成桌面GUI應用程序的開發。Electron現已被多個開源Web應用程序用於前端與後端的開發，著名項目包括GitHub的Atom和微軟的Visual Studio Code。

React是一個爲數據提供渲染爲HTML視圖的開源JavaScript 庫。React視圖一般採用包含以自定義HTML標記規定的其餘組件的組件渲染。React數據改變時對HTML文檔進行有效更新，和現代單頁應用中組件之間乾淨的分離。

Electron進程通訊基本知識

Electron 運行package.json的main腳本的進程被稱爲主進程。 在主進程中運行的腳本經過建立web頁面來展現用戶界面。 一個 Electron 應用老是有且只有一個主進程。

因爲 Electron 使用了 Chromium 來展現 web 頁面，因此 Chromium 的多進程架構也被使用到。 每一個 Electron 中的 web 頁面運行在它本身的渲染進程中。

在普通的瀏覽器中，web頁面一般在沙盒環境中運行，而且沒法訪問操做系統的原生資源。 然而 Electron 的用戶在 Node.js 的 API 支持下能夠在頁面中和操做系統進行一些底層交互。

進程通訊舉例

 1 // 在主進程中.
 2 const { ipcMain } = require('electron')
 3 ipcMain.on('asynchronous-message', (event, arg) => {
 4   console.log(arg) // prints "ping"
 5   event.reply('asynchronous-reply', 'pong')
 6 })
 7 
 8 ipcMain.on('synchronous-message', (event, arg) => {
 9   console.log(arg) // prints "ping"
10   event.returnValue = 'pong'
11 })

1 //在渲染器進程 (網頁) 中。
2 const { ipcRenderer } = require('electron')
3 console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"
4 
5 ipcRenderer.on('asynchronous-reply', (event, arg) => {
6   console.log(arg) // prints "pong"
7 })
8 ipcRenderer.send('asynchronous-message', 'ping')

功能分析

登錄功能

實現用戶的登錄，而且在錯誤以後有無缺的提示：

登錄以後顯示主要的界面，主要顯示如今的用戶級別，退出按鈕，題目數量，級別選擇，以及生成題目與保存文件按鈕，而且生成的題目也符合需求的要求：

 點擊生成保存題目以後，成功的保存文件，生成的文件符合格式，有標號、有空行：

代碼優勢

1. 代碼風格規範，ESLint檢查沒有任何報錯，命名等也符合通常編程規範
2. 選擇豐富的技術體系，實現的較爲完善
3. 代碼中的進程通訊模塊，對於IPC的瞭解是我更加深刻
4. 項目配合有README文檔，使得了解運行更加方便

不足之處

1. 生成的題目格式不太規範，存在一些不完善的地方
2. 加括號的邏輯較差，生成的題目比較單一