0

我有这个基本的 JavaScript 代码作为我正在制作的一个迷你文件管理器项目的一部分，但不幸的是它不起作用。在get()函数内部，我试图访问Content.files数组，但似乎由于变量范围或函数内部的任何内容，它没有正确设置数组并且页面上没有任何内容。Firefox 的错误控制台什么也没给我。我该如何解决？

顺便说一句，最近我一直专注于 C# 和 PHP，如果这只是一个愚蠢的语法错误，请原谅我。谢谢！

<script type="text/javascript">

Page = {

currentdir: '/',
}

Content = {

files:[], folders:[],

get: function() {

    $.post('?p=myfiles&ajax', {
        dir: '/',
    }, function (data) {
        Content.files = data.files;
        Content.folders = data.folders;
    }, "json"); 
},

build: function () {

    for (var n = 0; n < Content.files.length; n++) {

        var id = Content.files[n].id;
        var name = Content.files[n].name;
        var size = Content.files[n].size;

        output = '<td>File</td><td>'+id+'</td><td><a href="?p=file-download&id='+id+'">'+name+'</a></td><td>'+((size / (1024*1024)).toFixed(2))+' MB</td>';

        $('#filetable').append('<tr>'+output+'</tr>');

    }
},

}

</script>
4

3 回答 3

1

使用您删除的评论（我猜是因为我错误删除了自己的评论），您build在调用get. 不幸的是，get它发出了一个异步的 AJAX 请求。这意味着，Javascript 在运行进一步的代码之前不会等待 AJAX 响应，因此build在发送请求后立即运行。响应将在未来的某个时候返回（从现在起不会太久），但几乎肯定不会在build被调用之前。这意味着不会填充这些项目。下面是一个如何提供回调的示例：

var Page = {   // <-- Add `var`
    currentdir: '/',
};

var Content = {   // <-- Add `var`
    files:[],
    folders:[],
    get: function (callback) {
        $.post('?p=myfiles&ajax', {
            dir: '/',
        }, function (data) {
            Content.files = data.files;
            Content.folders = data.folders;
            //if (typeof callback !== "undefined") { // <-- Might be better than below, in the special cases where some functions are "objects" in IE
            if (typeof callback === "function") {
                Function.prototype.apply.call(this, callback, arguments);
            }
        }, "json");
    },
    build: function () {
        for (var n = 0; n < Content.files.length; n++) {
            var id = Content.files[n].id;
            var name = Content.files[n].name;
            var size = Content.files[n].size;
            output = '<td>File</td><td>'+id+'</td><td><a href="?p=file-download&id='+id+'">'+name+'</a></td><td>'+((size / (1024*1024)).toFixed(2))+' MB</td>';
            $('#filetable').append('<tr>'+output+'</tr>');
        }
    }    // <-------------- Remove the comma
};

Content.get(Content.build);

这样，您可以将任何函数引用传递给它，Content.get并且它将在 之后立即被调用，Content.files并且Content.folders从 AJAX 请求中填充。

其他一些事情 - 删除对象中build方法之后的逗号Content。此外，您可能应该使用var来声明PageandContent对象。

于 2013-03-22T18:15:35.503 回答
-1

Content尚未定义，因为您实际上正在定义它，但在对象范围内，您可以使用this. post 回调有自己的范围，但您可以this在更高的范围内重新分配。

get: function() {
    var self = this;
    $.post('?p=myfiles&ajax', {
        dir: '/',
    }, function (data) {
        self.files = data.files;
        self.folders = data.folders;

http://jsfiddle.net/ExplosionPIlls/xYByU/

同样重要的是要注意，您不知道该$.post方法何时完成运行，因此任何对Content填充的依赖都必须依赖于该请求的完成。

于 2013-03-22T18:05:50.490 回答
-2

您将要使用this.files而不是Content.files在对象内部。Content是您对正在创建的对象的引用。也许你可以像你正在做的那样关闭它的值，老实说我不知道​​，但它闻起来很糟糕，这就是隐式this变量的真正用途。在您的对象之外，一旦将其分配给变量Content，就可以正确地说Content.files引用该成员变量。

附带说明一下，最好将脚本包含在立即调用的匿名函数中，以免与window对象的其他成员发生冲突，如果您不使用var声明变量或创建变量，可能会发生这种情况在函数范围之外（你正在做这两个）。我会仔细阅读以更好地理解这一点。

于 2013-03-22T18:04:57.563 回答