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

Question

I am in the process of tidying up a rather large hybrid Cordova/Android app.我正在整理一个相当大的混合 Cordova/Android 应用程序。 One of the things I am doing is reducing the size of the initial DOM tree that has to be constructed at startup by hiving off bits that are not immediately required into a "template" folder from which I then load them on demand.我正在做的一件事是减小初始 DOM 树的大小，该树必须在启动时构建，方法是将不立即需要的位分块到“模板”文件夹中，然后我可以根据需要从该文件夹中加载它们。 For the purpose I have defined a Loader class as shown below为此，我定义了一个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()};

I ensure that the Loader script is the very first thing seen in the <head> section of the index.html file that is loaded by Cordova.我确保 Loader 脚本是index.html文件的<head>部分中最先看到的内容，该文件由 Cordova 加载。 This is failing because the WebView in the Cordova app throws up complaints along the lines of这是失败的，因为 Cordova 应用程序中的 WebView 引发了以下投诉

this.pageTemplateLoaded is not defined. this.pageTemplateLoaded 未定义。

I am a relative beginner when it comes to using JavaScript classes in this way so I suspect I am doing something wrong here.在以这种方式使用 JavaScript 类时，我是一个相对初学者，所以我怀疑我在这里做错了什么。

Answer 1

I was going to delete this question but decided to leave it in with an answer for the benefit for anyone doing something along similar lines.我本来打算删除这个问题，但决定留下一个答案，以使任何做类似事情的人受益。

The key here is to appreciate what exactly the Loader class is being used for - merely to serve as a handy repository for a few utility functions.这里的关键是要了解 Loader class 的确切用途 - 仅用作一些实用功能的便捷存储库。 That being the case what we need to do is to define the methods as being static and then reference them via the Loader prototype without ever instantiating it.在这种情况下，我们需要做的是将方法定义为 static，然后通过 Loader 原型引用它们，而无需实例化它。 Here is my modified code which works这是我修改后的代码

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

Points to note注意事项

With this way of doing things you can no longer have and access instance variables .使用这种做事方式，您将无法再拥有和访问instance variables 。 I have gotten around the problem by assigning current and prior to my global _hold object.我通过在全局_hold object 之前分配current和prior解决了这个问题。
For some reason 'this.pageTemplateLoaded' still failed for me.由于某种原因，“this.pageTemplateLoaded”对我来说仍然失败。 However, Loader.pageTempateLoaded worked.但是， Loader.pageTempateLoaded有效。

A very useful article to read up when undertaking something like this is this one on MDN . MDN 上的这篇文章是在进行此类操作时阅读的一篇非常有用的文章。 A sentence in that article that is worth highlighting here那篇文章中值得在这里强调的一句话

The static keyword defines a static method for a class. static 关键字为 class 定义了 static 方法。 Static methods are called without instantiating their class and cannot be called through a class instance. Static 方法在没有实例化其 class 的情况下被调用，并且不能通过 class 实例调用。 Static methods are often used to create utility functions for an application. Static 方法通常用于为应用程序创建实用函数。

It is also worth noting that还值得注意的是

With this way of doing things there is no need to create an instance of the Loader class - it would do nothing useful even if you were to do so.通过这种方式，无需创建 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