控制器和生命周期方法的 UI5 扩展

Question

我正在尝试创建一个具有通用方法和通用

onInit

逻辑的基本控制器。

使用

extend

方法将基础控制器的方法添加到子控制器，但生命周期方法被覆盖完全。

• 我尝试使用

  本文档页面

  上显示的override.onInit方法，但它没有用。
• 我也试过

  sap.ui.component

  像这样但我根本无法让它工作。
  我不确定它是否适用于 AMD 语法。

据我所知，扩展功能应该替换已被重写的通用方法，但它应该根据各自的顺序从基础控制器和扩展控制器执行生命周期方法。

所以我的问题如下：

1. 这种行为有可能实现吗？如果是这样，我做错了什么？
2. 有没有更好的实现方式？

示例代码：

家长控制器

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

  return Controller.extend("my.namespace.controller.App", {
    onInit: function () {
      console.log("reusable init");
    },

    // ...
  });
});

儿童控制器

sap.ui.define([
  "my/namespace/controller/App.controller"
], function (Controller) {
  "use strict";

  return Controller.extend("my.namespace.child.controller.App", {
    onInit: function () {
      console.log("extend init");
    },

    // ...
  });
});

此示例仅在我运行应用程序时记录“extend init”。我希望它按此顺序同时记录“可重用初始化”和“扩展初始化”。

我省略了一些代码，但主要思想在这两个控制器上得到了体现。唯一相关的元数据是基本控制器是抽象的。

Answer 1

在许多情况下，当从头开始开发应用程序时，BaseController 方法就足够了，正如 Benedikt 解释的那样，或者您可以尝试使用许多小模块进行组合，具体取决于您的项目。

主题控制器扩展鲜为人知，但值得了解它的内容以及扩展如何帮助我们进行应用程序开发。

文档确实暗示扩展概念通常针对想要扩展 existing 具有附加功能的应用程序的开发人员。但是扩展也可以用来在你自己的应用程序开发中重用一些逻辑。

[控制器扩展] 可以用作 [...] 作为添加到原始应用程序的 可重用部分。 （来源）

目前有两种做法：

1. 名为“组件配置”的旧概念
   ^（扩展在

   manifest.json

   或以前在

   Component.js

   中声明）
   • 旧的 UI5 版本支持。
   • 生命周期方法被称为除原始方法外（见下表）。
   • 具有相同名称的非生命周期方法被扩展完全覆盖。
   • 简单且声明式，但它缺少定义清晰接口的可能性，可以按哪个顺序扩展哪些方法。

   看，这个plunk例如。

2. 称为“控制器扩展”的新概念
   ^{（使用模块}

   "sap/ui/core/mvc/ControllerExtension"

   和控制器methods中的metadata部分）
   • 自 1.56 以来公开记录但到目前为止没有样本.
   • 生命周期方法被称为除原始方法外（与旧方法相同）。
   • 提供定义清晰接口的可能性：
     • 能见度 (

       public: true | false

       )
     • 可覆盖性 (

       final: true | false

       )
     • 执行策略(

       overrideExecution: "After" | "Before" | "Instead"

       )
     • 允许通过静态

       ControllerExtension.override

       扩展基本控制器本身的扩展方法（

       .overrides

       首选 自 1.112）。
   • 可用于添加可重用的JS部分（相当于片段概念）。

   参见this plunk例如。

生命周期执行顺序

无论哪种情况，UI5默认按照以下顺序执行生命周期方法：

执行顺序	原控制器代码	分机号
1.	onInit
2.		onInit
3.		onBeforeRendering
4.	onBeforeRendering
5.	onAfterRendering
6.		onAfterRendering
7.		onExit
8.	onExit

Answer 2

我不知道 UI5 中有一个覆盖机制，它看起来设计过度...... 我的猜测是您使用的是没有适当支持的旧版本。

无论如何，js-inheritance 开箱即用。你需要打电话给“超级”。

sap.ui.define([
        "example/BaseController"
    ], function (BaseController) {
        "use strict";
    
        return BaseController.extend("example.BaseController2", {
            onInit: function () {
                // this is the "super" call
                // same happens if you call super() on es6 classes
                BaseController.prototype.onInit.apply(this, arguments);
         }
    });
});

有关更多信息，请查看此处：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain