0

我正在尝试创建自己的基本视图组件类，它包装了 HTMLElement 或 JQuery 元素，以便我可以做类似的事情。

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

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

目前我需要在我的组件中返回 div 以使其与 TweenMax 一起使用。但是，我希望将我的组件视为 jquery 或 htmlelement，以便上面的代码行可以工作。

我考虑实现 htmlElement 接口，但我找不到实际的接口来查看我需要的所有函数声明。

谢谢

4

2 回答 2

2

我将使用一种稍微不同的方式来打破 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部分，因为您将能够传递专门的类。这是不可能的，因为在 TypeScriptHTMLElement中是一个接口支持的声明。

如果你只是想扩展你的定义，HTMLElement你可以在没有类的情况下做到这一点：

interface HTMLElement {
    myAdditionalMethod() : string;
}

HTMLElement.prototype.myAdditionalMethod = function () {
    return 'Example';
}
于 2013-07-01T10:23:52.980 回答
0

如果您有一个名为 Component 的类，您可以执行以下操作：

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

TweenMax.to(newObject.item, .5, {css:{left:10,...}});
于 2013-07-01T04:37:04.933 回答