SapUI5: Добавляем сторонний скрипт с удаленного источника

Опубликовано автором

Мы уже разбирали как добавить к себе в приложение стороннюю JS библиотеку moment.js. Но там мы грузили JS файл локально. Что делать, если надо добавить библиотеку не со своего, а стороннего сервера?

Если версия SapUI5 меньше 1.58.

Добавим CSS

Подгрузим CSS со стороннего сервера:

jQuery.sap.includeStyleSheet("//nickcode.ru/css/style.css");

где nickcode.ru/css/style.css — путь до CSS файла на стороннем сервере.

Загрузим JS

Можно воспользоваться аналогичным методом для JS файлов:

jQuery.sap.includeScript({
    url: "//nickcode.ru/js/script.js",
    id: "scriptId"
}).then(function() {
    console.log("Script has been loaded!")
})

где nickcode.ru/js/script.js — путь до JS файла на стороннем сервере.

Может возникнуть задача передать какие-либо параметры JS скрипту.

Например, вызов скрипта должен выглядеть следующим образом:

<script data-host="http://nickcode.ru" data-id="1234567890" data-style="default" src="//nickcode.ru/js/script.js" id="scriptId"></script>

Помимо id и пути до JS файла надо предать еще параметры: data-host, data-id, data-style. К сожалению, метод includeScript не поддерживает дополнительных параметров.

Для решения этой задачи погрузимся в исходный код метода includeScript:

/openui5/blob/rel-1.38/src/sap.ui.core/src/jquery.sap.global.js
var oScript = window.document.createElement("script");
		oScript.src = sUrl;
		oScript.type = "text/javascript";
		if (sId) {
			oScript.id = sId;
		}

Чуть преобразуем код для нашего случая, в итоге вызов удаленного JS скрипта с параметрами будет выглядеть следующим образом:

var head = window.document.getElementsByTagName("head")[0];
var oScript = window.document.createElement("script");
		oScript.src = "//nickcode.ru/js/script.js";
		oScript.type = "text/javascript";
		oScript.id = "scriptId";
 
oScript.setAttribute("data-host", "http://nickcode.ru");
oScript.setAttribute("data-id", "1234567890");
oScript.setAttribute("data-style", "default");
 
//Добавим в head
   if (head){
      head.appendChild(oScript);
   }

Если версия SapUI5 больше 1.58.

Если мы зайдем в документацию по jQuery.sap.includeScript —
https://openui5.hana.ondemand.com/api/jQuery.sap#methods/jQuery.sap.includeScript, то узнаем, что метод уже устарел. Рекомендуют использовать sap/ui/dom/includeScript.

Посмотрим в исходный код нового метода и увидим, что поддержка параметров уже реализована в sap/ui/dom/includeScript:

/openui5/blob/rel-1.78/src/sap.ui.core/src/sap/ui/dom/includeScript.js
 * @param {object} [vUrl.attributes] map of attributes that should be used for the script tag

Воспользуемся этим и переделаем подгрузку CSS и JS следующим образом:

/openui5/blob/rel-1.78/src/sap.ui.core/src/sap/ui/dom/includeScript.js
sap.ui.define([
  "sap/ui/core/Component",
  "sap/ui/dom/includeScript",
  "sap/ui/dom/includeStylesheet"
], function(Component, includeScript, includeStylesheet) {
 
 
  return Component.extend("nickcode.Component", {
 
    metadata: {
      "manifest": "json"
    },
 
    init: function() {
      //Загрузим CSS
      includeStylesheet("//nickcode.ru/css/style.css");
 
      //Подготовим объект для JS
      var oScript = {};
      oScript.url = "//nickcode.ru/js/script.js";
      oScript.attributes = {};
      oScript.attributes["data-host"] = "http://nickcode.ru";
      oScript.attributes["data-id"] = "1234567890";
      oScript.attributes["data-style"] = "default";
 
      //Загрузим JS
      includeScript(oScript, "scriptId").then(function(){
            console.log("Script has been loaded!");
      });
}
});
});

Ну как Вам, не правда ли так более красиво выглядит загрузка JS библиотек с внешних серверов? 🙂

А теперь самое интересное! В конце заметки посмотрим на еще один интересный метод, при помощи которого можно подгрузить стороннюю JS библиотеку в свой SapUI5 проект.

Специально для подгрузки JS библиотек существует другая библиотека под названием RequireJS.

И о чудо, она по умолчанию используется в SapUI5.

Давайте при помощи RequireJS загрузим библиотеку для работы с датами date-fns.org с cdnjs.
Для этого я накидал небольшой примерчик, который вы можете импортировать в свой WebIDE отсюда https://github.com/kannade/sapui5_external_js.

Посмотрим как это можно сделать:

/sapui5_external_js/blob/master/webapp/controller/View1.controller.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/* global requirejs:true */
 
sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/thirdparty/require"], function (Controller) {
  "use strict";
 
return Controller.extend("nickcode_ru_external_js.controller.View1", {
  onInit: function () {
    var oLabel = this.getView().byId("labelId");
 
    var oPromise = new Promise(function (resolve, reject) {
      requirejs.config({        paths: {
        "date_fns": ["//cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"]
         }
      });
 
      resolve();
    });
 
    oPromise.then(require(["date_fns"], function (oDateFns) {
      oLabel.setText(oDateFns.parse("03.06.2020", "dd.MM.yyyy", new Date()));    }));
 
      }
  });
});
  • 5 — Подгрузили саму RequireJS!
  • 14 — Затем подгрузим библиотеку date-fns с серверов cloudflare! (16)
  • 24 — А затем в Label преобразуем при помощи date-fns строку с датой в объект типа Date, для демонстрации возможностей date-fns!

На этом, пожалуй, все. Уверен, что существуют еще и другие методы, при помощи которых можно подгрузить JS библиотеку в свой проект. Жду их от вас в комментариях :).