控件,sapui5提供了很多控件可以直接拿来用,但是很重要的一点是用前一定确认控件适用的core版本
(没办法src只能用CDN的,本地的版本太低)
** webapp/index.html **
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>new step3</title>
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:Step3_control/index"
data-sap-ui-resourceroots='{
"Step3_control": "./"
}'>
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
** webapp/index.js **
sap.ui.define([
"sap/m/Text"
], function (Text) {
"use strict";
new Text({
text: "Hello World"
}).placeAt("content");
});
上面代码中index.html的data-sap-ui-onInit="module:Step3_control/index"
属性定义了页面的回调js,就是index.js文件,这个js中,使用了sap.m.Text控件,new
了一个Text控件并且使用jQuery替换了DOM中id是‘content’的元素。
AMD
全称是Asynchronous Module Definition,即异步模块加载机制,简单说AMD是JavaScript的一个规范标准,它完整的描述了模块的定义,依赖关系,引用关系及加载机制。
作为一个规范,只需定义其语法API,而不关心其实现,AMD规范简单到只有一个API,就是define
函数:
define([module-name?],[array-of-dependecy?],[module-factory-or-object]);
- module-name: 模块标识,可以省略
- array-of-dependecy: 所依赖的模块,可以省略
- module-factory-or-object: 模块的具体实现或是一个JavaScript对象
可以看出示例中的module-name是省略的。从AMD中的A Asynchronous 可以看出这个define具体的另一个性质:异步性。当define函数执行时,它首先会异步的去调第二个参数中的所依赖的模块,当所有模块完成加载以后,如果第三个参数是一个回调函数则执行,然后告诉系统模块可用,也就通知了自己所依赖的模块自己已经可用。