使用带有 addParser 方法的 jQuery 延迟加载插件和 tablesorter 插件？答案

【问题标题】：Using jQuery lazy load plugin and tablesorter plugin with addParser method?使用带有 addParser 方法的 jQuery 延迟加载插件和 tablesorter 插件？
【发布时间】：2011-12-18 08:54:18
【问题描述】：

我正在使用jQuery Lazy plugin 来延迟加载 JS 和 CSS 资源。我还使用TableSorter jQuery plugin 使表格可排序。现在这两个工作得很好，没有问题，当我简单地在 Lazy 插件中定义 Tablesorter 然后像这样使用 Tablesorter：

$('#table_id').tablesorter();

上面的工作按预期工作，Tablesorter 库按需加载，HTML 表格变为可排序的。但是，我需要像这样向 tablesorter 添加自定义解析器：

$.tablesorter.addParser({ 
  id: 'my_parser', 
  is: function(s) { 
    return false; 
  }, 
  format: function(s) { 
    var result = s.match(/([0-9]+)/);
    if (result == null) return 0;
    return parseInt(result[0]);
  }, 
  type: 'numeric' 
});

上面的 addParser 代码的问题是，我收到“$.tablesorter 没有方法 'addParser'”的错误。如果 TableSorter 插件是否已经加载，它并没有什么区别。惰性插件用自己的函数覆盖 $.tablesorter 并且不允许这个调用之王 - 我想。

behaviour can be seen here in this jsFiddle 的示例。

谁能帮助我？我将非常感谢任何帮助或想法。提前谢谢你。

【问题讨论】：

查看lazy插件的源码，没有发现加载完成后会触发事件的提示。但这正是您在这里需要的，因为您确实希望将配置调用推迟到实际加载库。
您应该考虑使用另一个加载器插件，例如 Yepnope 或 RequireJS。当脚本完成加载时，两者都提供回调功能。
@DidierG。这两个库看起来都比jquery.lazy.js
@DidierG。 - 我不需要回调函数，实际上，我什至不想要它。我对完美运行的 Lazy 插件非常满意——仅在实际使用时才加载 JS 和 CSS。 Yepnope 和 RequireJS 都将始终加载资源，无论它们是否实际在页面中使用。惰性插件很棒，但是当不使用选择器并且直接调用库时，它显然无法正常工作，例如 $.tablesorter.addParser(); ...
这些库不会总是加载资源。如果您考虑一下，这甚至没有意义：您真的不需要库来进行无条件加载。仔细看看 Yepnope，它非常小，完全可以满足您的需求。

标签： jquery lazy-loading tablesorter

【解决方案1】：

只是为了证明我的观点yepnope.js 可以轻松完成您需要的工作（即，如果周围有任何可排序的表，则有条件地加载 tablesorter 插件）：

$(function () {
 yepnope({
    test    : $("table.sortable").length,
    yep     : "/resources/jquery.tablesorter.js",
    complete: function () {
      $.tablesorter.addParser({
        // whatever;
      });
      $("table.sortable").tablesorter();
    }
  });
});

【讨论】：

我同意你的观点，这可行，但在我的情况下它会非常不切实际。我将不得不在我想初始化一些可排序表的每个地方使用这个长代码。我喜欢 Lazy 插件的地方在于，我的资源列表集中在一个文件中，每次我需要使用任何页面中的某些资源时，我都不必处理它们。所以你是对的，你的解决方案有效，但对我没有多大帮助。但是感谢您的努力。
我不明白如何不使用这种方法将您的所有资源放在一个地方/文件中。但是，是的，也许您将不得不更改一些源代码。重点是：除非我忽略了jquery.lazy.js 的源代码中的某些内容（这是完全可能的），否则它根本做不到你想要的。
只是为了澄清为什么我不能像你演示的那样使用 yepnope - 我有很多带有表格的页面，每个表格都在自己的页面上初始化，并带有一些特定于 tablesorter 的选项。并且这些选项必须在此页面中内联指定，因为它们是动态生成的，当我使用 yepnope 时，我不能将它们全部放在一个 JS 文件中。因为我必须知道所有表 ID，并且如果将其全部放在一个 JS 文件中，我将无法为它们提供特定的 tablesorter 选项。
@Frodik 我明白你的意思。但是，如果您将上述脚本放入 .js 并在 jQuery 和 yepnope.js 之后立即加载，则 .tablesorter() 调用将在整个代码中正常工作。只需将.sortable 类添加到所有可排序表（或使用其他方法来识别它们）。不会有太大的改变——如果你是这样想的话，你当然不必在 complete 回调中初始化所有可排序的表。
这是我做不到的——拥有一个像 .sortable 这样的通用 CSS 类，因为我需要单独初始化每个表，因为我为每个表使用特定选项，例如 $('table').tablesorter ({ ... })

【解决方案2】：

出现此错误是正常的。 Lazy 插件的工作方式是为您在选项中提供的name 创建一个代理。

所以实际上$.tablesorter 是（查看控制台）：

$.tablesorter:
function proxy() {
    var self = this;
        arg = arguments;

        if( $.lazy.archive[src].status === 'loaded' ) {

            $.each(this,function(){
                $(this)[name].apply(self,arg);
            });

        } else if ( $.lazy.archive[src].status === 'loading' ) {
            $.lazy.archive[src].que.push({'name':name,'self':self,'arguments':arg});

        ...

如果插件已经加载到$.lazy.archive，它会将它应用到你调用tablesorter()的元素上，否则它会先加载插件然后再应用它。

因此您没有插件通常提供的原始命名空间，并且您不能在您的上下文中使用$.tablesorter.addParser。

【讨论】：

有什么办法，我怎么能调用 $.tablesorter.addParser() ？
恐怕不能使用 Lazy 插件
好的，或者任何其他像 jquery.lazy.js 一样工作的 jQuery 延迟加载插件？但是请不要 yepnope - 关于我在这里与 Tomalak 关于 yepnope 的讨论以及为什么我不能使用它....