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

我必须以友好的方式加载我网站的各个部分，因为我只想加载一次内容，所以我为每个页面执行了一次

：

<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>

这里有回调函数，我在其中为每个部分执行代码：

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

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

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

这是可行的，但我认为这不是最好的办法。 最好使用

$.getScript（）

函数而不是上面的代码？

---

您有更清晰的替代方案吗？

当前的解决方案运行良好。您可以将加载的模板缓存在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);
    });
}

---

类似的缓存策略在AngularJS中被服务

$templateCache

使用，谢谢Minko！但我不明白回调为什么有参数。我的函数没有。你能逐行解释handleSection（）函数吗？：）它只是获取页面并缓存它（如果它还没有缓存的话）。是的，我理解其主要思想，但是这里：

callback（templateCache[section]）回调函数传递参数。我的函数load_home（）、load_portfolio（）和load_contact（）没有任何参数。我想知道为什么？我明白了，我在回答中做了一个快速修正。据我所知，您希望将模板（HTML页面）传递到
load\u home
、
load\u portfolio
和
load\u contact
。我只是通过这个模板。回调实际上是这三个函数之一。我试着让代码有点枯燥。如果我使用委托事件呢？我不需要回调来初始化。你怎么认为？
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);
    });
}