Question

这更像是一个javascript问题，但它特别是在angularjs的上下文中。我正在努力为我们最终（5年以上？是的，我知道）迁移到Angular 2+做准备。我想在外观和感觉上创建类似于Angular 2+的新应用程序。我创建了一个名为Component（）的辅助函数，它充当了dectorator @Component（），我想把它放在一个充当angularjs 1.5+ .component（）的类之上。

但是，由于我首先执行了Component（）函数，所以它会抱怨该类尚未定义。但是，如果我只是为控制器使用一个函数，即使它尚未定义，它也很有趣。只是好奇为什么在这种情况下需要首先定义类，但函数不是？

Component（）辅助函数：

function Component(config) {
    angular.module(config.module)
        .component(config.selector, {
            templateUrl: config.templateUrl,
            controller: config.controller
        });
}

这有效：

Component({
    module: 'myApp',
    selector: 'heroList',
    templateUrl: 'Components/Hero/hero.template.html',
    controller: HeroComponent
})
function HeroComponent() {
    console.log("Yay!");
}

这不是因为类定义是第二个。如果它是第一个它可以工作，但这显然会杀死Angular 2 +的外观和感觉

Component({
        module: 'myApp',
        selector: 'heroList',
        templateUrl: 'Components/Hero/hero.template.html',
        controller: HeroComponent
    })
    class HeroComponent {
        constructor() {
            console.log("Inside hero component!");
        }

        $onInit() {

        }
    }

Answer 1

在评论中提及Mark_M时，class实现不会像函数那样提升。

在JavaScript中，任何函数基本上都可以在同一范围内使用，即使它们是在之后定义的，因为它们基本上是先处理的＃34; （过于简化的插图）：

＆＃13;

a();

function a() {
  console.log('hi');
}

＆＃13;

课程不会以同样的方式悬挂，或者更确切地说，它们的实施并非如此：

＆＃13;

try {
  const a = new A();

  class A {
    constructor() {
      console.log('hi');
    }
  }
} catch (e) {
  console.log('it threw an error');
}

＆＃13;

我能够真实地看到解决它的唯一方法是继续使用功能。你可以在函数内部创建一个自我初始化的类：

＆＃13;

const a = new A();

function A() {
  class _A {
    constructor() {
      console.log('hi');
    }
  }
  
  return new _A;
}

＆＃13;

那就是说，出于各种原因，这显然是非常难看的。

我强烈建议您不要尝试将Angular 2的代码进行验证，特别是如果您认为自己已经有5年了。很有可能在5年内，Angular 3（如果不是4）将成为一件事。

哎呀，随着JavaScript本身最近发展的速度，即使基本语法也会有问题。谁知道5年后JavaScript会是什么样子。

作为一个从事未来发展的项目的人＃34;对于Angular 2，我可以告诉你，从长远来看，它只会产生很多麻烦，因为你最终会得到一个不太合理的语法，这使得新人加入项目变得更加困难。

Answer 2

您可以通过将控制器传递给调用来完全模拟TypeScript装饰器（就像使用装饰器时会发生的那样）：

function Component(config) {
    return function(controller) {
        angular.module(config.module)
        .component(config.selector, {
            templateUrl: config.templateUrl,
            controller
        });
    };
}

使用功能

Component({
    module: 'myApp',
    selector: 'heroList',
    templateUrl: 'Components/Hero/hero.template.html',
})
(function HeroComponent() {
    console.log("Yay!");
});

以及班级

Component({
    module: 'myApp',
    selector: 'heroList',
    templateUrl: 'Components/Hero/hero.template.html',
})(class HeroComponent {
    constructor() {
        console.log("Inside hero component!");
    }
    $onInit() {

    }
});

在使用之前预定义的Javascript函数与类（具体使用angularjs）

2 个答案: