javascript - 使用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

正如 @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
    });
});