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

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

当前的解决方案运行良好。您可以将加载的模板缓存在 hashmap 中，并添加更多的间接级别：

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中使用了类似的缓存策略。