使用 Node.js 和 dashDB 服务开发一个公共交通系统模拟器（3）

look_w

步骤 3. 执行                                JavaScript 对象的后端开发后端代码位于 bussimulator/public/js/controller.js                                文件中。它很简单，包含在前端中使用的代码和对象，在下一个步骤中会详细介绍这一部分。下图显示了 controller.js 的一个简单的类图。
该代码包含五个对象：Line、Stop、Bus、Person 和                                Event。该系统以面向对象的方式进行开发，使之更容易理解其代码内部所发生的事情，并对系统内部的元素和对象提供更好的控制。
Line 对象包括变量和一个 reset 函数。此对象表示公交车的实际路径。每一个 Line 都有一个 stop                                对象数组和一个 bus 对象数组。一个 Line 必须有一个 interval，它存储公交车出发时间之间的时间间隔。在新建一个                                Line 时，必须提供一个 id、一个 name 和一个 interval 作为参数，例如，var                                        line1 = new Line(001, "Bloor St", 20)。在后端，代码看起来像下面的清单。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var Line = function(id, name, interval){     this.id = id;     this.name = name;     this.interval = interval;     this.stops = [];     this.buses = [];     this.onSim = false;     }     this.reset = function(){         this.onSim = true;         for (var i = 0; i < this.buses.length; i++)             this.buses.reset();     } }

在添加一个新的 Line 之后，下一步是将 stops 添加至该 Line。Stop 对象存储一个                                        id、name、location 和 passengers。以百分比定义每一个 stop                                的位置。例如，如果一个 Line 有三个 Stops，第一个 stop 将是位于 Line 大小的 0％，第二个 stop 位于                                Line 的 50％，最后一个位于 Line 的 100％。passengers 变量是存储 Person                                对象的数组，它提供每位乘客的始发地和目的地。

1 2 3 4 5 6 7 8 9 10 11 12

var Stop = function(id,name){     this.id = id;     this.name = name;     this.location = undefined; //in %     this.passengers = [];     /* Show people at stop */     this.showPeople = function(){         $("#stop_" + this.id + "_people")         .html(this.passengers.length);     } }

对象 bus 包含有关乘客、当前线路、当前车站及其最大容量的信息。同样，passengers 数组负责存储                                        Person 对象，reset 函数负责停止公交车，并将公交车返回其起始位置，即第一站。它包含了其他许多方法，比如                                        changeColor、showPeople、addPeople 等等，这些都在每个函数上方的注释中进行了说明。
Event                                对象的工作类似于模拟器的时间表。这个对象获得一个时间、一个动作和一个公交车。例如，假设您想在五秒钟后将一条线路的首班车从一站移到另一站。此事件的代码是                                        new Event("00:05", goToNextStop, line.buses[0]) - ，其中                                        line.buses[0] 就是要移动的公交车，它链接到一条线路。
简单看看代码的其余部分，就可以了解对象是如何链接的，以及前端是如何使用对象的。controller.js                                是模拟器的基础。在开始开发前端代码之前，您需要理解它。您可以从我们的 DevOps Services 存储库中下载完整的代码。
步骤                                4. 对 Bootstrap 和 jQuery API 执行前端开发 框架用于前端开发。 用于在模拟器上的效果和动画。
公交车模拟器界面分为三个主要部分：画布、计时器和侧边栏。画布上显示线路和公交车。用                                        Start、Pause 和 Stop                                按钮可以控制在右上角的计时器。在侧边栏中，可以添加线路和人员，还可以看到一些模拟信息。
要将线路添加到模拟器，请进入 Line                                选项卡。它们上方的小圆圈和数字代表车站，以及在每个车站有多少人。在它们里面的小方块和数字代表公交车，以及每辆公交车内的人数。如果需要从模拟器中删除一条线路，请单击在线路名称旁边的                                        X。
如果需要在模拟器中将人添加到公交线路上的每个车站，请转到 People                                选项卡。您可以通过单击它改变该线路每个部分的流量。要查看每辆公交车的信息（比如乘客人数、当前车站和到达下一站的时间），请单击公交车。
单击 Start 开始模拟。您可以在 Home                                选项卡上跟踪模拟事件。它显示了事件列表，包括时间和每辆公交车的动作。您可以暂停、恢复和停止模拟，也可以添加更多线路，或者从模拟器中删除线路。
在本例中，动画是以一个事件列表为基础的。每个事件都与时间、公交车及将要采取的具体行动有关。在将一条新线路添加到画布上时，这条新线路的每辆公交车都分配了一个发车时间，并且这些事件都被放在事件列表上。当模拟开始时，系统会开始检查，以确定模拟器的时间是否等于第一个事件的时间。如果时间相等，则执行该事件的动作，并调度该公交车的下一个事件。
这两个动作是去下一站，并返回到终点。对于第一个动作，公交车要在其当前车站停留一些时间，因为人们要上下车。在这之后，它开到下一站。速度取决于这一段线路上的交通。第二个动作发生在公交车到达最后一站的时候。它停留在该站，所有人都下车，然后它又回到终点。
为了将样式和动画添加到您的应用程序，将以下文件复制到您的项目，并复制 css 和 js 文件夹中的 Bootstrap 和 jQuery 文件，保持目录结构：

• bussimulator/public/css/style.css
• bussimulator/public/js/animation.js
• bussimulator/views/index.ejs