Question

我正在开发一个动态创建产品表并将它们附加到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);
}

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

每次使用插件时都将HTML模板写入视图（最糟糕的选择IMO，原因我刚才说过）
将HTML模板硬编码到插件中，以便在表格构建之前添加它（仅一次）
链接到附加它的外部js文件或链接到包含它的外部html文件（使事情更清晰，但也增加了外部文件依赖性，这是一个痛苦，使插件只能用于外部文件）

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

Answer 1

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

对于您的扩展程序，您可以这样做（使用单个选项参数）：

$.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;

并且这样打电话：

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

注意：所有参数都是可选的！

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

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

并且这样打电话：

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

并使用如下：

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

如果您愿意，可以使用默认值：

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

或者，结合这两个想法：

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

相同的代码可以使用HTML字符串或选择器：）

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

1 个答案: