在Cordova/Android混合应用程序的类中调用另一个JavaScript方法

我正在整理一个相当大的Cordova/Android混合应用程序。我正在做的一件事是减少启动时必须构建的初始DOM树的大小，方法是将不立即需要的位划分到“模板”文件夹中，然后根据需要从中加载它们。为此，我定义了一个

加载程序
类，如下所示

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()};

我确保加载程序脚本是在Cordova加载的
index.html
文件的
部分看到的第一件事。这是失败的，因为Cordova应用程序中的WebView引发了类似以下内容的投诉：

未定义this.pageTemplateLoaded

我是一个以这种方式使用JavaScript类的新手，所以我怀疑我在这里做错了什么
 我本来打算删除这个问题，但为了让所有做类似事情的人受益，我决定留下一个答案

这里的关键是理解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};

注意事项


使用这种方式，您无法再拥有和访问
实例变量
。通过将
current
和
prior
分配给我的全局
\u hold
对象，我解决了这个问题
出于某种原因，“this.pageTemplateLoaded”对我来说仍然失败。但是，
Loader.pageTempateLoaded
工作正常

在做类似的事情时，一篇非常有用的文章是。那篇文章中值得在此强调的一句话

static关键字定义类的静态方法。静态方法在没有实例化它们的类的情况下被调用，并且不能通过类实例来调用。静态方法通常用于为应用程序创建实用程序函数

同样值得注意的是

使用这种方法，不需要创建Loader类的实例——即使您这样做，它也不会有任何用处