在 HTML5 FileSystem API 中实现逻辑

Question

我有this fiddle（运行小提琴时请使用谷歌浏览器）。

我想知道如何使用 HTML 5 文件系统 API 正确实现这一点。

用例： 在沙箱文件系统 API 中附加某些内容时，我想首先检查现有文件的文件大小是否超过特定阈值级别。如果是，请重命名或删除文件。

$(document).ready(function () {
    var messages = "A sample text!";
    navigator.webkitPersistentStorage.requestQuota(1024 * 1024, function (availBytes) {
        window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
        window.requestFileSystem(window.PERSISTENT, availBytes, function (fs) {
            fs.root.getFile("sample.txt", {
                create: true
            }, function (file) {
                console.log("file.name =" + file.name);
                console.log("file.fullPath =" + file.fullPath);

                file.getMetadata(function (md) {
                    //1. check the file size first (md.size)
                    //2. if file size > 100KB
                    //       2.1 delete the existing file or rename it
                    //       2.2 create a new file
                    //   else
                    //       3 create a new file
                }, this.onError);

                file.createWriter(function (fileWriter) {

                    fileWriter.onerror = function (e) {
                        console.log('Write failed: ' + e.toString());
                    };
                    fileWriter.seek(fileWriter.length); // Start write position at EOF.
                    var blob = new Blob([messages], {
                        type: 'plain/text'
                    });
                    fileWriter.write(blob);
                }, this.onError);
            }, this.onError);
        }, this.onError); //end window.requestFileSystem
    }, function (e) {
        console.log('Error', e);
    });

    function onError(e) {
        var msg = '';

        switch (e.code) {
            case FileError.QUOTA_EXCEEDED_ERR:
                msg = 'QUOTA_EXCEEDED_ERR';
                break;
            case FileError.NOT_FOUND_ERR:
                msg = 'NOT_FOUND_ERR';
                break;
            case FileError.SECURITY_ERR:
                msg = 'SECURITY_ERR';
                break;
            case FileError.INVALID_MODIFICATION_ERR:
                msg = 'INVALID_MODIFICATION_ERR';
                break;
            case FileError.INVALID_STATE_ERR:
                msg = 'INVALID_STATE_ERR';
                break;
            default:
                msg = 'Unknown Error';
                break;
        };

        console.log('Error: ' + msg);
    }
});

我用过

 file.getMetadata(function (md) {
            //1. check the file size first (md.size)
            //2. if file size > 100KB
            //       2.1 delete the existing file or rename it
            //       2.2 create a new file
            //   else
            //       3 create a new file
        }, this.onError);

但我很困惑如何防止 createwriter 运行，因为它们在同一个回调函数上。

我想知道如何正确排序我的代码，以便在追加之前先检查现有文件的文件大小。

FileEntry 接口上有很多回调函数，我很困惑是要放置它们还是一次性使用它们。

  fs.root.getFile('sample.txt', {create: true, exclusive: true}, function(fileEntry) {
    //fileEntry.getMetadata(successCallback, opt_errorCallback);
    //fileEntry.remove(successCallback, opt_errorCallback);
    //fileEntry.moveTo(dirEntry, opt_newName, opt_successCallback, opt_errorCallback);
    //fileEntry.copyTo(dirEntry, opt_newName, opt_successCallback, opt_errorCallback);
    //fileEntry.getParent(successCallback, opt_errorCallback);
    //fileEntry.toURL(opt_mimeType);
    }, errorHandler);

  }

file.createWriter(function (fileWriter) {})

Answer 1

您可以尝试在获取 getMetadata 调用结果的回调中移动对 file.createWriter 的调用。这样，您将始终在继续调用创建文件之前检查大小。这个想法是您有一堆异步回调，您将它们“链接”在一起以执行您需要的处理流。如果您想了解更多信息，请在您选择的搜索引擎中查找“javascript 异步模式”。这是一个这样的页面”http://tech.pro/blog/1402/five-patterns-to-help-you-tame-asynchronous-javascript