2017-04-02 50 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