基于Webpack及React技術(shù)的Scratch互動在線學習平臺設(shè)計

馮菲菲 鄒連英

摘要：在當今互聯(lián)網(wǎng)時代下，人人會編程已成為時下最熱門的話題之一。Scratch和STEAM等在線教育平臺的教育理念在于寓教于樂，即在娛樂中學會編程思維。以STEAM教育理念為中心，設(shè)計出一種基于Webpack和React的在線編程學習網(wǎng)站。該網(wǎng)站借助React框架的組件化開發(fā)思想，將每個單獨的組件劃分為不同邏輯的JSX單文件，再通過Webpack構(gòu)建命令形成SPA單頁應(yīng)用系統(tǒng)，從而實現(xiàn)模塊化開發(fā)。

關(guān)鍵詞： Webpack； React； Scratch； STEAM； 模塊化開發(fā)； 在線學習

中圖分類號：G43 文獻標識碼：A 文章編號：1009-3044（2018）20-0054-03

Design of ScratchInteractive Online Learning Platform Based on Webpack and ReactTechnology

FENG Fei-fei，ZOU Lian-ying

（Wuhan Institute of Technology， Wuhan 430205， China）

Abstract： In the Internet Age， "Everyone can program！" is nowadays the one of the hottest topics. "Teaching through lively activities" is the core philosophy of Online Education Platform， such as Scratch and STEAM， which aims at allowing users to learn programming while enjoying it. Inspired by this idea， an online programming learning website based on Webpack and React is proposed. Firstly， according to the idea of the component-based development of React， each individual component consists of JSX files which are logically different. To implement the modular development， besides， Webpack is used to create commands for the signal page application （SPA） system.

Key words： webpack； react； scratch； STEAM； modular development； online learning

1前言

在互聯(lián)網(wǎng)飛速發(fā)展的今天，中國教育模式也在飛速更迭，從線下轉(zhuǎn)到線上，從書本到視頻，再到互聯(lián)網(wǎng)平臺。美國于2009年提出了在當今時代背景下的新型教育理念：STEAM教育[1]。這個教育方式具有跨學科性[2]、趣味性、體驗性、實踐性等特點，STEAM教育是一種線上的、可視化、可操作的教育模式。在互聯(lián)網(wǎng)技術(shù)迅速發(fā)展的時代，廣大學生群體學習方式也越來越網(wǎng)絡(luò)化、信息化、多元化，越來越多的人選擇網(wǎng)絡(luò)在線學習，同時網(wǎng)絡(luò)上也出現(xiàn)了各種形式的在線學習網(wǎng)站[3]，但這些學習網(wǎng)站大部分都只是將書本知識進行整理和歸納，僅僅介紹了基礎(chǔ)知識和語法，并沒有運用形象化、多元化的實際案例進行講解和學習。

基于傳統(tǒng)學習方式的弊端，本文提出了一種基于市面上最火的前端庫React與谷歌提供的Scratch框架并結(jié)合Webpack項目打包工具生成的新型在線學習網(wǎng)站。該網(wǎng)站最大的亮點是推出了思維邏輯訓練，與傳統(tǒng)在線學習網(wǎng)站的單一枯燥學習相比，本網(wǎng)站是一個訓練思維邏輯的小游戲，每一步的操作都是利用一個個五彩繽紛和形狀各異的語法模塊，但是每一個小模塊上寫的不是具體的語法語句，而是常見的編程語法轉(zhuǎn)換成的通俗易懂的說明語句。此外，該在線學習平臺除了語法模塊外，還有聲音、運動等有趣的模塊，在完成這樣所有邏輯語法模塊搭建之后，最后學習者設(shè)計的效果將會以動畫的形式呈現(xiàn)出來。這樣大大的吸引了學習者的學習興趣，真正做到了趣味性、可見化等優(yōu)點的現(xiàn)代實踐和理論相結(jié)合的學習理念。

2 Scratch編程平臺

Scratch是一款由麻省理工學院（MIT） 設(shè)計開發(fā)的編程工具[4]。其界面組成結(jié)構(gòu)是：左邊是可以用來進行選擇的功能模塊，中間的部分是學習者自己設(shè)計的邏輯窗口，右邊上部是學習者設(shè)計的邏輯效果預(yù)覽和運行結(jié)果的窗口，右邊下部是角色窗口。

