我正在创建一个独立的 javascript 实用程序对象,用于检测高级浏览器功能。理想情况下,我的对象看起来像这样:
Support = {
borderRadius : false, // values returned by functions
gradient : false, // i am defining
dataURI : true
};
我当前的问题涉及我从Weston Ruter 的站点改编的一些代码,该站点检测到 dataURI 支持。它尝试使用 javascript 创建带有 dataURI 源的图像,并使用 onload/onerror 回调来检查宽度/高度。由于 onload 是异步的,因此我失去了作用域并且返回 true/false 不会将 true/false 分配给我的对象。
这是我的尝试:
Support = {
...
dataURI : function(prop) {
prop = prop; // keeps in closure for callback
var data = new Image();
data.onload = data.onerror = function(){
if(this.width != 1 || this.height != 1) {
prop = false;
}
prop = true;
}
data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
return -1;
}(this)
};
我立即执行匿名函数,传递它(我希望它是对 Support.dataURI 的引用),但不幸的是引用了窗口对象——所以值总是-1。我可以通过使用外部定义的函数在创建 Support 对象后分配值来使其工作......但我不认为那样很干净。有没有办法让它自成一体?对象字面量的函数可以引用它分配给的属性吗?
编辑-----------------------------------
不完全是我的问题的答案(如措辞)所以我'我不会发布额外的答案,但是......我决定使用单例对象而不是对象文字。这是工作代码:
Support = new function Support() {
var that = this;
this.dataURI = function() {
var data = new Image();
data.onload = data.onerror = function(){
if(this.width != 1 || this.height != 1) {
that.dataURI = false;
} else {
that.dataURI = true;
}
}
data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
return that.dataURI;
}();
};