Apps Script webapp загружает Javascript (jQuery) поэтапно - PullRequest
Новая
       36

Apps Script webapp загружает Javascript (jQuery) поэтапно

0 голосов
/ 26 декабря 2018

Я создаю веб-приложение , используя HTML-сервис Google Apps Script.Я пытаюсь оптимизировать загрузку приложения, чтобы пользователь получал более быстрый опыт.

Один из способов, с которыми я экспериментировал, это загрузить только необходимые html / css / javascript , которые будут отображать страницу входа, и пока пользователь вводит свои учетные данные, приложение загружаетбольшая часть приложения в фоновом режиме.К тому времени, когда пользователь нажимает на кнопку «Войти», все html / css / javascript (я использую jQuery ) уже загружены в браузер.

Это, кажется,работать до сих пор, и действительно значительно повышает скорость загрузки.Однако любая функция, которая была загружена в пакете 1, более недоступна, если вызывается из javascript, загруженного в пакете 2. Другими словами, повторное использование функции невозможно, если она не загружена в том же пакете, что и вызывающая ее функция.
Редактировать: функция генерирует неопределенную ошибку, которая также предполагает, что она не имеет доступа к ранее загруженному пакету javascript.Редактировать: я назначил идентификатор 'loadJs' для начальной партии js, а затем попытался вызвать alert($('#loadJs').html()) из второй партии js.Он работает нормально, что означает, что скрипт все еще есть в браузере, но по какой-то причине вызов определенных функций из него больше невозможен ...

Почему это происходит, и как это можно обойти??


Редактировать: ответ на пару комментариев к этой теме -

Вот как я загружаю jQuery : 

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous">
</script>

Что касается TheMaster, предлагающего указать, какая функция недоступна - это, похоже, не имеет значения;любая функция, которая была загружена в пакете 1, не будет доступна, если ее вызывать из функции, загруженной в пакете 2. Вот простой пример - ниже приведена функция в load.js (начальная загрузка, пакет 1): 

function testFunction() {
   alert('Hello');
}

При вызове любой функцией из того же пакета работает как положено.Теперь эта функция находится в notes.js (пакет 2): 

$('.hoverBtn').on('click', function () {
   try {
      testFunction();
   } catch (e) {
     alert(e.message);
   }
});

Когда я нажимаю кнопку, появляется предупреждение: «testFunction is notfined», что означает, что 2-й пакет js работает (запущен onClick), но больше нет доступа к функции в пакете 1 (testFunction).





* В случае, если это окажется полезным для понимания контекставопрос, вот шаг за шагом, как я загружаю html / css / javascript в 2 этапа.Позже я могу попытаться объединить 2-ю пакетную загрузку в один script.run, но я не думаю, что это актуально для вопроса на данный момент:

Начальная загрузка приложения с doGet() в файле .gs:

function doGet() {
  return HtmlService.createTemplateFromFile('load')
  .evaluate()
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
  .setTitle('title')
  .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

Файл load.html содержит строку <?!= include('load_css'); ?> в начале и <?!= include('load_js'); ?> в конце, чтобы включить 1-й пакет css и js, и загружается с помощью функции include() вФайл .gs: 

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
  .getContent();
}

Javascript вложен в $(function(){}), поэтому он запускается только при полной загрузке load.html.

load.html содержит элемент div, которыйбудет введен 2-й партией html: <div id='app_content' style='display:none'></div>.Файл notes.html (2-й пакет html, где app_content) содержит div s для 2-х пакетов css и js: 

<div id='notes_css'></div>
<div id='notes_js'></div>

Последнее, что запускает load.js, это: 

google.script.run.withSuccessHandler(getNotes).include('notes');

getNotes() загружает новый html и затем вызывает другой script.run для получения нового css: 

function getNotes(html) {
   $('#app_content').html(html);
   google.script.run.withSuccessHandler(getNotesCss).include('notes_css');
}

getNotesCss() загружает новый css и затем вызывает другой script.runчтобы получить новый js: 

function getNotesCss(html) {
   $notes_css = html;
   google.script.run.withSuccessHandler(getNotesJs).include('notes_js');
}

getNotesJs() загружает новый js и устанавливает var $notes_js как true (это значит, что css не вводится в div до тех пор, пока пользователь не нажметВойдите в систему, потому что новый css конфликтует со старым): 

function getNotesJs(html) {
   $('#notes_js').html(html);
   $notes_js = true;
}

Когда пользователь нажимает кнопку «Войти», начальная целевая страница (#ar_A) скрывается, и vars $notes_js && $notes_css равны true (то есть данные закончили загрузку), затем он устанавливает новый CSS и показывает #app_content.Если пользователь работал быстро и данные еще не полностью загружены, он ждет полсекунды и пытается снова, пока не выполнится: 

function login() {
   $('#ar_A').hide();
   if ($notes_js && $notes_css) {
      $('#notes_css').html($notes_css);
      $(".button-collapse").sideNav();
      $('select').material_select();
      return $('#app_content').show();
   } else setTimeout(function(){
      login();
   }, 500);
}
...