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

Размещен в sapui5 04.06.2020 10:54
Теги: , ,

Мы уже разбирали как добавить к себе в приложение стороннюю 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()));    }));
 
      }
  });
});

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

Оставить комментарий:

  1. turkce izle

    опубликован 24.07.2020 в 09:26

    Man kann jeden Tag etwas Neues hier lernen. Ich bin ein regelmäßiger für die meisten von denen Blogs, aber immer noch nicht um ein Paar von ihnen wissen.

  2. Legra Christophorus Dumas

    опубликован 31.07.2020 в 07:21

    Val la pena llegir-lo el vostre article. Legra Christophorus Dumas

  3. Ilysa Carolus Spragens

    опубликован 31.07.2020 в 14:22

    excelente artigo. Ilysa Carolus Spragens

  4. Matti Correy Kosaka

    опубликован 31.07.2020 в 18:04

    You do have a fabulous blog thanks. Matti Correy Kosaka

  5. Fredelia Chance Margalit

    опубликован 10.08.2020 в 01:52

    Völlig komponiertes Themenmaterial, danke für die selektive Information. Fredelia Chance Margalit

  6. Ninon Nial Sloatman

    опубликован 10.08.2020 в 13:58

    Ich habe hier einige ausgezeichnete Sachen gelesen. Auf jeden Fall Preis Lesezeichen für einen erneuten Besuch. Ich frage mich, wie viele Versuche Sie unternehmen, um eine so hervorragende informative Website zu erstellen. Ninon Nial Sloatman

  7. Mignon Fowler Judie

    опубликован 23.08.2020 в 15:12

    Bonjour, toujours super de voir d’autres personnes à travers le monde du trou dans ma recherche, j’apprécie vraiment le temps qu’il aurait fallu pour créer cet article génial. À votre santé Mignon Fowler Judie

  8. erotik izle

    опубликован 25.08.2020 в 04:15

    hola me encanta la cabecera de tu blog, es una creación personal? Penny Reggis Laurentia

  9. erotik

    опубликован 26.08.2020 в 02:50

    Puedo encontrar buena información de este artículo. Grazia Roderick Buonomo

  10. No purchase necessary

    опубликован 30.08.2020 в 13:04

    Ich habe es genossen, Ihren Artikel zu lesen.
    Ayn Sanson Dwan

  11. Ashil Chic Chaffee

    опубликован 30.08.2020 в 14:39

    Hola y gracias por este blog es una verdadera inspiración .. Ashil Chic Chaffee

  12. Serious only

    опубликован 30.08.2020 в 19:02

    Hallo, always great to see other people through the hole world in my searching, I really appreciate the time it should have taken to put together this awesome article. Cheers
    Klarrisa Oliviero Maryanna

  13. iphone

    опубликован 31.08.2020 в 01:57

    I really believe you will do well in the future I appreciate everything you have added to my knowledge base. Jemmie Benjy Lavelle