简体   繁体   English

OpenUI5:JS视图与XML视图

[英]OpenUI5: JS views vs. XML views

We're currently evaluating SAP's OpenUI5 in the context of a new project. 我们目前正在一个新项目的背景下评估SAP的OpenUI5。

While most examples and tutorials tend to construct views using XML, out of personal preference I'd choose Javascript for the task. 虽然大多数示例和教程倾向于使用XML构建视图,但出于个人偏好,我会选择Javascript来完成任务。 However I haven't poked around in OpenUI5 long enough to identify any specific strengths for either approach. 但是,我没有在OpenUI5中找到足够长的时间来确定这两种方法的任何特定优势。

Are there any disadvantages in using JS? 使用JS有什么缺点吗? Or advantages even? 还是有优势呢?

Many Thanks! 非常感谢!

Update: 更新:

I agree with SDD64's answer. 我同意SDD64的回答。 After using both approaches in parallel for a while, I can add the following pros and cons to the list: 在并行使用这两种方法一段时间后,我可以在列表中添加以下优缺点:

XML advantages: XML优势:

  • They help sticking to mvc since you're less tempted to introduce controller logic into views 它们有助于坚持使用mvc,因为你不太愿意将控制器逻辑引入视图中
  • potentially allow use of wysiwyg editors 可能允许使用所见即所得的编辑
  • quite implicit, hence easier to learn 非常隐含,因此更容易学习

XML disadvantages: XML缺点:

  • bad readability 可读性差
  • modifying existing views is trickier at times 修改现有视图有时很棘手
  • quite implicit, bad if you care about what is happening behind the scenes 非常含蓄,如果你关心幕后发生的事情会很糟糕

I am also a fan of JS based views. 我也是基于JS的观点的粉丝。 Possible (dis)Advantages are in my eyes: 可能(dis)优点在我眼中:

Advantages for JS JS的优点

  • Object oriented creating of the view. 面向对象的视图创建。 You can create objects, arrange them, call methods on them and use any JavaScript function you want (eg loops) 您可以创建对象,排列它们,调用它们并使用您想要的任何JavaScript函数(例如循环)
  • For my taste, SAPUI5 XML based view seem to be a little too implicit. 根据我的口味,基于SAPUI5 XML的视图似乎有点过于隐含。 In JS, I can cleary read out of the coding what I am doing. 在JS中,我可以清楚地读出编码我正在做的事情。
  • Pages can be dynamic 页面可以是动态的
  • You stay in JavaScript all the time 你一直都在使用JavaScript

Disadvantages for JS JS的缺点

  • XML favours a strict seperation between view and logic. XML倾向于在视图和逻辑之间进行严格的分离。 Your are forced to use external formatters for example. 例如,您被迫使用外部格式化程序。 I think XML views might be cleaner. 我认为XML视图可能更清晰。
  • SAP ships all Fiori apps using XML views. SAP使用XML视图发布所有Fiori应用程序。 So, you are a little forced to have atleast the knowledge in how to read XML based views. 所以,你有点被迫掌握如何阅读基于XML的视图的知识。
  • You might have less lines of code in XML XML中的代码行可能较少

** Update 2015-06-18 ** **更新2015-06-18 **

With the current OpenUI5 1.28 supporting conditions in XML views and the recently previewed 1.30 supporting binding for dynamic loading of XML fragments , I felt the need to update my answer. 利用XML视图中当前的OpenUI5 1.28支持条件以及最近预览的1.30支持动态加载XML片段的绑定 ,我觉得有必要更新我的答案。

With those new features, XML views gained a "healthy" amount of flexibility. 借助这些新功能,XML视图获得了“健康”的灵活性。 Making them, for me, more attractive when compared to JS based view. 对于我来说,与基于JS的视图相比,使它们更具吸引力。

It's all in the eyes of the developer. 这一切都在开发人员的眼中。 Some devs will prefer to write html5 like (xml) views, other will prefer the feeling in control with the js views. 有些开发人员更愿意编写html5之类的(xml)视图,其他人则更喜欢用js视图控制感觉。 Small disadvantage of the xml views is the extra step to convert them to js code. xml视图的一个小缺点是将它们转换为js代码的额外步骤。 They should be a bit (neglitable) slower. 它们应该有点(可忽略)慢。

You can build your pages dynamically with XML-Views: 可以使用XML-Views动态构建页面:

Controller 调节器

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");
  },
});

View : 查看

 <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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM