Question

我一直试图看看javascript库如何工作以获得更好的想法，但我并不真正了解它们。我在java和javascript中有一点编程知识，但下面的代码对我来说似乎有点复杂。我从david-tang.net网站上的一个例子中提取了这些代码。虽然有解释，但在阅读之后，我仍然有点困惑。那里有谁可以帮我这个？提前谢谢。

/*
 * ajax static method
 * example:
 * dQuery.ajax({
        url: 'ajaxResponse.php',
        data: 'fname=David&age=25',
        success: function (response) {}
    });
 */

dQuery.ajax = (function () {
    var xhr;
if (typeof XMLHttpRequest !== 'undefined') {
    xhr = new XMLHttpRequest();
}
else {
    var IEversions = ["Microsoft.XmlHttp",
                    "MSXML2.XmlHttp",
                    "MSXML2.XmlHttp.3.0",
                    "MSXML2.XmlHttp.4.0",
                    "MSXML2.XmlHttp.5.0"];

    for(var i=0, len = IEversions.length; i<len; i++) {
        try {
            xhr = new ActiveXObject(IEversions[i]);
            break;
        }
        catch(e) {
        }
    }      
}

return function (param) {
    var url = param.url+'?'+param.data;    
    function checkReadiness () {
        if (xhr.readyState < 4) {
            return;
        }
        else if (xhr.readyState === 4 && xhr.status === 200) {
            param.success(xhr.responseText);
        }
        else if (xhr.status !== 200) {
            alert('Ajax request failed');
        }
    }

    xhr.onreadystatechange = checkReadiness;
    xhr.open('get', url, true);
    xhr.send('');
}
})();

资料来源：[http://david-tang.net/]

dQuery.ajax({
        url: 'ajaxResponse.php',
        data: 'fname=David&age=25',
        success: function (response) {}
    });



return function (param) {
    var url = param.url+'?'+param.data;    
    function checkReadiness () {
        if (xhr.readyState < 4) {
            return;
        }
        <b> 
            else if (xhr.readyState === 4 && xhr.status === 200) {
            param.success(xhr.responseText); 
        </b>
        }
        else if (xhr.status !== 200) {
            alert('Ajax request failed');
        }
    }

    xhr.onreadystatechange = checkReadiness;
    xhr.open('get', url, true);
    xhr.send('');
}

这是否意味着当readyState为4且xhr.status为200时，success函数将映射到param.success？但是将param返回给函数的行在哪里？这样，无论何时在javascript成功：调用函数（响应）{}，响应都是参数？

testQuery.js中的

(function (window, undefined) {

var testQuery = function(obj) {
    if (!(this instanceof testQuery)) {
        return new testQuery(obj);
}


testQuery.alertMessage = (function () {
    alert("alert");
})();

}) (window);

testQuery.html中的

<html>
<head>

<script src="testQuery.js"></script>
<script>

function click() {

testQuery.alertMessage({});

}

<body>

<input type="button" value="click" onclick="click()">

</body>
</html>

Answer 1

首先，他们创建了一个闭包。这个函数基本上可以包含要执行的所有内容，并最终返回一些内容。返回的内容设置为dQuery.ajax：

dQuery.ajax = (function() {
    // ...
})();

在闭包内部，他们首先创建一个在发出AJAX请求时使用的引擎。在所有理智的浏览器中，引擎都是XMLHttpRequest。在Internet Explorer中，您需要尝试许多其他方法，包括ActiveX对象，这是他们下一步做的事情（遍历所有可用于AJAX的ActiveX对象并查看它是否可用）。

然后，它们返回一个函数，该函数将存储在dQuery.ajax中（因为它是闭包返回的东西）。此函数首先连接URL和查询字符串，以便test.php和foo=bar成为有效的URL test.php?foo=bar。

之后，他们创建一个函数（在返回函数内部 - 这是可能的），每次AJAX引擎状态更改时都会触发该函数。重点是它比你想要的更频繁地发起这个事件。你基本上只想做一些事情，以防收到回复，一切都是正确的。所以他们在readyState < 4的情况下中断了函数。当状态为4且HTTP响应代码为200（OK - 如此成功）时，它们会调用通过param参数传递的函数，将响应文本传递给该函数。

在该功能之外，他们只是发出请求。

所以，如果你打电话给：

dQuery.ajax({
             type:"POST",
             url: "ajax.php",
             data:"id="+id ,
             success: function(data){
                 //response is in the data
            });

然后网址变为ajax.php?id=123（取决于id的值），请求被解除（GET param.type无法使用 - 是吗？可能缺少某些东西？），当它完成时，会调用success函数，其中data是响应文本。

编辑：在函数中，如果它是函数，则可以调用参数：

function foo(func) {
    func(12); // Call the function and pass 12 as its first argument
}

function addone(x) {
    alert(x + 1); // When arrived here, x === 12
}

foo(addone); // This will eventually alert 13

编辑2：回复您发布的内容：

(function (window, undefined) { // Start the closure, good

var testQuery = function(obj) { // Create a testQuery object, fine
    if (!(this instanceof testQuery)) {
        return new testQuery(obj);
}


testQuery.alertMessage = (function () { // Add a function, OK
    alert("alert");
})();

}) (window); // Oops - end of closure already.
             // Things have been defined but not exposed.
             // Just do window.testQuery = testQuery before the end of the closure,
             // so that you can actually use testQuery outside the closure.
             // Currently, testQuery is only accessible inside the closure, but
             // obviously you'd like to use it anywhere.

Edit3 ：您正在通过调用来定义一个函数。这不是必要的。只是做（就像你定义testQuery）：

testQuery.alertMessage = function () {
    alert("alert");
};

其次，您没有}子句的结束if：

if (!(this instanceof testQuery)) {
    return new testQuery(obj);
} // <-- important!

然后按预期工作：http://jsfiddle.net/UFfSf/。

对Javascript库的查询

1 个答案: