OpenUI5：JS 视图与 XML 视图

Question

我们目前正在新项目的上下文中评估 SAP 的 OpenUI5。

虽然大多数示例和教程倾向于使用 XML 构建视图，但出于个人喜好，我会选择 Javascript 来完成任务。但是，我在 OpenUI5 中研究的时间还不够长，无法确定这两种方法的具体优势。

使用JS有什么缺点吗？甚至优势？

非常感谢！

更新：

同意SDD64的回答。在同时使用这两种方法一段时间后，我可以将以下优点和缺点添加到列表中：

XML优点：

它们有助于坚持使用 mvc，因为您不太想将控制器逻辑引入视图
可能允许使用所见即所得的编辑器
非常含蓄，因此更容易学习

XML缺点：

可读性差
修改现有视图有时比较棘手
相当含蓄，如果你关心幕后发生的事情就不好了

Answer 1

这一切都在开发商的眼里。一些开发人员更喜欢编写 html5 类似 (xml) 的视图，而其他开发人员则更喜欢使用 js 视图进行控制的感觉。 xml 视图的小缺点是将它们转换为 js 代码的额外步骤。它们应该慢一点（可以忽略不计）。

Answer 2

我也是基于 JS 的视图的粉丝。可能的（dis）优势在我眼里：

JS 的优点

面向对象的视图创建。您可以创建对象、排列它们、调用它们的方法并使用您想要的任何 JavaScript 函数（例如循环）
就我的口味而言，基于 SAPUI5 XML 的视图似乎有点太含蓄了。在 JS 中，我可以清楚地读出我在做什么。
页面可以是动态的
你一直在JavaScript

JS 的缺点

XML 赞成视图和逻辑之间的严格分离。例如，您被迫使用外部格式化程序。我认为 XML 视图可能更干净。
SAP 使用 XML 视图发布所有 Fiori 应用程序。因此，您有点被迫至少了解如何阅读基于 XML 的视图。
您的代码行可能更少 XML

** 2015-06-18 更新 **

鉴于目前 OpenUI5 1.28 的支持情况 XML 以及最近预览的 1.30 支持 binding for dynamic loading of XML fragments，我觉得有必要更新我的答案。

有了这些新功能，XML 视图获得了 "healthy" 的灵活性。与基于 JS 的视图相比，它们对我来说更具吸引力。

Answer 3

您可以使用XML-Views动态构建页面：

控制器

sap.ui.controller("my.own.controller", {
  onInit: function () {
    var jsonData = {
        simpsons: [
            {name: "Marge", gender: "female"},
            {name: "Homer", gender: "male"},
            {name: "Bart", gender: "male"},
            {name: "Lisa", gender: "female"},
            {name: "Maggi", gender: "female"},
            {name: "Snowball1", gender: "female"},
            {name: "Ruprecht", gender: "male"}
        ]
    };
    var oModel = new JSONModel(suggJSON);
    this.setModel(oModel, "myJsonModel");
  },
});

查看:

 <core:View 
    xmlns:core="sap.ui.core" 
    xmlns:m="sap.m"
    xmlns="sap.ui.commons" 
    xmlns:html="http://www.w3.org/1999/xhtml"
    > 
      Content of Model:
      <m:VBox items="{myJsonModel>/simpsons}">
        <Button text="{myJsonModel>name} visible="{= ${myJsonModel>gender} === 'male'}"/>
        <Text text="{myJsonModel>name} visible="{= ${myJsonModel>gender} === 'female'}"/>
      </m:VBox>
  </core:View>

OpenUI5：JS 视图与 XML 视图

OpenUI5: JS views vs. XML views

javascript

xml

model-view-controller

sapui5