Использование объекта JavaScript для вызова функции и функций

Question

Я пытаюсь усовершенствовать свой код JavaScript, используя его как объект, чтобы я мог вызывать его при необходимости, но он не работает. Пожалуйста, кто-нибудь может мне помочь, я буду признателен.

var AppObject = {
    var targetElement = "#AjaxLoadBodyContentLoader";       
    init: function (hashUrl, defaultBack){
        if(hashUrl != defaultBack && hashUrl != ""){
            var LoadHashUrl = hashUrl+' #AjaxLoadBodyContentLoader';
            $('#AjaxLoadBodyContentLoader').load(
                LoadHashUrl,
                {"async_content" : "true", "PrevLink" : defaultBack}
            );
        }
    },
    asyncShowContent: function(){
        /*$.getScript("external.js");*/
        $(this.targetElement).show('normal', this.asyncPregressBar);
    },
    asyncPregressBar: function(){
        $('#preloader').fadeOut();
        $('#status').fadeOut();
    },
    asyncLoader: function(){
        $(this.targetElement).load(
            this.linkPath,
            {"async_content" : "true", "PrevLink" : this.PrevLink},
            function(responseTxt, statusTxt, xhr){
                this.asyncShowContent();
                console.log("Status: " + xhr.status + " | Text: " + xhr.statusText);
            }
        );
    },
    asyncExtecute: function(e){
        var targetUrl = e.target.href;  
        if(typeof targetUrl == 'undefined' || targetUrl == ""){
           targetUrl = $(this).attr('href');
        }
        var linkPath = targetUrl + ' ' + this.targetElement;
        var PrevLink = $(this).attr('data-page-link');

        window.location.hash = targetUrl;

        $('#preloader').fadeIn(); 
        $('#status').fadeIn();
        $(this.targetElement).hide('fast',this.asyncLoader);
    }
}

Использование приведенного выше кода без добавления его в AppObject={} работает очень хорошо, но я хочу усовершенствовать его и узнать больше о том, как использовать объект javascript.

Использование

$(function(){
    AppObject.init(
        window.location.hash.substr(1), 
        location.href.replace(location.hash,"")
    );                                      

    $(document).on('click', 'a.LoadPage', function(e){
        AppObject.asyncExtecute(e);
    });
});

Answer 1

Проблема в том, как вы добавляете свойство к своему объекту. Пожалуйста, добавьте это как показано ниже:

var AppObject = {
    targetElement: "#AjaxLoadBodyContentLoader",
    //remaining code---
};

Answer 2

Как говорит @musefan в комментарии, у вас есть проблема с синтаксисом:

Это неправильно:

var AppObject = {
    var targetElement = "#AjaxLoadBodyContentLoader";
    ...       
}

Это объявление переменной:

var targetElement = "#AjaxLoadBodyContentLoader";     

Внутри объекта вам необходимо использовать пары ключ / значение :

var AppObject = {
        targetElement : "#AjaxLoadBodyContentLoader",
    ...      
}

РЕДАКТИРОВАТЬ : e не определено

e должно быть вашим событием, оно должно быть в asyncExtecute,

var AppObject = {
    asyncExtecute: function(e){
        e.preventDefault(); // Add this line, to prevent the browser to immediately navigate to other window
        var targetUrl = e.target.href;  
        ...
    }
}

$(function(){
    ...
    $(document).on('click', 'a.LoadPage', function(e){
        AppObject.asyncExtecute(e); // Here you are passing the event object to asyncExtecute
    });
});