Typescript創建一個視圖組件包裝HTMLElement與TweenMax一起使用

我試圖創建自己的基本視圖組件類，它包裝了一個HTMLElement或JQuery元素，所以我可以做類似的事情。Typescript創建一個視圖組件包裝HTMLElement與TweenMax一起使用

var newObject:Component = new Component($('#someDiv')); 

TweenMax.to(newObject, .5, {css:{left:10,...}});

目前我需要返回我的組件中的div以使其與TweenMax一起使用。不過，我希望我的組件被視爲jquery或hmmlelement，以便上面的代碼行可以工作。

我考慮實現htmlElement接口，但我找不到實際的接口來查看我需要的所有函數聲明。

感謝

來源

2013-07-01 user2134154

如果你有一個叫組件類，你可以這樣做：

class Component{ 
    item:JQuery; 
    constructor(item:JQuery){ 
     this.item = item; 
    } 
} 

TweenMax.to(newObject.item, .5, {css:{left:10,...}});

來源

2013-07-01 04:37:04 basarat

啊。好的。我試圖避免必須在tweenmax調用中執行'.item'。我想看看是否可以通過TweenMax調用來提供newObject。看起來它可能不像我想的那麼容易。 – user2134154

因爲如果你擴展JQuery，你真的需要擴展JQuery :) – basarat

呵呵。好的，謝謝你的幫助:) – user2134154

我會用這樣的微妙的不同方式打破的jQuery泄漏的部件外部（即如果您從jQuery切換消費者不會在乎）。

class Component { 
    public element: HTMLElement; 
    constructor(selector: string){ 
     this.element = $(selector).get(0); 
    } 
} 

var component = new Component('#myid'); 

TweenMax.to(component.element, .5, {css:{left:10}});

您可以切換到this.element = $(selector).get(0);不this.element = document.querySelector(selector);打破了使用組件類的代碼。

如果HTMLElement是一個類（而不僅僅是一個接口），您將能夠擴展它以避免component.element這部分，因爲您將能夠傳遞專門的類。這是不可能的，因爲在TypeScript中HTMLElement是一個接口支持的聲明。

如果你只是想延長HTMLElement的定義，你可以做，沒有一個類：

interface HTMLElement { 
    myAdditionalMethod() : string; 
} 

HTMLElement.prototype.myAdditionalMethod = function() { 
    return 'Example'; 
}

來源

2013-07-01 10:23:52 Fenton

Typescript創建一個視圖組件包裝HTMLElement與TweenMax一起使用

回答

相關問題