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. Keto die

    опубликован 24.06.2021 в 19:17

    Keto die

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

  2. how to do the keto diet

    опубликован 25.06.2021 в 00:29

    how to do the keto diet

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

  3. Keto diet

    опубликован 25.06.2021 в 10:19

    Keto diet

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

  4. A Payday Loan

    опубликован 28.06.2021 в 18:59

    [url=http://paydayloanspd.com/]payday loan help[/url]

  5. keto diet snacks

    опубликован 07.07.2021 в 02:18

    is keto diet safe for diabetics

  6. escort bayan

    опубликован 13.07.2021 в 20:41

    you seo backlink

    httpkonya-escort42962.dsiblogger.com316595455-basit-teknikleri-i-in-partner-konya

  7. escort bayan

    опубликован 13.07.2021 в 23:45

    you seo backlink

    httpskonyaescort46790.blogunteer.com4243176partner-konya-genel-bakış

  8. escort bayan

    опубликован 14.07.2021 в 01:05

    you seo backlink

    httpsicelisting.comstory9619090bayan-no-further-mystery

  9. Pdf indir

    опубликован 21.10.2021 в 03:23

    Türkiye’nin en büyük pdf arşiv sitesi sayesinde en güncel kitapların en güncel pdf dosyalarına ücretsiz bir şekilde erişip indirebilirsiniz. yüzbinlerce ktiabın pdf dosyalarına sitemiz üzerinden ücretsiz şekilde indirebilirsiniz.

  10. Sıra Bulucu

    опубликован 21.10.2021 в 09:32

    Sıra bulucu aracımız ile web sitenize daha fazla trafik çekmenin birçok yolu vardır ve bir SEO aracı kullanmak bunlardan biridir. Sayfanızı veya web sitenizi optimize etmek ve genel anahtar kelime sıralamalarını iyileştirmek istiyorsanız, Google için güvenilir bir SEO aracı olan sıra bulucu aracını kullanmalısınız. Arama yapanların çoğu, dünyanın en büyük arama motoru olan Google’da yapıldığından, çabanızı bu platforma odaklamak en iyisidir. Google için sıra bulucu aracını kullanarak, anahtar kelime araştırmasını daha kolay ve verimli bir şekilde gerçekleştirebileceksiniz. Sayfanızın meta etiketlerine dahil etmek ve daha iyi SEO pazarlaması için web sitenizin sıralamasını iyileştirmek için alakalı ve çok aranan anahtar kelimeler bulacaksınız.

  11. ilahi sözleri

    опубликован 21.10.2021 в 19:54

    Binlerce ilahiler sözleri bulacağınız Türkiye nin en kapsamlı ilahi sözleri sitesi ve bir çok sanatçının okuyabileceğiniz dev arşiv.
    En hayırlı ilahiler nelerdir? En güzel ilahi sözleri nelerdir? İlahi sözleri nedir? Kandil için ilahi sözleri nelerdir?
    İlahi Sözleri. Abdurrahman Önül, Hasan Dursun, Mehmet Emin Ay, Mustafa Demirci, Sedat Uçan ve daha nice değerli sanatçının en sevilen ilahileri sitemizde.

  12. buy anabolic online

    опубликован 22.10.2021 в 11:01

    Thanks for the good article, I hope you continue to work as well.

  13. Geçici Mail

    опубликован 22.10.2021 в 21:30

    Tek kullanımlık e-posta — belirli bir süre geçtikten sonra kendi kendini imha eden geçici bir adreste e-posta almayı sağlayan bir hizmettir. Geçici mail adresinizi hemen kullanın, gelen mailleri okuyun. Üyelik, telefon onayı gerektirmeden ücretsiz mail aç. Geçici mail tek kullanımlık güvenli, ücretsiz ve geçici eposta servisidir. Hızlı Temp Mail olarak 10 dk mail kullanılır.
    Kişisel e-postalarınızı spam ve virüslerden uzak ve güvenli tutmak için ücretsiz tek kullanımlık geçici e-posta adresi. temp-mail.io ile anonim ve güvenli.
    2 kolay adımda ücretsiz ve hızlı geçici e-postalar. Çalışan atılabilir e-posta adresleri. Serbest geçici bir e-posta kullanarak gizliliğinizi koruyun.