0

所以这是我的代码

function dl(name){
 this.name=name;
 this.getInfo();
};
dl.prototype={
 getInfo:function(){
  this.x=new XMLHttpRequest;
  this.x.open('GET',this.name);
  this.bind=this.setInfo.bind(this);
  this.x.addEventListener('load',this.bind,false);
  this.x.send();
 },
 setInfo:function(){
  this.info=this.x.response;
  this.x.removeEventListener('load',this.bind,false);
  delete this.bind;
  delete this.x;
  this.insertDOM();
 }
};

我使用function dl(){}方法是因为我想使用this.

我使用prototype是因为当我创建很多时new dl(SOMEURL)它不会触及内存。

但是是的，因为它内部有许多 xhr2 函数，我需要找到正确返回所有内容的最佳方法。

所以通常使用 xhr2 是美妙的......

function ajax(a,b,c){ //url,function,placeholder
 c=new XMLHttpRequest;c.open('GET',a);c.onload=b;c.send();
}    
//example onload function    
function b(){ //don't even need event....
 console.log(this.response)
}

好：我只传递函数引用（没有参数，这并不奇怪，我是 vars ..）

坏：在课堂上我失去了this指向我的课堂的指针

所以我开始在我的班级中定义 xhr 对象

this.x=new XMLHttpRequest;

并用于bind将其传递给我的下一个函数 this.setInfo

但是稍后要删除事件侦听器，我需要定义一个包含绑定函数的新变量。

this.bind=this.setInfo.bind(this);

我真的很讨厌那个。（我正在尝试使用尽可能多的变量并使用低内存）

我什至不知道这是否真的消除了事件。

我正在考虑的其他解决方案是将 this 引用到 xhr2 对象。

function dl(name){
 this.name=name;
 this.getInfo(this.name);
};
dl.prototype={
 getInfo:function(){
  var x=new XMLHttpRequest;
  x.that=this;
  x.open('GET',this.name);
  x.addEventListener('load',this.setInfo,false);
  x.send();
 },
 setInfo:function(){
  this.that.info=this.response;
  this.removeEventListener('load',this.setInfo,false);
  this.that.insertDOM();
  delete this.that;
 }
};

A. 只是this.that参考还是填满了记忆？

我需要确保在每个函数之后我删除/清除我不再需要的每个 var 来帮助垃圾收集器。

B. 编写这种类型的javascript类有更好的解决方案吗？

ps.：是否有更优雅的方式来初始化 dl 中的第一个函数？

这堂课是干什么用的？？

它是 chrome 的下载管理器

这个怎么运作？？

我将下载链接放入input字段中

该类将 a 添加new dl(SOMEURL)到数组中

使用 php cUrl 脚本检索文件信息。

将文件信息存储在类中

并执行另一个 xhr 并根据文件的大小检索文件的第一个块。

该块将附加到window.webkitrequestfilesystem先前创建的文件中。

然后它继续循环 xhr 请求，直到所有块都被下载并附加到文件系统。

将文件偏移状态保存到window.LocalStorage让我有机会稍后恢复下载。

4

2 回答 2

1

好的，我已经让脚本工作了，但我改变了一些东西。首先，我使用 put x.that 并将其替换为可在 onreadystatechange 事件中使用的局部变量（实例）。其次，我添加了一个 onreadystatechange 事件，允许您在加载 ajax 请求时运行一个函数，我还修改了事件侦听器以便它们可以工作，但我建议使用 onreadystatechange。第三，我添加了一些东西来测试，代码可以在 Chrome 上运行。最后，我更改了 setInfo 以便它将 ajax 请求的响应作为参数。我认为这就是我所做的一切，所以代码如下：

function dl(name){
    this.name = name;
    this.getInfo(this.name);
};
dl.prototype = {
    getInfo:function(){
        var instance = this;
        var x = new XMLHttpRequest();
        x.open('GET', this.name, false);

        // onreadystatechange event
        x.onreadystatechange = function(){
            if(x.readyState == 4){
                if(x.status == 200){
                    instance.setInfo(x.responseText);
                } else {
                    /*
                        there was a network failure 
                        (File Not Found, Internal Server Error ...)
                    */
                }
            }
        }

        // if you really want to use event the listeners you had previously:
        this.request = x;
        x.addEventListener('load', function(){
            instance.setInfo(x.responseText);
        } ,false);

        x.send();
    },
    setInfo:function(response){
        this.info = response;

        // if you used the event listeners
        this.request.removeEventListener('load', function(){
            instance.setInfo(x.responseText);
        } ,false);
        delete this.request;

        // this.insertDOM();
        // I just added this for testing purposes only
        document.body.innerHTML = this.info;
    }
};

// added for testing
window.addEventListener("DOMContentLoaded", function(){
    var dlTest = new dl("filetoget")
}, false);

希望这可以帮助。

于 2013-08-06T23:10:07.710 回答
1

这是新代码：

function dl(name, callback) {
    this.name = name;
    this.callback = callback;
    this.getInfo();
}
dl.prototype = {

 getInfo:function(){
  var x=new XMLHttpRequest;
  x.that=this;
  x.open('GET',this.name,false);
  x.addEventListener('load',this.setInfo,false);
  x.send();
 },
 setInfo:function(){
  this.that.info=this.response;
  this.removeEventListener('load',this.setInfo,false);
  //this.that.insertDOM();  
  // when you need to refer back
     this.that.callback(this.responseText);

  delete this.that;
 }   
}

function call() {
    var a = 1;
    var b = 2;

    new dl("filetoget", function (response) {
        console.log(a + b);
        console.log(response);
    });
}

call();
于 2013-08-06T23:58:51.757 回答