2017-04-02 46 views
7

我不知道是否有任何这样做的好处:角2个模板方法VS干将

<div>{{getSomething()}}</div> 

    export class MyComp { 
    getSomething() { return ...} 
    } 

在此:

<div>{{getSomething}}</div> 

export class MyComp { 
    get getSomething() { return ...} 
} 

使用方法VS干将显示计算的数据。

+0

我认为这仅仅是同一事物的一个语法糖。你有没有看到使用其中之一的好处? – galvan

+1

不,这是我的问题,我想了解是否有其他问题。 – ng2user

回答

11

我深入了解这一点,并与打字游戏场一起玩。 我用getter声明了两个类,用你的问题中描述的get方法声明了第二个类。

让我们来看看它的样子:

在第一个例子中,我们宣布了通过以下方式获取属性值的方法:

class Greeter { 
    greeting: string; 
    constructor(message: string) { 
     this.greeting = message; 
    } 
    getGreeting() { 
     return this.greeting; 
    } 
} 

哪种翻译成JavaScript它看起来像后:

var Greeter = (function() { 
    function Greeter(message) { 
     this.greeting = message; 
    } 
    Greeter.prototype.getGreeting = function() { 
     return this.greeting; 
    }; 
    return Greeter; 
}()); 

和关于我们宣布以下列方式吸气第二个例子:

class GetterGreeter { 
    _greeting: string; 
    constructor(message: string) { 
     this._greeting = message; 
    } 
    get greeting() { 
     return this._greeting; 
    } 
} 

哪种翻译后的样子:

var GetterGreeter = (function() { 
    function GetterGreeter(message) { 
     this._greeting = message; 
    } 
    Object.defineProperty(GetterGreeter.prototype, "greeting", { 
     get: function() { 
      return this._greeting; 
     }, 
     enumerable: true, 
     configurable: true 
    }); 
    return GetterGreeter; 
}()); 

(您可以通过声明并翻译成JavaScript here打)你可以用get方法看到(你的第一个例子)该方法在原型上声明,在第二个示例中使用getter模式typescript使用defineProperty api。

在这两种情况下,我们都调用一个方法,并且角度也会在其更改检测期间调用一个方法来识别更改并重新呈现。

正如我所看到的,这只是一种语法糖,对于相同的方法,我没有看到任何性能方面的好处。

2

区别在于第一种情况下您在表达式中使用函数,但在第二种情况下,它不是函数。所以你不能使用

<div>{{getSomething()}}</div> 

export class MyComp { 
    get getSomething() { return ...} 
} 

使用第二种方法的好处是使用类中的属性封装和需要访问它的类之外。

吸气剂和吸附剂是ES5规范的一部分。你可以阅读约gettersetter

6

如果你是一个吸气剂或从技术角度来看方法不重要。

有些人使用的习惯是,吸气剂的行为应类似于一个领域,而不是做昂贵的计算,而如果计算不仅仅是一些非常基本的事情,例如从一级方程式构建全名,中间和姓氏。

我觉得这是很好的做法,遵循这样的区分对角,因为应该避免视图结合昂贵的计算,因为该方法或吸气剂可经常呼吁。 在这种情况下,最好的结果存储在一个字段,绑定到现场来代替。

鉴于非常重要绑定,由于该方法或吸气剂不能在后续调用返回不同的值时,没有依赖关系进行了修改(如return {};,这将被视为新的对象实例和导致错误,如“表达式有改变了自上次检查。“)

+0

我想你的意思是“我想,这是不是** **对角一个很好的做法。”这意味着我们不应该在模板中使用方法/获取器。我可能误解了:-) – echonax

+1

其实,我并是说,因为我写的,但感谢的提示,这是不够清楚我的意思。在绑定中使用getter和方法本身并不坏,但绑定到字段更加高效。我的主要观点是,应该避免绑定到昂贵的方法调用。 –

+0

这是一个昂贵的方法,使Array.filter()操作?正如您想要通过某个字段过滤主数据的视图一样。 – mariogl