在混合 Cordova/Android 應用程序的 class 中調用另一個 JavaScript 方法

Question

我正在整理一個相當大的混合 Cordova/Android 應用程序。 我正在做的一件事是減小初始 DOM 樹的大小，該樹必須在啟動時構建，方法是將不立即需要的位分塊到“模板”文件夾中，然后我可以根據需要從該文件夾中加載它們。 為此，我定義了一個Loader class ，如下所示

class Loader
{
 constructor()
 {
  this.prior = null;
  this.current = null;
 }

 loadPageTemplate(page)
 {
  this.prior = this.current;
  this.current = page;   
  var xhr = new XMLHttpRequest();
  xhr.onload = function(){this.pageTemplateLoaded(xhr.responseText);};
  xhr.onerror = function(){alert(`${this.current} failed`);};
  xhr.open('GET',`tpl/${page}.es6`);
  xhr.send(null);
 }

 pageTemplateLoaded(content)
 {
  this.blankPage();
  if (this.prior) delete(this.prior);
  eval(content);
 }

 displayPage(newPage){document.getElementById('page').appendChild(newPage);}

 blankPage()
 {
  let page = document.getElementById('page');
  while (page.firstChild) page.removeChild(page.firstChild);    
 }
}

var _hold = {loader:new Loader()};

我確保 Loader 腳本是index.html文件的<head>部分中最先看到的內容，該文件由 Cordova 加載。 這是失敗的，因為 Cordova 應用程序中的 WebView 引發了以下投訴

this.pageTemplateLoaded 未定義。

在以這種方式使用 JavaScript 類時，我是一個相對初學者，所以我懷疑我在這里做錯了什么。

Answer 1

我本來打算刪除這個問題，但決定留下一個答案，以使任何做類似事情的人受益。

這里的關鍵是要了解 Loader class 的確切用途 - 僅用作一些實用功能的便捷存儲庫。 在這種情況下，我們需要做的是將方法定義為 static，然后通過 Loader 原型引用它們，而無需實例化它。 這是我修改后的代碼

class Loader
{

 static loadPageTemplate(page)
 {
  _hold.prior = _hold.current;   
  _hold.current = page;   
  var xhr = new XMLHttpRequest();
  xhr.onload = function(){Loader.pageTemplateLoaded(xhr.responseText);};
  xhr.onerror = function(){alert(`${_hold.current} failed`);};
  xhr.open('GET',`tpl/${page}.es6`);
  xhr.send(null);
 }

 static pageTemplateLoaded(content)
 {
  Loader.blankPage();
  eval(content);
 }

 static displayPage(newPage){document.getElementById('page').appendChild(newPage);}

 static blankPage()
 {
  let page = document.getElementById('page');
  while (page.firstChild) page.removeChild(page.firstChild); 
  if (_hold.prior) delete(_hold.prior);
 }
}

var _hold = {current:null};

注意事項

使用這種做事方式，您將無法再擁有和訪問instance variables 。 我通過在全局_hold object 之前分配current和prior解決了這個問題。
由於某種原因，“this.pageTemplateLoaded”對我來說仍然失敗。 但是， Loader.pageTempateLoaded有效。

MDN 上的這篇文章是在進行此類操作時閱讀的一篇非常有用的文章。 那篇文章中值得在這里強調的一句話

static 關鍵字為 class 定義了 static 方法。 Static 方法在沒有實例化其 class 的情況下被調用，並且不能通過 class 實例調用。 Static 方法通常用於為應用程序創建實用函數。

還值得注意的是

通過這種方式，無需創建 Loader class 的實例 - 即使您這樣做也無濟於事。

在混合 Cordova/Android 應用程序的 class 中調用另一個 JavaScript 方法

問題描述

1 個解決方案

解決方案1
0 已采納 2019-11-14 09:38:08

在混合 Cordova/Android 應用程序的 class 中調用另一個 JavaScript 方法

問題描述

1 個解決方案

解決方案1 0 已采納 2019-11-14 09:38:08

解決方案1
0 已采納 2019-11-14 09:38:08