Javascript handlebar.js-组合模板

下面代码的每一部分都会创建一个新的handlebar.js模板来调用“用户行为API”。正如您所看到的，每个部分都有类似的代码，有一个或两个变量不同

有没有办法清理这些代码，并将这些单独的函数合并为一个？似乎有很多代码，但我对车把还是新手

// BEHANCE API INFO ---
var apiKey = 'ZLBxK9rEfHwJf9K0rmseNr2fS2gS2HJW';
var userID = 'creativemints';
var perPage = 10;
var behanceUserAPI = 'http://www.behance.net/v2/users/' + userID + '?callback=?&api_key=' + apiKey;
var behanceProjectAPI = 'http://www.behance.net/v2/users/' + userID + '/projects?callback=?&api_key=' + apiKey + '&per_page=' + perPage;

// BEHANCE - USER HEADER ---
(function () {
    function setUserTemplate() {
        var userData = JSON.parse(sessionStorage.getItem('behanceUser')),
            getTemplate = $('#userHead').html(),
            template = Handlebars.compile(getTemplate),
            result = template(userData);
        $('header').html(result);
    }
    if (sessionStorage.getItem('behanceUser')) {
        setUserTemplate();
    } else {
        $.getJSON(behanceUserAPI, function (user) {
            var data = JSON.stringify(user);
            sessionStorage.setItem('behanceUser', data);
            setUserTemplate();
        });
    }
})();

// BEHANCE - USER ABOUT ---
(function () {
    function setUserTemplate() {
        var userData = JSON.parse(sessionStorage.getItem('behanceUser')),
            getTemplate = $('#userAbout').html(),
            template = Handlebars.compile(getTemplate),
            result = template(userData);
        $('.about').html(result);
    }
    if (sessionStorage.getItem('behanceUser')) {
        setUserTemplate();
    } else {
        $.getJSON(behanceUserAPI, function (user) {
            var data = JSON.stringify(user);
            sessionStorage.setItem('behanceUser', data);
            setUserTemplate();
        });
    }
})();

// BEHANCE - USER FOOTER ---
(function () {
    function setUserTemplate() {
        var userData = JSON.parse(sessionStorage.getItem('behanceUser')),
            getTemplate = $('#userFoot').html(),
            template = Handlebars.compile(getTemplate),
            result = template(userData);
        $('footer').html(result);
    }
    if (sessionStorage.getItem('behanceUser')) {
        setUserTemplate();
    } else {
        $.getJSON(behanceUserAPI, function (user) {
            var data = JSON.stringify(user);
            sessionStorage.setItem('behanceUser', data);
            setUserTemplate();
        });
    }
})();

// BEHANCE - USER COPYRIGHT ---
(function () {
    function setUserTemplate() {
        var userData = JSON.parse(sessionStorage.getItem('behanceUser')),
            getTemplate = $('#userCopyright').html(),
            template = Handlebars.compile(getTemplate),
            result = template(userData);
        $('#copyright').html(result);
    }
    if (sessionStorage.getItem('behanceUser')) {
        setUserTemplate();
    } else {
        $.getJSON(behanceUserAPI, function (user) {
            var data = JSON.stringify(user);
            sessionStorage.setItem('behanceUser', data);
            setUserTemplate();
        });
    }
})();

---

还没有测试过这个，但是您应该能够简单地将代码转换成类似的代码

// BEHANCE API INFO ---
var apiKey = 'ZLBxK9rEfHwJf9K0rmseNr2fS2gS2HJW';
var userID = 'creativemints';
var perPage = 10;
var behanceUserAPI = 'http://www.behance.net/v2/users/' + userID + '?callback=?&api_key=' + apiKey;
var behanceProjectAPI = 'http://www.behance.net/v2/users/' + userID + '/projects?callback=?&api_key=' + apiKey + '&per_page=' + perPage;

// BEHANCE - USER HEADER ---
(function () {

function setUserTemplate(templateSelector, htmlSelector) {
    var userData = JSON.parse(sessionStorage.getItem('behanceUser')),
        getTemplate = $(templateSelector).html(),
        template = Handlebars.compile(getTemplate),
        result = template(userData);
    $(htmlSelector).html(result);
}

if (!sessionStorage.getItem('behanceUser')) {
    $.getJSON(behanceUserAPI, function (user) {
        var data = JSON.stringify(user);
        sessionStorage.setItem('behanceUser', data);
    });
}

setUserTemplate('#userHead','header');
setUserTemplate('#userAbout','.about');
setUserTemplate('#userFoot','footer');
setUserTemplate('#userCopyright','#copyright');
})();

---

你太棒了。这很有效。一半的代码和运行！