使用JavaScript过滤客户端项目,隐藏或从DOM中删除的最佳实践？

Question

我有一个相对较大的项目数据集(几千个项目),我想通过在Web应用程序中应用多个过滤器客户端来导航.应用过滤逻辑本身不是问题,问题是使用哪种方法来更新匹配结果表以获得最佳用户体验.我提出的方法是:

1. 设置每行的类以隐藏或显示它(使用可见性:折叠以隐藏它),并将DOM元素保留在表中.
2. 为每个数据项保留DOM元素,将其分离/附加到表以隐藏和显示它.
3. 只需为每个数据项保留一个抽象对象,根据需要创建一个DOM对象来显示它.

哪一个可能会提供最佳用户体验？除了我已经列出的那些之外的任何其他推荐方法？

Answer 1

如果显示区域有固定大小（或者至少有最大大小），并且必须在客户端进行过滤，我不会为每个项目创建一个 DOM 节点，而是重用一组预定义的 DOM 节点作为模板，隐藏不必要的模板取决于过滤器的结果数量。这将大大减少文档中的 DOM 节点，从而使页面渲染保持响应并且相当容易实现。

HTML 示例*：

<ul id="massive-dataset-list-display">
    <li>
       <div class="field-1"></div>
       <div class="field-2"></div>
       <div class="field-n"></div>
    </li>
    <li>
       <div class="field-1"></div>
       <div class="field-2"></div>
       <div class="field-n"></div>
    </li>
    <li>
       <div class="field-1"></div>
       <div class="field-2"></div>
       <div class="field-n"></div>
    </li>
    .
    .
    .
</ul>

JavaScript 示例*：

var MassiveDataset = function(src) {
    var data          = this.fetchDataFromSource(src);
    var templateNodes = $("#massive-dataset-list-display li");

    // It seems that you already have this handled, but just for 
    // completeness' sake
    this.filterBy(someParam) {
        var filteredData = [];
        // magic filtering of `data` 
        this.displayResults(filteredData);
    };

    this.displayResults(filteredData) {
        var resultCount = filteredData.length;

        templateNodes.each(function(index, node) {
            // There are more results than display node templates, start hiding
            if ( index >= resultCount ) {
                $(node).hide();
                return;
            }

            $(node).show();
            this.formatDisplayResultNode(node, filteredData[i]);
        });
    };

    this.formatDisplayResultNode = function(node, rowData) {
        // For great justice
    };
};

var md = new MassiveDataset("some/data/source");
md.filterBy("i can haz filter?");

* 未经测试。不要指望复制/粘贴能够工作，但这会很酷。