Question

我必须以动态方式加载网页的各个部分，因此我只想加载内容一次，我为每个页面添加一个<div>：

<a href="#" data-pageindex="0">Home</a>
<a href="#" data-pageindex="1">Contact</a>
<a href="#" data-pageindex="2">Portfolio</a>

<div id="page-home"></div>
<div id="page-contact"></div>
<div id="page-portfolio"></div>

然后我想在这样的事情上做ajax调用（在这种情况下，点是减少HTTP请求，将每个部分的所有代码（主要是插件的初始化）放在同一个文件中）：

$("[data-pageindex]").on("click", function(e){
    var index = parseInt($(this).data("pageindex"));

    $("nav li").removeClass('active');
    $(this).parent().addClass('active');

    load_section(index);

    e.preventDefault();
    return false;
});

function load_section(index_load){

    // 'urls' is an array with all the section names.
    var id_section = "#page-" + urls[index_load]; 

    if (! isEmpty( $(id_section) ) ){
        return;
    }

    console.log(id_section);

    switch(index_load){
        case 0: $(id_section).load("/application/ajax/home.html", load_home); break;
        case 1: $(id_section).load("/application/ajax/contact.html", load_contact); break;
        default: $(id_section).load("/application/ajax/portfolio.html", load_portfolio);
    }
}

这里我有回调函数，我执行每个部分的代码：

function load_home(){
    // 180 lines of code
}

function load_contact(){
    // 104 lines of code
}

function load_portfolio(){
    // 95 lines of code
}

它有效，但我不认为这是最好的方法。最好使用$.getScript()函数而不是上面的代码？你有更明确的选择吗？

Answer 1

目前的解决方案很好。您可以将加载的模板缓存在散列映射中，并添加一个间接级别：

var templateCache = {};

function load_section(index_load) {
    // 'urls' is an array with all the section names.
    var id_section = "#page-" + urls[index_load]; 
    if (! isEmpty( $(id_section) ) ){
        return;
    }

    var url, callback;

    switch(index_load){
        case 0: url = "/application/ajax/home.html"; callback = load_home; break;
        case 1: url = "/application/ajax/contact.html"; callback = load_contact; break;
        default: url = "/application/ajax/portfolio.html"; callback = load_portfolio;
    }
    handleSection(id_section, url, callback);
}

function handleSection(id_section, section, callback) {
    if (templateCache[section]) {
        callback(templateCache[section]);
        return;
    }
    $(id_section).load(section, function (template) {
       templateCache[section] = template;
       callback.call(null, template);
    });
}

服务$templateCache在AngularJS中使用了类似的缓存策略。

如何通过缓存内容的ajax加载页面？

1 个答案: