javascript - 如何使用 Typescript 中的方法从远程 js 文件动态扩展类？

Question

我有带有组件类的 TypeScript 代码。我想使用某种远程 js 文件来远程扩展此类。所以我希望当我的应用程序开始远程获取 js 文件并使用此代码来扩展所需的类时。我知道如何延长类(class)。例如:

Import { UsersBlocksMyOrders } from "../pages/users/blocks/myorders";

declare module "../pages/users/blocks/myorders" {
    interface UsersBlocksMyOrders {
        logit(): void;
    }
}

UsersBlocksMyOrders.prototype.logit = function () { console.log(this); }

在组件文件中，代码是:

import { APP_CONFIG } from "../../../app/app.config";

@Component({
  selector: 'menu-blocks-menupage',
  templateUrl: APP_CONFIG.appDomain + '/mobilesiteapp/template/?path=pages/menu/blocks/menupage'
})

export class MenuBlocksMenuPage{

  constructor(){
    this.logit();
  }
}

我的问题是我使用Webpack来编译代码。 Webpack 创建最终文件，其中函数名称不同。这就是为什么我无法直接访问类。

遇到这种情况怎么办？

Answer 1

1. 创建服务来获取文件并扩展类。您需要在类内部有变量，该变量将在有键的地方存储对象。键是要扩展的类的名称。以及导入类的值。在 init 函数内部，我们使用原型(prototype)方法进行循环扩展。

import { Http } from "@angular/http";
import { MenuBlocksMenuPage } from "../pages/menu/blocks/menupage";


export class ExtendService {
  allModules = {
    ...
    MenuBlocksMenuPage : MenuBlocksMenuPage,
    ...
  };

  constructor(public http: Http){ }

  init()
  {
    //Load json map to extend class
    this.http.get(APP_CONFIG.appDomain + '/modules/mobilesiteapp/view/js/extend.json').toPromise()
      .then((res) => {
        let json = res.json();

        //Loop each class to extend
        Object.keys(json).forEach((cl) => {
          //Add new functions and methods
          Object.keys(json[cl]).forEach((func) => {
            this.allModules[cl].prototype[func] = eval(json[cl][func]);
          });
        });

      }).catch((e) => {
        console.error(e);
      });
  }
}

请求带有评估函数的 json 文件。

{
    "MenuBlocksMenuPage": {
        "logit": "(function (){console.log(this);})"
    }
}