0

我已经定义了一个根对象，我想将其用作其余类的“命名空间”。在这个根对象中，我有两个类——工具和演示。在 PRESENTATION 类中，我需要从 TOOLS 调用公共方法之一。正如我console.log在执行此代码的每个步骤中所知道的那样，问题是return xhr.responseText不要将任何东西传回给tools.getData(configPath)我，我最终会得到undefinedin console.log(pres.config)。

代码：

// Create Namespace
var AppSpace = AppSpace || {}; 

// Class and Constructor
AppSpace.Tools = function() {

        //public methodts
        this.test = function(arg) {
            return arg                      
        }

        this.getData = function(path) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', path, false);
            xhr.onreadystatechange = function() {
                if (xhr.readyState !== 4) return;
                if (xhr.status !== 0 && xhr.status !== 200) {
                    if (xhr.status === 400) {
                        console.log("Could not locate " + path);
                    } else {
                        console.error("app.getData " + path + " HTTP error: " + xhr.status);
                    }
                    return;
                }
                return xhr.responseText;
              };
              xhr.send();
        } 

}


// Class and Constructor
AppSpace.Presentation = function(initName, initfPath){

        //private properties
        var configPath = initfPath || 'config.json';
        var configData = null;
        var name = initName || 'Unnamed Presentation';  

        //private methods
        var getConfigContent = function() {
            return tools.getData(configPath);
        }

        var getConfigData = function() {
            return JSON.parse(getConfigContent);
        }


        //public methodts


        //public properties
        this.name = null;
        this.config = null;
        this.debug = null;

        //logic
        this.name = name;
        this.config = getConfigContent();


}

//execution
var tools = new AppSpace.Tools();               
var pres = new AppSpace.Presentation('Some Name');

pres.debug = tools.test('value passed')
console.log(pres.debug);
console.log(pres.config);
console.log(pres.name);

浏览器控制台中的输出是：

value passed js-oop.dev:99
**undefined js-oop.dev:100**
Some Name js-oop.dev:101

任何人都可以对此提出一些建议吗？TIA。

4

3 回答 3

1

我的意思是，如果您希望您的 ajax 控件直接从您的函数返回一些数据，您必须使用同步方法。没有它，数据将从 onreadystatechange 事件发送。

这是一个如何为 ajax 创建同步调用的示例

// Create Namespace
        var AppSpace = AppSpace || {}; 

        // Class and Constructor
        AppSpace.Tools = function() {

                //public methodts
                this.test = function(arg) {
                    return arg                      
                }

                this.getData = function(path) {
                    var xhr_object= new XMLHttpRequest();
                    // Start synchronous ajax
                    xhr_object.open("GET", path, false);
                    xhr_object.send(null);
                    // Return data
                    return xhr_object.responseText;
                } 

        }


        // Class and Constructor
        AppSpace.Presentation = function(initName, initfPath){

                //private properties
                var configPath = initfPath || 'config.json';
                var configData = null;
                var name = initName || 'Unnamed Presentation';  

                //private methods
                var getConfigContent = function() {
                    return tools.getData(configPath);
                }

                var getConfigData = function() {
                    return JSON.parse(getConfigContent);
                }


                //public methodts


                //public properties
                this.name = null;
                this.config = null;
                this.debug = null;

                //logic
                this.name = name;
                this.config = getConfigContent();


        }

        //execution
        var tools = new AppSpace.Tools();               
        var pres = new AppSpace.Presentation('Some Name');

        pres.debug = tools.test('value passed')
        console.log(pres.debug);
        console.log(pres.config);
        console.log(pres.name);​
于 2012-12-14T09:58:08.973 回答
0

首先，在这段代码中：

this.getData = function(path) {
                    var xhr = new XMLHttpRequest();
                    xhr.open('GET', path, false);
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState !== 4) return;
                        if (xhr.status !== 0 && xhr.status !== 200) {
                            if (xhr.status === 400) {
                                console.log("Could not locate " + path);
                            } else {
                                console.error("app.getData " + path + " HTTP error: " + xhr.status);
                            }
                            return;
                        }
                        return xhr.responseText;
                      };
                      xhr.send();
                }

return xhr.responseText;不管用。它在处理函数内部，值将从 中返回xhr.onreadystatechange，而不是从中返回getData，因此您可以执行以下操作：

this.getData = function(path) {
                        var res;
                        var xhr = new XMLHttpRequest();
                        xhr.open('GET', path, false);
                        xhr.onreadystatechange = function() {
                            if (xhr.readyState !== 4) return;
                            if (xhr.status !== 0 && xhr.status !== 200) {
                                if (xhr.status === 400) {
                                    console.log("Could not locate " + path);
                                } else {
                                    console.error("app.getData " + path + " HTTP error: " + xhr.status);
                                }
                                return;
                            }
                            res = xhr.responseText;
                          };
                          xhr.send();
                          return res;
                    }

此外，这应该像下一个（您正在尝试解析一个函数，而不是它返回的内容）

 var getConfigData = function() {
     return JSON.parse(getConfigContent());
 }
于 2012-12-14T10:00:25.307 回答
0

如果你想让它保持异步，你可以做这样的事情。我会根据您的需要删除 dest 和 prop 参数或回调。

    this.getData = function(path, dest, prop, callback) {
        callback = callback || null;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', path, false);
        xhr.onreadystatechange = function() {
            if (xhr.readyState !== 4) return;
            if (xhr.status !== 0 && xhr.status !== 200) {
                /* ... */
            }
            dest[prop] = xhr.responseText;
            if (Callback) callback(xhr.responseText);
          };
          xhr.send();
    } 

    //private methods
    var getConfigContent = function() {
        return tools.getData(configPath, this, 'config', );
    }
于 2012-12-14T10:03:06.253 回答