馮菲菲 鄒連英

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

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

中圖分類號(hào)：G43 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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)平臺(tái)。美國于2009年提出了在當(dāng)今時(shí)代背景下的新型教育理念：STEAM教育[1]。這個(gè)教育方式具有跨學(xué)科性[2]、趣味性、體驗(yàn)性、實(shí)踐性等特點(diǎn)，STEAM教育是一種線上的、可視化、可操作的教育模式。在互聯(lián)網(wǎng)技術(shù)迅速發(fā)展的時(shí)代，廣大學(xué)生群體學(xué)習(xí)方式也越來越網(wǎng)絡(luò)化、信息化、多元化，越來越多的人選擇網(wǎng)絡(luò)在線學(xué)習(xí)，同時(shí)網(wǎng)絡(luò)上也出現(xiàn)了各種形式的在線學(xué)習(xí)網(wǎng)站[3]，但這些學(xué)習(xí)網(wǎng)站大部分都只是將書本知識(shí)進(jìn)行整理和歸納，僅僅介紹了基礎(chǔ)知識(shí)和語法，并沒有運(yùn)用形象化、多元化的實(shí)際案例進(jìn)行講解和學(xué)習(xí)。

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

2 Scratch編程平臺(tái)

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

1）腳本區(qū)

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

2）指令區(qū)

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

3）舞臺(tái)區(qū)

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

4）角色區(qū)

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

3 互動(dòng)式在線教育平臺(tái)設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.3 Scratch代碼的融合