1）腳本區(qū)

腳本區(qū)由八大模塊組成，每一模塊由不同的顏色來進行標識的。每個模塊中包含由多條功能不同的語句，這些語句涉及常見的基本語法語句。這里包含了所有的模塊代碼，學習者只需要將想要設(shè)計實現(xiàn)的邏輯模塊在腳本區(qū)中找到，然后拖拽到指令區(qū)即可。

2）指令區(qū)

這里主要是邏輯結(jié)構(gòu)實現(xiàn)的區(qū)域，學習者只需要將想要實現(xiàn)的邏輯代碼語句拖拽到這個區(qū)域并實現(xiàn)對應(yīng)的嵌套。

3）舞臺區(qū)

舞臺區(qū)是每一個學習編程者所設(shè)計的角色實現(xiàn)邏輯效果的地方，所有的指令區(qū)設(shè)計的語句代碼的最終執(zhí)行效果都將在這里顯示。

4）角色區(qū)

用來顯示學習編程者想要對什么角色做什么樣的編程，可以選擇庫里面預(yù)先保存的角色，也可以通過自己創(chuàng)建或者導(dǎo)入角色素材，甚至可以通過自拍圖片作為新的角色，當選中對應(yīng)的角色后，角色的縮略圖將顯示在本區(qū)域的左下角。

3 互動式在線教育平臺設(shè)計

開發(fā)一款基于Scratch的在線學習網(wǎng)站，主要分為三大部分：第一部分是代碼的開發(fā)與設(shè)計，第二部分是代碼打包并部署發(fā)布到服務(wù)器上，第三部分是用戶能夠通過瀏覽器對發(fā)布的網(wǎng)站進行訪問。該在線學習網(wǎng)站的主要的結(jié)構(gòu)如下圖2所示：

3.1 WEBPACK技術(shù)及開發(fā)環(huán)境搭建

首先來介紹第一部分的內(nèi)容，Node環(huán)境、文本編輯器、Webpack環(huán)境搭建和核心代碼。Node.js 并不是一門語言，僅僅是一個建立在谷歌V8引擎上的一個js運行平臺[5]，可以通過這個環(huán)境執(zhí)行JavaScript，也可以通過JavaScript搭建一個服務(wù)器。安裝node.js的時候會自動安裝好npm包管理工具，安裝完成可以通過DOS命令行窗口來查看node和npm是否安裝正常及其版本號。前端常用的文本編輯器有Visual Studio Code、Sublime Text和Webstorm，本論文采用的Visual Studio Code文本編輯器，因為其輕量且插件完善。

由于React本身并不能實現(xiàn)模塊化開發(fā)，所以借助了Webpack前端模塊化開發(fā)構(gòu)建工具。在Webpack看來，所有的資源文件都是模塊（module），只是處理的方式不同[6]。關(guān)于Webpack的使用，主要是入口、輸出以及有效處理文件的loader和插件。

Webpack搭建的Scratch項目的大致結(jié)構(gòu)如下圖3所示，基本環(huán)境搭建完成之后，只需按需加載項目需要的模塊即可。Webpack基本配置包括balbel-loader（可以將ES6語法轉(zhuǎn)換成ES5語法，將React語法轉(zhuǎn)成普通JavaScript語法）、css-loader（css-loader會遍歷css文件，找到所有的url并且處理）、scss-loader（將SASS和LESS轉(zhuǎn)換成正常可識別CSS）、url-loader（用來打包文件和圖片以及處理icon字體的加載器），以及熱加載（自動打開瀏覽器，每次內(nèi)容的變化會在瀏覽器中實時變化）。最后也可以給Webpack按需求配置一些常用插件[7]，例如自動生成HTML頁面插件、代碼壓縮混淆插件、抽取CSS文件插件、壓縮代碼插件、自動打開瀏覽器插件等。

3.2 React技術(shù)及開發(fā)流程設(shè)計

本論文設(shè)計的在線教學網(wǎng)站基于Scratch編程工具，該工具是以Blocky為核心的Scratch 3.0測試版代碼，正式版預(yù)計2018年發(fā)布。之前Scratch 2.0正式版本依賴于flash插件，由于flash插件等待時間長、加載速度慢等缺點，已經(jīng)逐漸被淘汰，Adobe公司已經(jīng)停止了對其的更新。所以本論文采用的是GitHub上開源的測試版代碼，測試版Scratch 3.0主要是基于React框架實現(xiàn)的。

