动态表创建插件的最佳实践？

I'm working on a plugin that will dynamically create product tables and append them to divs (or whatever selectors call the plugin function). So far, it works as planned but the tables are generated by copying an HTML template that is hardcoded onto the view. My code is long so I'm not going to paste all of it but it is essentially like this (very generally and minus all the table logic functions):

我正在开发一个动态创建产品表并将它们附加到div(或任何选择器调用插件函数)的插件。到目前为止,它按计划工作,但表是通过复制硬编码到视图上的HTML模板生成的。我的代码很长,所以我不打算粘贴所有它,但它基本上是这样的(非常普遍并减去所有表逻辑函数):

(rowtemplate html)

$.fn.block = function(rows, maxrows) {
    var productRows = $(this);

    function createRows(rows) {
        var rowHTML = $('.rowtemplate').html();
        for(var i = 1; i < rows + 1; i++) {
            $('<tr class="productrow"></tr>').appendTo(productRows).append(rowHTML);
        } 
    }

    function createTable(rows) {
        createRows(rows)
        // bind table logic functions and other stuff
        ......
    }

    // bunch of other stuff, defining table logic functions

    createTable(rows, maxrows);
}

So basically when you say ("#div2").block(5, 10), the plugin takes in 5 as rows and 10 as max rows and pipes those into createTable which calls createRows and binds functions to create the table. This of course gets appended to #div2. The issue is that the createRows function works by using the rowtemplate html above (which I basically just made for testing purposes). This means the plugin is obviously not very portable if you have to bring the template with it every time. So I think there are three ways to implement the HTML:

所以基本上当你说(“#div2”)。block(5,10)时,插件将5个作为行,10个作为最大行,并将它们传递给createTable,它调用createRows并绑定函数来创建表。这当然会附加到#div2。问题是createRows函数通过使用上面的rowtemplate html(我基本上只是为测试目的而做)来工作。这意味着如果你每次必须带上模板,插件显然不是很便携。所以我认为有三种方法可以实现HTML:

1. Write the HTML template into the view every time the plugin is used (worst option IMO, for reasons I just stated)

   每次使用插件时都将HTML模板写入视图(最糟糕的选择IMO,原因我刚才说过)

2. Hardcode the HTML template into the plugin so that it just gets appended prior to table construction (only once)

   将HTML模板硬编码到插件中,以便在表构造之前添加它(仅一次)

3. Link to an external js file that appends it or link to an external html file that contains it (makes things cleaner but also adds external file dependency which is a pain and makes the plugin only usable with the external file)

   链接到附加它的外部js文件或链接到包含它的外部html文件(使事情更清晰,但也增加了外部文件依赖,这是一个痛苦,使插件只能用于外部文件)

I'm strongly leaning towards 2 but I don't know what other developers who have worked on similar projects have done, so I'd like to know if there is another option. I don't see how there could be because the HTML has to be in an external file, in the HTML part of the view or in the Javascript...so logically I can't think of an alternative but would welcome suggestions.

我非常倾向于2,但我不知道其他开发类似项目的开发人员做了什么,所以我想知道是否还有其他选择。我不知道怎么可能,因为HTML必须在外部文件,视图的HTML部分或Javascript中...所以逻辑上我不能想到另一种选择,但欢迎提出建议。

1 个解决方案

#1

At the moment, that is a jQuery extension and not a plugin. if it were a plugin you would make the HTML another option, passed to the plugin, but provide a default template in the default options.

目前,这是一个jQuery扩展而不是插件。如果它是一个插件,你会将HTML另一个选项传递给插件,但在默认选项中提供默认模板。

For your extension, you could do it like this (using a single options parameter):

对于您的扩展,您可以这样做(使用单个选项参数):

$.fn.block = function(options) {
     // Get the options or use the defaults
     var html = options.html || "<div>my default html template</div>";
     var rows = options.rows || 5;
     var maxrows = options.maxrows || 10;

and call like this:

并像这样打电话:

$(selector).block({rows: 2, cols: 10, html: "<div>etc</div>"});

note: All of the parameters are optional!

注意:所有参数都是可选的!

Another option is to pass a selector, that chooses the template from an element in the existing page, so it can be as complex as you like. Using a dummy script block (with unknown type so it is ignored) is great for this:

另一种选择是传递一个选择器,它从现有页面中的元素中选择模板,因此它可以像你想的那样复杂。使用虚拟脚本块(具有未知类型以便忽略它)非常适用于此:

<script id="mythtml" type="text/template">
    <div>My template</div>
</script>

and call like this:

并像这样打电话:

$(selector).block({rows: 2, cols: 10, html: "#myhtml"});

and use like this:

并使用这样的:

$.fn.block = function(options) {
     var html = $(options.html).html();

again this could use a default if you prefer:

如果你愿意,这可以使用默认值:

$.fn.block = function(options) {
     var html = $(options.html).html() || "<div>my default html template</div>";

Or, combine both ideas:

或者,结合两个想法:

$.fn.block = function(options) {
     // Get the options or use the defaults
     var html = $(options.html).html() || "<div>my default html template</div>";

The same code will work with a HTML string or a selector :)

相同的代码将使用HTML字符串或选择器:)