基于Webpack及React技术的Scratch互动在线学习平台设计

冯菲菲 邹连英

摘要：在当今互联网时代下，人人会编程已成为时下最热门的话题之一。Scratch和STEAM等在线教育平台的教育理念在于寓教于乐，即在娱乐中学会编程思维。以STEAM教育理念为中心，设计出一种基于Webpack和React的在线编程学习网站。该网站借助React框架的组件化开发思想，将每个单独的组件划分为不同逻辑的JSX单文件，再通过Webpack构建命令形成SPA单页应用系统，从而实现模块化开发。

关键词： Webpack； React； Scratch； STEAM； 模块化开发； 在线学习

中图分类号：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前言

在互聯网飞速发展的今天，中国教育模式也在飞速更迭，从线下转到线上，从书本到视频，再到互联网平台。美国于2009年提出了在当今时代背景下的新型教育理念：STEAM教育[1]。这个教育方式具有跨学科性[2]、趣味性、体验性、实践性等特点，STEAM教育是一种线上的、可视化、可操作的教育模式。在互联网技术迅速发展的时代，广大学生群体学习方式也越来越网络化、信息化、多元化，越来越多的人选择网络在线学习，同时网络上也出现了各种形式的在线学习网站[3]，但这些学习网站大部分都只是将书本知识进行整理和归纳，仅仅介绍了基础知识和语法，并没有运用形象化、多元化的实际案例进行讲解和学习。

基于传统学习方式的弊端，本文提出了一种基于市面上最火的前端库React与谷歌提供的Scratch框架并结合Webpack项目打包工具生成的新型在线学习网站。该网站最大的亮点是推出了思维逻辑训练，与传统在线学习网站的单一枯燥学习相比，本网站是一个训练思维逻辑的小游戏，每一步的操作都是利用一个个五彩缤纷和形状各异的语法模块，但是每一个小模块上写的不是具体的语法语句，而是常见的编程语法转换成的通俗易懂的说明语句。此外，该在线学习平台除了语法模块外，还有声音、运动等有趣的模块，在完成这样所有逻辑语法模块搭建之后，最后学习者设计的效果将会以动画的形式呈现出来。这样大大的吸引了学习者的学习兴趣，真正做到了趣味性、可见化等优点的现代实践和理论相结合的学习理念。

2 Scratch编程平台

Scratch是一款由麻省理工学院（MIT） 设计开发的编程工具[4]。其界面组成结构是：左边是可以用来进行选择的功能模块，中间的部分是学习者自己设计的逻辑窗口，右边上部是学习者设计的逻辑效果预览和运行结果的窗口，右边下部是角色窗口。

1）脚本区

脚本区由八大模块组成，每一模块由不同的颜色来进行标识的。每个模块中包含由多条功能不同的语句，这些语句涉及常见的基本语法语句。这里包含了所有的模块代码，学习者只需要将想要设计实现的逻辑模块在脚本区中找到，然后拖拽到指令区即可。

2）指令区

这里主要是逻辑结构实现的区域，学习者只需要将想要实现的逻辑代码语句拖拽到这个区域并实现对应的嵌套。

3）舞台区

舞台区是每一个学习编程者所设计的角色实现逻辑效果的地方，所有的指令区设计的语句代码的最终执行效果都将在这里显示。

4）角色区

用来显示学习编程者想要对什么角色做什么样的编程，可以选择库里面预先保存的角色，也可以通过自己创建或者导入角色素材，甚至可以通过自拍图片作为新的角色，当选中对应的角色后，角色的缩略图将显示在本区域的左下角。

3 互动式在线教育平台设计

开发一款基于Scratch的在线学习网站，主要分为三大部分：第一部分是代码的开发与设计，第二部分是代码打包并部署发布到服务器上，第三部分是用户能够通过浏览器对发布的网站进行访问。该在线学习网站的主要的结构如下图2所示：

3.1 WEBPACK技术及开发环境搭建

首先来介绍第一部分的内容，Node环境、文本编辑器、Webpack环境搭建和核心代码。Node.js 并不是一门语言，仅仅是一个建立在谷歌V8引擎上的一个js运行平台[5]，可以通过这个环境执行JavaScript，也可以通过JavaScript搭建一个服务器。安装node.js的时候会自动安装好npm包管理工具，安装完成可以通过DOS命令行窗口来查看node和npm是否安装正常及其版本号。前端常用的文本编辑器有Visual Studio Code、Sublime Text和Webstorm，本论文采用的Visual Studio Code文本编辑器，因为其轻量且插件完善。

