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一起使用

回答

相关问题