卸载/重新加载javascript或用于大量ajax内容的更好的解决方案

Unload/Reload javascript or better solution for lots of ajax content?

本文关键字：ajax 解决方案 更好 用于 新加载 javascript 加载 卸载      更新时间：2023-09-26

我有一个页面，上面有几个选项卡。（产品、服务）

我没有在运行时加载这些选项卡中的内容，而是让它们在单击选项卡时加载特定的选项卡内容。我有很多标签页，里面有很多内容，这是获得合理的初始页面/加载速度的唯一方法。

这些选项卡中的每一个过去都有自己的javascript文件，该文件在内容加载后加载。javascript文件很大，我需要在数据中创建一个带有通用标记的通用脚本文件，这样我就可以对所有选项卡使用相同的脚本文件。。。例如，我用.viewelementcomments代替了.viewproductcomments、.viewservicecomments等类。

我已经成功地完成了这项工作，但它带来了另一个问题。

有没有一种简单的方法可以在单击另一个选项卡时"卸载此脚本文件创建的所有操作"，以便在所有新元素通过ajax发送到页面后重新加载它？除了.on的层次结构级别之外，我可以在每一件小事上遍历和.on来捕获静态元素，这将是一个相当高的级别。

基本上，我有很多脚本需要在内容加载后进行识别，我不想为每个选项卡重新加载相同的脚本文件，因为这会导致重复事件或其他未知内容。

如有任何建议，我们将不胜感激。

谢谢！

*编辑以提供示例：

$('.post_comments_level1').each(function() {
    var cType = parseInt($(this).parent().prev('div').find('.c-t').text());
    var uniqueID = parseInt($(this).parent().prev('div').find('.un-id').text());
    var listingID = parseInt($(this).parent().prev('div').find('.l-id').text());
    var commentsHome = $(this);
    $.ajax({
        url: '/MyFeeds/Feed.aspx',
        type: 'POST',
        dataType: 'html',
        data: {
            "xfd" : 'Get_Comments',
            "ctype" : cType,
            "unid" : uniqueID,
            "pid" : portalID,
            "lid" : listingID,
            "uid" : userID
        },
        success: function(data) {
            commentsHome.html(data);
            ResetHeight();
        }
    });
});

例如，每个"产品"都有自己的一组注释，这些注释被封装在UL中，注释元素是LI元素。示例脚本使用类.post_comments_level1查找所有ul，通过ajax从数据库中检索注释，并将这些注释插入最初为空的ul元素中。

所以当我点击下一个标签时，说是服务。。。我可以把所有这些工作做得很长，但我正在寻找一个坚实的方法。例如，我现在只想在服务选项卡中新添加的UL上执行该操作……只是想知道优化情况的最佳方法。

在我看来，您需要使用适当的方法创建JavaScript类，以最大限度地减少为完成相同任务而编写的代码量。

示例：

您的用户单击"产品"选项卡：

$('#productsTab').on('click', function(evt){
    //Use classes you've created.
    var blah = new Foo(); 
    });

然后用户单击"服务"选项卡：

$('#servicesTab').on('click', function(evt){
    //Same function, same methods, is not affected by old one
    var blah2 = new Foo(); 
    });

这是用JavaScript创建类的一个非常原始的例子，但它应该让您走上正轨：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

编辑：

我解释你的问题的方式是你问如何最好地重用你的代码。您描述了有几个选项卡，其中包含JavaScript/jQuery以类似方式操作的内容。

我建议您创建一个类（在JavaScript中，它只是指一个可重用的函数）来完成这项任务。

如果你在理解这一点上有困难，也许可以通过这个例子来帮助你。查看代码并阅读警报：

http://jsfiddle.net/anb4k/

我创建了一个名为"foo"的函数。

然后，我给"new foo（）；"分配了一个名为"blah"的变量。

"blah"继承了"foo"的所有功能，但通过使用"new"运算符，我创建了一个完全不同的函数实例。这可能有助于您解决账单问题。构建代码，使模型无关紧要，然后在条件正确时（onClick或可见时等）使用该函数构建内容。

相关文章：