由于React本身并不能实现模块化开发，所以借助了Webpack前端模块化开发构建工具。在Webpack看来，所有的资源文件都是模块（module），只是处理的方式不同[6]。关于Webpack的使用，主要是入口、输出以及有效处理文件的loader和插件。

Webpack搭建的Scratch项目的大致结构如下图3所示，基本环境搭建完成之后，只需按需加载项目需要的模块即可。Webpack基本配置包括balbel-loader（可以将ES6语法转换成ES5语法，将React语法转成普通JavaScript语法）、css-loader（css-loader会遍历css文件，找到所有的url并且处理）、scss-loader（将SASS和LESS转换成正常可识别CSS）、url-loader（用来打包文件和图片以及处理icon字体的加載器），以及热加载（自动打开浏览器，每次内容的变化会在浏览器中实时变化）。最后也可以给Webpack按需求配置一些常用插件[7]，例如自动生成HTML页面插件、代码压缩混淆插件、抽取CSS文件插件、压缩代码插件、自动打开浏览器插件等。

3.2 React技术及开发流程设计

本论文设计的在线教学网站基于Scratch编程工具，该工具是以Blocky为核心的Scratch 3.0测试版代码，正式版预计2018年发布。之前Scratch 2.0正式版本依赖于flash插件，由于flash插件等待时间长、加载速度慢等缺点，已经逐渐被淘汰，Adobe公司已经停止了对其的更新。所以本论文采用的是GitHub上开源的测试版代码，测试版Scratch 3.0主要是基于React框架实现的。

React本质就是一个用于构建用户UI的JavaScript库。React相对于另外两个流行框架Angular和Vue来说，它不是一个MVC框架，仅作用于view层，它主要用来构建可重复调用的web组件；其次React是单向数据流，每一个父组件负责管理state并且通过props传递给下一层组件，不同于Angular和Vue的双向数据绑定；同时它不是每一次的变化都直接通过操作DOM对象来完成[8]，因为直接操作DOM涉及页面重绘与重构，极其消耗性能，所以React通过虚拟DOM的diff算法，使用JavaScript来表示DOM树的结构，当状态变更的时候，再用JavaScript来构建一个新的DOM树结构，通过对比两个DOM树的差异，最终只将变化的结果作用到真实的DOM上。下图4则为diff实现流程图：

传统算法就是对DOM树中的每个节点一一对比，循环遍历所有的子节点，然后判断子节点的更新状态，传统diff算法的复杂度为O（n∧3）；React的diff算法复杂度是0（n），这样就使ui页面渲染性能更加流畅，所以本项目采取这种框架进行开发。

React有四个核心概念：虚拟DOM、组件化、JSX语法、单向数据流。

1）组件并不是真实的DOM节点，而是存在于内存之中的一种数据结构，叫作虚拟DOM（Virtual DOM）。虚拟DOM是通过JavaScript工厂函数生成一个虚拟的DOM元素，里面承载着自己的data 函数绑定的事件，将DOM先利用一个对象的形式储存起来，通过render函数识别绑定事件、与绑定的参数类名等，去生成新的DOM树，这样就形成了页面刷新的过程。只有当它插入文档以后，才会变成真实的DOM。

2）React允许将代码封装成组件（component），然后像插入普通HTML标签一样，在网页中插入这个组件。

3）HTML语言直接写在JavaScript语言之中，不加任何引号，这就是JSX 的语法，它允许HTML与JavaScript的混写。

4）React中单向数据流，是在一个多组件构成的应用中，每一个父组件负责管理自己组件的state并且通过props传递给下一层组件，状态（state）只能通过setState方法进行更新，从而确保UI发生更新。State中的最终结果值应该被当作子组件的属性传递给子组件，在子组件中通过this.props来获取值。

在React 框架下数据层次只能从上往下利用props进行状态传递，这样的数据流向在小型应用中传递并无问题，但是当数据流向传递复杂或存在嵌套的时候，对数据进行管理和传递将变得异常复杂。这时就需要一个容器对页面或者组件级别的数据进行公用管理，为了方便开发者管理庞大的数据，就引入了Redux状态管理工具。Redux在状态管理上并不复杂，通过getState方法得到某一页面的具体值， 通过action进行数据改变，dispatch 进行变更数据的派发。这种模式很像是一个酒店的总管，所有的命令从前台发出，由一个总管去管理这些状态与指令，并派发小二端对应的菜，Redux就是提供这种能力，它可以更好的监控数据的流向，更好地把控数据，更好的状态共享。

3.3 Scratch代码的融合