ES2015 + ES2016（装饰器，理解，...）+ Angular 1.x 组件

Question

我正在研究 Web 应用程序架构，Angular 1.x 仍然用于将事物粘合在一起。定义新组件相当简单：

class CustomComponent {
  constructor(dep1, dep2, dep3) {
    this.deps = { dep1, dep2, dep3 };
    /* app code */
  }

  /* link, compile, instance methods, template generators... */

  @readonly static $inject = ['dep1', 'dep2', 'dep3'];
}

我想做的是排除注入问题 - 换句话说，我不想每次都编写 this.deps 和 static $inject 代码，而是让它自动 - generated - 比方说，使用 ES7 中的装饰器之类的东西。该代码将看起来像以下几行：

@injectionFromCtorComponents
class MyClass {
  constructor (dep1, dep2, dep3) {
    /* app logic */
  }
}

现在，静态部分是可行的，尽管很丑陋：

const angularInjectAnnotationFromCtor = (target) => {
    let regexStr = `^function ${target.name}\\((.*)\\)[.\s\S]*}$`;
    let regex = new RegExp(regexStr, 'gm');
    let ctorArgsStr = target.prototype.constructor.toString().replace(regex, '$1');
    let ctorArgs = ctorArgsStr.replace(/ /g, '').split(',');

    target.$inject = ctorArgs;
};

不过，在实例上保存构造函数依赖性要复杂得多。我想到了以下内容，尽管它充其量是脆弱的：

const readonly = (target, key, descriptor) => Object.assign(descriptor, { writable: false });

class AngularComponent {
  constructor () {
    let ctorArgs = [...arguments];
    let argNames = ctorArgs.pop();

    // let's leave comprehensions out of this :)
    this.deps = 
      argNames.reduce((result, arg, idx) => Object.assign(result, ({ [arg]: ctorArgs[idx] })), {});
  }
}

@angularInjectAnnotationFromCtor
class MyClass extends AngularComponent {
    constructor (one, two, three) {
      super(one, two, three, MyClass.$inject);
    }
}

是的，这比我们开始的地方更糟糕...

那么问题来了，有谁能提出一个更合理的解决方案吗？..或者我们应该坐下来，希望在未来几年内随时在 Chrome 中获得代理？

Answer 1

你想法的静态部分基本上就像根本没有$inject一样。没意义。

我建议忘记这个想法或者给装饰器传递参数：

@inject('dep1', 'dep2', 'dep3')
class MyClass {
  constructor (dep1, dep2, dep3) {
    /* app logic */
  }
}

构造函数部分可以使用经典装饰器模式完成：

function inject() {
  var dependencies = [...arguments];

  return function decorator(target) {
    target.$inject = dependencies;  

    return function() {
      this.deps = {};
      dependencies.forEach((dep, index) => {
        this.deps[dep] = arguments[index];
      });

      target.constructor.apply(arguments, this);
      return this;
    }
  }
}

ES2015 + ES2016（装饰器，理解，...）+ Angular 1.x 组件

ES2015 + ES2016 (decorators, comprehensions, ...) + Angular 1.x Components

javascript

angularjs

ecmascript-6

ecmascript-2016