0

残りのクラスの「名前空間」として使用する 1 つのルート オブジェクトを定義しました。このルート オブジェクト内には、TOOLS と PRESENTATION の 2 つのクラスがあります。PRESENTATION クラスでは、TOOLS からパブリック メソッドの 1 つを呼び出す必要があります。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

誰でもこれについて少しアドバイスできますか? ティア。

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 に答える