在多个js文件中拆分控制器

Question

我想知道如何在多个JavaScript文件中拆分控制器。我目前有一个控制器，它有大约5000多行，并且导航它是相当令人沮丧的。有什么建议如何入门？

Answer 1

另一种方法是在控制器之间设置一些层次结构，并使用控制器之间的继承。将几个控制器使用的逻辑移动到一个BaseController.js。

例如，您可以设置从BaseController.js扩展的sap/ui/core/mvc/Controller：

sap.ui.define([ "sap/ui/core/mvc/Controller" ], function(Controller) {
    "use strict";

    return Controller.extend("BaseController", {

        someBaseFunction : function() {
            // Do something
        },

    });

});

而在另一个控制器中，例如App.controller.js从你的BaseController.js延伸：

sap.ui.define(["%PATH_TO_YOUR_BASE_CONTROLLER%/BaseController",

], function(BaseController) {
    "use strict";

    return BaseController.extend("%PATH_TO_YOUR_APP", {

        onInit : function() {
            // Call function from BaseController.js
            this.someFunction();
        }

    });

});

Answer 2

您可以从几种方法开始：

1. 使用“Mixin”模式
2. 将您的逻辑分成几个“类”并将它们分成单独的AMD模块，然后只需“需要”它们并在控制器中使用

Mixin可以实现为AMD模块，它只返回具有所有所需功能的JSON对象。为了将它注入控制器，只需使用jQuery.extend方法来使用mixin增强控制器的对象。

Answer 3

这个问题会引起一些有见解的答案，但一般来说，你可以从以下开始：

• 询问自己是否可以先降低5k + LOC。例如。： 确保你没有重新发明UI5已经支持开箱即用的轮子，例如formatting，解析和验证模型数据。 考虑采取UI5提供的更多声明性方法，例如application descriptor，简单的expression bindings，双向data binding，将视图拆分为小fragments / views，如果合理的话有自己的控制器（separating concerns）等。
• 分析你的代码以在composition（inheritance）上拥抱short intro

我还鼓励你在开始之前写一些回归tests。