对于送货服务，我们需要一个简单的解决方案来找出最优化的送货路线。有一些在线服务（付费），但他们有太多的选择，不容易使用。

所以我们决定创建一个应用程序，可以通过使用公共访问的API生成最佳的交付路线。为了在开发过程中节省时间，我们已经走了一些捷径，但是我们会在适用的时候给大家一个提示。

我们将介绍一些应用程序中值得一提的要点。我们已经添加了存储库，因此您可以下载应用程序并自己运行它。

用于此应用程序的第三方API/LIB

Graphopper谷歌地图谷歌自动完成PAPA Parse

Application url

Repo url

Fork或从bitbucket url下载项目。

使用terminal/cmd导航到文件夹并运行命令"npm install"

命令

在文件夹内运行项目类型"gulp"。要将项目生成到dist文件夹，请键入'gulp build'。

在运行命令'gulp'

之后，要快速启动项目，请使用Yeoman。

Yeoman是一个项目生成器，淘客单，用于使用已设置的最佳实践工具快速设置项目。你可以创建自己的生成器，也可以使用社区中某个人创建的生成器。

在这个项目中，我们使用了一个现有的生成器

我们选择了Soontao的生成器，云服务器设备，因为他创建了一个基于以下（伟大的）工具生成应用程序的生成器：

Babel

用源代码编写ES6让你的生活如此美好更容易

吞咽

自动化工作谁不想这样（在开发过程中：刷新页面后，代码更改，对于分发：使用eslint检查/修复代码->生成组件预加载->缩小/增强文件->将所有内容写入可以上载的dist文件夹（这部分您也可以自动化）

Browsersync

非常适合测试前端应用程序。您可以同时在移动/桌面上测试应用程序。它甚至有一个内部服务器在本地运行应用程序。

我们选择添加模型清单.json在项目设置期间添加一些初始数据。

但是在一个复杂的项目中，我们不会这样做……

原因很简单清单.json很快就会变得杂乱无章。在更复杂的项目中，你会有更多的模型（视图模型，数据模型等）。

因此，我们可能会添加一个viewmodel文件夹，在JSONmodel上创建一个扩展模型，并在正确的位置启动它。

因为我们想节省重复代码，所以我们使用OOP的功能，在"基本控制器"中编写最常用的控制器方法。

这也有助于减少复杂或重写部分代码。我们喜欢把所有的"获取"代码放在一个共享的控制器中。这样我们就不必在所有控制器中导入它，只需始终使用"这是什么（）"

所有控制器都扩展到这个基本控制器上，这样它们就可以使用所有已经可用的功能。

要将google maps或google autocomplete绑定到视图，我们必须在'onAfterRendering'期间进行绑定"视图的事件。因为我们发现，大数据工具，如果只绑定一次，然后导航离开或更新模型（这会导致对输入进行重绘），它将失去绑定。

这是因为切换到另一个选项卡时，选项卡视图控件将删除其内容。每次切换回"地图"选项卡时，我们都必须将"谷歌地图"和"谷歌自动完成"绑定到新创建的元素。

我们使用eventbus将大部分代码发送到另一个视图。它真的很容易使用。

本质上它就像一个事件监听器。创建一个通道并将数据发送到该通道。另一个"观点"是收听这个频道。当一些新数据存在时，它将运行您定义为处理程序的方法。

使用eventbus发送数据

在Init方法的详细视图上为eventbus创建订阅服务器

运行的方法

在UI5中使用片段很好，但如果片段变得复杂，我们发现很难轻松维护代码。因为您必须在父控制器中编写所有代码。

幸运的是，我们找到了一个解决此问题的项目。通过在调用片段时使用这种方法，我们可以继续对片段使用已经熟悉的MVC概念。

我们对方法进行了一点扩展，在方法中添加了一小部分，大数据汇总，这样，如果您在框外单击，大数据分析是什么专业，您就可以关闭弹出窗口，并将其用于弹出窗口。

片段有自己的部分控制器

调用片段

我们的两个自定义类（GrapHop和Helper）是单例。我们这样做是因为我们希望在整个应用程序中使用同一个对象。因为我们在应用程序的不同视图中读写同一个对象。

返回实例（在BaseController中）

您可能已经注意到我们在这个项目中没有使用任何viewmodels。我们可以这样做，将视图中控件的所有属性绑定到模型上。

这比使用变量或调用控件来检查是否启用/隐藏了某些内容，或者只是检查视图中使用的一般变量要干净得多。