Можно ли создать классы, на которые могут ссылаться back-end и front-end? - PullRequest
1 голос
/ 29 апреля 2020

Я работаю над сценарием Google Apps и не использую среду выполнения V8, поэтому мне приходится иметь дело с этим в ES5.

У меня есть класс, который я хочу использовать как на внутреннем, так и на внутреннем внешний интерфейс. Возможно ли это?

В данный момент я не знаю, как это сделать, но я должен создать дублирующийся класс для обоих концов.

Например, у меня будет gs файл и html файл с одинаковым кодом:

-TestClass_backend.gs

var Test = function(){
  this._a;
}

-TestClass_frontEnd. html

<script>
var Test = function(){
  this._a;
}
</script>

Я хочу поставить вместе одни и те же коды, чтобы избежать дублирования. Заранее спасибо.


Добавлено: Я также попробовал это:

index. html во внешнем интерфейсе:

<body>
    <script>
        var Test = <?!= Test ?> 

        //test for the constructor
        console.log("Test="+Test);//Test=function(a) {  this._a = a; }

        var test = new Test("hello");

        //test for the property
        console.log("test.a="+test.a);//test.a=undefined

        //test for the method
        var a = test.getA();//Uncaught TypeError: test.getA is not a function
        console.log("a="+a);
    </script>
</body>

Тест .gs в бэкэнде:

var Test = function(a) {
  this._a = a;
}

Object.defineProperty(Test.prototype, "a", {
  get: function() {
    return this._a;
  },
  set: function(value) {
    this._a = value;
  },
  configurable: true,
  enumerable: true
});

Test.prototype.getA = function(){
  return this._a;
}

так, похоже, конструктор может быть передан во внешний интерфейс, но не в другие ..


Добавлено 2: Я также попробовал это:

Я поместил объявление теста и defineProperty в отдельный файл. html с тегами сценария, затем включил его в интерфейс. В бэкэнде сделали то же самое, за исключением того, что удалили с помощью регулярных выражений, а затем оценили получившийся простой js. Но это тоже не сработало ..

index. html в front-end:

<body>
    <?!= include('Test.html'); ?>
    <?!= include('Test_property.html'); ?>
    <script>
      window.onload = function(){
        google.script.run
          .withSuccessHandler(getTest_ok)
          .withFailureHandler(getTest_ng)
          .getTest();
      }

      function getTest_ok(testJSON){
        //test for constructor
        var test = JSON.parse(testJSON);
        console.log("test.name="+test.name);//test.name=undefined
        console.log("test.constructor.name="+test.constructor.name);//test.constructor.name=Object

        //test for property
        console.log("test.a="+test.a);//test.a=undefined

        //test for method
        var a = test.getA();//Uncaught TypeError: test.getA is not a function
        console.log("a="+a);
      }
      function getTest_ng(){
        console.log("getTest_ng");
      }

    </script>
  </body>

Test.gs в backend:

function include(filename) {
  var ua = HtmlService.getUserAgent();
  var inclueFile = HtmlService.createHtmlOutputFromFile(filename).getContent();
  return inclueFile;
}

var file_str_Test = include("Test.html");
file_str_Test = removeScriptTag(file_str_Test);
eval(file_str_Test); 

var file_str_Test_property = include("Test_property.html");
file_str_Test_property = removeScriptTag(file_str_Test_property);
eval(file_str_Test_property); 

function removeScriptTag(file_str_Test){
  var file_str_Test = file_str_Test.replace(/^<script>/i, "");
  file_str_Test = file_str_Test.replace(/<\/script>/i, "");

  return file_str_Test;
}

function getTest(){
  var test = new Test("from-backend");
  Logger.log("test.a="+test.a);//test.a=from-backend

  return JSON.stringify(test);
}

Test . html

<script>
var Test = function(a) {
  this._a = a;
}
</script>

Test_property. html

<script>
Object.defineProperty(Test.prototype, "a", {
  get: function() {
    return this._a;
  },
  set: function(value) {
    this._a = value;
  },
  configurable: true,
  enumerable: true
});

Test.prototype.getA = function(){
  return this._a;
}
</script>

1 Ответ

1 голос
/ 29 апреля 2020

Вы можете использовать ES6 import и export для выполнения sh этого.

экспорта

импорта

// my-class.js
export class MyClass {
  constructor(a) {
    this.a = a;
  }
}


// my-front-end.js
import MyClass from '/somewhere/my-class.js';
const c = new MyClass('test');


// my-backend.js
import MyClass from '/somewhere/my-class.js';
const c = new MyClass('test');

Если по какой-либо причине вы не можете нас import / export, вы можете сделать это «по-старому». Чтобы сделать это таким образом, вам потребуется сослаться на ваш общий класс (файл js) в обоих front / backend.

// my-class.js
function MyClass(a) {
  this.a = a;
}

MyClass.prototype = {
  sayHello: function() {
    alert(this.a);
  }
};


// backend.js
const c = new MyClass('test');
c.sayHello();

// front-end.js
const c1 = new MyClass('test');
c1.sayHello();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...