javascript - 我写了一些 killer 级的 Javascript。我怎样才能让它轻松地重复使用？

Question

我一直在研究 Chrome 文件存储 API。我构建了几个函数，它们一起自动下载 json 对象并将其存储为字符串。如果最后一个服务器请求是在 24 小时内完成的。我自动使用该文件的最新版本。我用它来管理一个巨大的数据转储，并对其进行统计分析。

整个系统只有一个功能需要暴露。这是getData。

目前所有这些函数都是全局变量。我该如何让这一切井然有序。

//This file will cache serverdata every day.
var onInitFs,
errorHandler,
fileSystemInit,
saveFile,
readFile,
fileSystem,
getData;


//request rights to save files to system.
fileSystemInit = function(){
    //Browser specific
    window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

    navigator.webkitPersistentStorage.requestQuota(1048*1048*256, function(grantedBytes) {
        //once approved (or if previously approved):
        window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
    }, function(e) {
    console.log('Error', e);
    });
};

//make filesystem global.
onInitFs = function(fs) {
    fileSystem = fs;
};
fileSystemInit();

saveFile = function(url, content, callback){
    var filename = makeFilename(url)
    if(!fileSystem){
        console.log('no filesystem registered')
        return;
    }
    fileSystem.root.getFile(filename, {create: true}, function(fileEntry) {

        fileEntry.createWriter(function(fileWriter) {
            var blob = new Blob([JSON.stringify(content)], {type: 'application/json'});
            fileWriter.write(blob);

            fileWriter.onwriteend = function(e) {
                console.debug('Write completed.', e);
                if(callback){
                    callback();
                }
            };

            fileWriter.onerror = function(e) {
                console.log('Write failed: ', e);
            };
        }, errorHandler);

    }, errorHandler);
};

readFile = function(url, callback){
    var filename = makeFilename(url)
    if(!fileSystem){
        console.log('no filesystem registered');
        return;
    }

    fileSystem.root.getFile(filename, {}, function(fileEntry){

        //this object reads files.
        var reader = new FileReader();
        //register callback for read files
        reader.onloadend =  function(e){
            var callbackValue = JSON.parse(this.result)
            callback(callbackValue);
        };
        //read file-function
        fileEntry.file(function(file){
            reader.readAsText(file);
        },errorHandler);

    },errorHandler);
};

makeFilename = function(url){
    return  url.replace(/\W/g, '') +'.json'
}

errorHandler = function(e) {
  console.log('Error: ', e);
};

getData = function(url, callbackNewData, callbackOldData){
    var lastDownloaded = localStorage.getItem(url+'lastDownloaded'),
    oneDay = 1000*60*60*24;
    //update data if the data is old.
    window.setTimeout(function(){
        if(!lastDownloaded || new Date()-new Date(lastDownloaded) > oneDay ){
            console.debug('downloading '+url);
            d3.json(url, function(data){
                localStorage.setItem(url+'lastDownloaded',new Date());
                console.debug('saving '+url);
                saveFile(url, data, function(){
                    callbackNewData(url);
                });
            });
        }else{
            callbackOldData(url);
        }

    }, 200);
};

Answer 1

您可以将整个事情包装在匿名函数中并仅公开 getData。这是最简单的方法。

var getDataFromUrl = function () {
  //This file will cache serverdata every day.
  var onInitFs,
  errorHandler,
  fileSystemInit,
  saveFile,
  readFile,
  fileSystem,
  getData;

  // Your original code here ...

  return getData; // This exposes the getData function.
})();

通过这种方式，您只公开了一个全局函数 getDataFromUrl，这正是公共(public) API。

对于更现代的用法，您可能需要查看 Common JS Modules和 Browserify ，它允许您在浏览器和 NodeJS 中进行 exports 和 require 操作。还有一个UMD Pattern用于导出库。