所以这是我的代码
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)
}
好:我只传递函数引用(没有参数,没有奇怪的,我的变量..)
错:在课堂上我松开了this
指向我班级的指针
所以我开始在我的类中定义xhr对象
this.x=new XMLHttpRequest;
并使用bind
在我的下一个函数this.setInfo
但是为了稍后删除eventlistener,我需要定义一个包含绑定函数的新变量。
this.bind=this.setInfo.bind(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
字段
该类将new dl(SOMEURL)
添加到数组
使用php cUrl脚本检索文件信息。
将文件信息存储在类
中并执行另一个xhr,根据文件的大小检索文件的第一个块。
该块将附加到先前创建的window.webkitrequestfilesystem
文件中。
然后它继续遍历xhr请求,直到所有块都被下载并附加到文件系统。
将文件偏移状态保存到window.LocalStorage
使我有机会稍后恢复下载。
答案 0 :(得分:1)
好的,我已经让脚本工作了,但我改变了一些东西。首先,我把put.xhat替换为可以在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);
希望这有帮助。
答案 1 :(得分: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();