JavaScript：MooTools - 使用类获取字符串，使用父函数返回它

Question

我有一个大问题，不知道如何解决。

我需要返回值（主要是字符串）以便在各种上下文中使用它们。举个例子，我需要检查 if/else 语句中的某些内容是 0 还是 1，或者在通过 JavaScript 将字符串解析到 DOM 之前在各种 html 元素中插入字符串。下面是我正在寻找的内容的简化示例：

<script>
    function output() {
        return "Hello world!";
    }

    function check() {
        return 3;
    }

    (function() {
        if(check() !== 5) {
            $(someElement).set("html", "<p>" + output() + "</p>");
        }
    })();
</script>

现在让我们进入令人头疼的部分：在返回值之前，我需要从外部文件中的 JSON 上下文请求它，该文件从后端加载内容。我编写了一个包含 Request.JSON MooTools 类的类，以便更轻松地处理各种请求：

<script>
    var backendCall = new Class({

        Implements: Options,

        options: {
            url: "gateway/?contentType=application/json"
        },

        initialize: function(options) {
            this.setOptions(options);

            if(!instanceOf(this.options.prms, Array)) {
                this.options.prms = [];
            }

            this.fire();
        },

        fire: function() {
            new Request.JSON({
                data: JSON.encode({
                    "methodName": this.options.req,
                    "parameters": this.options.prms,
                    "serviceName": this.options.srv
                }),
                onFailure: function() {
                    alert("JSON-Request failed.");
                },
                onSuccess: function(data) {
                    this.callback(data);
                }.bind(this),
                url: this.options.url
            }).send();
        },

        callback: function(data) {
            alert(data); // works
        }
    });


    function request(req, srv) {
        new backendCall({
            req: req,
            srv: srv
        });
    }


    window.addEvent("load", function() {
        /* is there a way to return the data string here?
            or is it impossible? */
        request("someValue", "demoTest");
    });
</script>

在引用 JSON-Request 输出的回调函数内执行硬编码函数时，这非常有用。但我需要使这部分变得更加可变，因为我想以不同的方式使用输出。有没有办法让回调只返回输出并将其引用到父 request() 函数以使其返回值？也许与 .pass(data) 一起？欢迎任何想法！太感谢了！ :)

Answer 1

出色地。 XHR 是异步 (ajax) 的，因此您只能通过 onComplete 事件的回调获取该值。

通常，您等待响应，然后 onComplete 可以转到您正在检查或完成的下一个项目。

例如，在伪代码中：

form.addEvent("submit", function(e) {
    e.stop();
    var errors = false;
    var finalise = function() {
        if (!errors)
            this.send();
        else 
            alert("errors found!");
    }.bind(this);

    if (!field.length) errors = true;
    ... other sync checks.
    // does it exist?
    new Request.JSON({
        url: "/accountCheck/",
        method: "get",
        onComplete: function(data) {
            if (data.id) {
                 // already exists
                 errors = true;
            }
            // call finalise
            finalise();
        }
    }).send({user: field.value}); 
}

当然，您可以在请求对象上设置async: false，这将阻止 UI 直到完成，以便 onComplete 可以立即在请求之后设置您的 var 和行。 send() 将使其可供使用。

您可以做一个适当的验证器（或使用现成的验证器），它定义一个规则集并按顺序检查它们，了解 async onComplete 并有一堆检查可供对照，有很多这样的例子，甚至 mootools-more 有一个表单验证器非常广泛（尽管我自己没有使用过它，所以无法证明它如何处理异步检查）