React本質(zhì)就是一個用于構(gòu)建用戶UI的JavaScript庫。React相對于另外兩個流行框架Angular和Vue來說，它不是一個MVC框架，僅作用于view層，它主要用來構(gòu)建可重復(fù)調(diào)用的web組件；其次React是單向數(shù)據(jù)流，每一個父組件負責管理state并且通過props傳遞給下一層組件，不同于Angular和Vue的雙向數(shù)據(jù)綁定；同時它不是每一次的變化都直接通過操作DOM對象來完成[8]，因為直接操作DOM涉及頁面重繪與重構(gòu)，極其消耗性能，所以React通過虛擬DOM的diff算法，使用JavaScript來表示DOM樹的結(jié)構(gòu)，當狀態(tài)變更的時候，再用JavaScript來構(gòu)建一個新的DOM樹結(jié)構(gòu)，通過對比兩個DOM樹的差異，最終只將變化的結(jié)果作用到真實的DOM上。下圖4則為diff實現(xiàn)流程圖：

傳統(tǒng)算法就是對DOM樹中的每個節(jié)點一一對比，循環(huán)遍歷所有的子節(jié)點，然后判斷子節(jié)點的更新狀態(tài)，傳統(tǒng)diff算法的復(fù)雜度為O（n∧3）；React的diff算法復(fù)雜度是0（n），這樣就使ui頁面渲染性能更加流暢，所以本項目采取這種框架進行開發(fā)。

React有四個核心概念：虛擬DOM、組件化、JSX語法、單向數(shù)據(jù)流。

1）組件并不是真實的DOM節(jié)點，而是存在于內(nèi)存之中的一種數(shù)據(jù)結(jié)構(gòu)，叫作虛擬DOM（Virtual DOM）。虛擬DOM是通過JavaScript工廠函數(shù)生成一個虛擬的DOM元素，里面承載著自己的data 函數(shù)綁定的事件，將DOM先利用一個對象的形式儲存起來，通過render函數(shù)識別綁定事件、與綁定的參數(shù)類名等，去生成新的DOM樹，這樣就形成了頁面刷新的過程。只有當它插入文檔以后，才會變成真實的DOM。

2）React允許將代碼封裝成組件（component），然后像插入普通HTML標簽一樣，在網(wǎng)頁中插入這個組件。

3）HTML語言直接寫在JavaScript語言之中，不加任何引號，這就是JSX 的語法，它允許HTML與JavaScript的混寫。

4）React中單向數(shù)據(jù)流，是在一個多組件構(gòu)成的應(yīng)用中，每一個父組件負責管理自己組件的state并且通過props傳遞給下一層組件，狀態(tài)（state）只能通過setState方法進行更新，從而確保UI發(fā)生更新。State中的最終結(jié)果值應(yīng)該被當作子組件的屬性傳遞給子組件，在子組件中通過this.props來獲取值。

在React 框架下數(shù)據(jù)層次只能從上往下利用props進行狀態(tài)傳遞，這樣的數(shù)據(jù)流向在小型應(yīng)用中傳遞并無問題，但是當數(shù)據(jù)流向傳遞復(fù)雜或存在嵌套的時候，對數(shù)據(jù)進行管理和傳遞將變得異常復(fù)雜。這時就需要一個容器對頁面或者組件級別的數(shù)據(jù)進行公用管理，為了方便開發(fā)者管理龐大的數(shù)據(jù)，就引入了Redux狀態(tài)管理工具。Redux在狀態(tài)管理上并不復(fù)雜，通過getState方法得到某一頁面的具體值， 通過action進行數(shù)據(jù)改變，dispatch 進行變更數(shù)據(jù)的派發(fā)。這種模式很像是一個酒店的總管，所有的命令從前臺發(fā)出，由一個總管去管理這些狀態(tài)與指令，并派發(fā)小二端對應(yīng)的菜，Redux就是提供這種能力，它可以更好的監(jiān)控數(shù)據(jù)的流向，更好地把控數(shù)據(jù)，更好的狀態(tài)共享。

3.3 Scratch代碼的融合