Question

我一直在努力编写一个HTML模板类，它使用jquery而不包装每个jquery函数。我知道使用jquery时想要继承其方法的最佳方法是编写一个jquery插件。但是，我希望能够扩展插件（如果这是我必须采用的方法）。目前这是我使用类设计的。

class Templater extends jQuery.fn.init {
    constructor(options){
        super();
        var defaults = {
            template : null,
            // jquery elements for components
            struct : {
                wrapper : ''
            }
        };
        this.settings = $.extend(defaults, options);

        this.$wrapper = null;

        return this;
    }

    template(){
        if(this.settings.template === null)
            this.useDefaultTemplate();
        else
            this.useTemplate();
        this.init(this.$wrapper);
        return this;
    }

    useTemplate(){
        var $template = this.settings.template;
        $template = $('<div></div>').append($template);    
        // search for the HTML components
        var self = this;
        $.each(this.settings.struct, function(i, e){
            self['$' + i] = $template.find(e);
        });

        return this;
    }

    useDefaultTemplate() {
        // implement in child
        return this;
    }
}

这个类的目标是采用一个jquery模板（在完整代码中支持字符串），它代表了一些可以重复使用的HTML元素，可以反复构建和使用，比如论坛帖子或评论。

buildPosts(data){
    // some class called Post extends Templater
    var post = new Post($('#postTemplate'));
    $.each(data, function(i, e){
        post.addPost(e).appendTo('table');
    });
}

虽然还有其他方法可以做到，但是Templater将由其他类扩展，例如具有更多功能的表生成器（管理数据，添加行，更新行等）。

继承jQuery的意义在于继承其优秀的DOM控件，如appendTo，remove等。通过继承jQuery并调用this.init()，这实际上有些作用。但它有重大缺陷。例如，在调用appendTo时，似乎调用构造函数。

我尝试过使用插件方法，但是如果你打电话

var template = new $().Templater(options).template().appendTo('body')

template最终作为jquery对象（因为最后一次调用是appendTo），现在没有非jquery函数可用。

有没有明智的方法可以做到这一点，还是应该将jquery函数包装在我的Templater类中？

如何编写可扩展的jQuery类？

0 个答案: