定义对象的替代方法?对象字面量可以工作,但有冗余
好吧,我给自己做了一个小对象,用 JSON 来评估整个加载 jquery 的情况(事实上,我用它来加载我所有的 js 文件):
<script type="text/javascript">
/* Library loading object */
var ScriptLoader = {
//values
head_tag : document.getElementsByTagName('head')[0],
fallback : false,
//functions
createScript: function(script_path) {
var script_tag = document.createElement('script');
script_tag.type = 'text/javascript';
script_tag.src = script_path;
return script_tag;
},
addToHead : function(tag) {
ScriptLoader.head_tag.appendChild(tag);
},
addLoadEvent : function(func) {
var prev = window.onload;
if (typeof window.onload !== 'function') {
window.onload = func;
} else {
window.onload = function() {
prev();
func();
}
}
}
};
//Loading jquery, modernizr, and my js files when window is ready.
ScriptLoader.addLoadEvent(function() {
/* Load from jquery's cdn for speed + auto latest download */
var scripts = ['http://code.jquery.com/jquery-latest.min.js',
'scripts/modernizr.js',
'scripts/script.js'],
idx = 0;
for (; idx < scripts.length; idx++) {
ScriptLoader.addToHead(ScriptLoader.createScript(scripts[idx]));
}
});
//jquery fallback
ScriptLoader.addLoadEvent(function() {
if (typeof window.jQuery === undefined) {
ScriptLoader.fallback = true;
ScriptLoader.addToHead(ScriptLoader.createScript('scripts/jquery-mini-1.6.2.js'));
}
});
//grab info
(function() {
setTimeout(function() {
console.log('jquery loaded: ' + (window.jQuery !== undefined));
console.log('used fallback: ' + ScriptLoader.fallback);
}, 1000);
})();
现在,这已经完全正常工作了,但是注意到对我的对象名称的不断调用吗?有没有办法简单地使用 this 而不是那个?我有点了解整个功能级别的作用域,并且还意识到这被分配给最近的封闭函数,但我对此并不清楚。
我也简短地阅读了但不完全理解闭包。 。
谢谢 :)
Okay so I have made myself a small object to assess the whole loading jquery with a fallback thing (and have employed it to loading all my js files, infact), using JSON:
<script type="text/javascript">
/* Library loading object */
var ScriptLoader = {
//values
head_tag : document.getElementsByTagName('head')[0],
fallback : false,
//functions
createScript: function(script_path) {
var script_tag = document.createElement('script');
script_tag.type = 'text/javascript';
script_tag.src = script_path;
return script_tag;
},
addToHead : function(tag) {
ScriptLoader.head_tag.appendChild(tag);
},
addLoadEvent : function(func) {
var prev = window.onload;
if (typeof window.onload !== 'function') {
window.onload = func;
} else {
window.onload = function() {
prev();
func();
}
}
}
};
//Loading jquery, modernizr, and my js files when window is ready.
ScriptLoader.addLoadEvent(function() {
/* Load from jquery's cdn for speed + auto latest download */
var scripts = ['http://code.jquery.com/jquery-latest.min.js',
'scripts/modernizr.js',
'scripts/script.js'],
idx = 0;
for (; idx < scripts.length; idx++) {
ScriptLoader.addToHead(ScriptLoader.createScript(scripts[idx]));
}
});
//jquery fallback
ScriptLoader.addLoadEvent(function() {
if (typeof window.jQuery === undefined) {
ScriptLoader.fallback = true;
ScriptLoader.addToHead(ScriptLoader.createScript('scripts/jquery-mini-1.6.2.js'));
}
});
//grab info
(function() {
setTimeout(function() {
console.log('jquery loaded: ' + (window.jQuery !== undefined));
console.log('used fallback: ' + ScriptLoader.fallback);
}, 1000);
})();
Right now, this is fully working, but notice the constant calls to my object's name? Is there a way to simply just use this instead of that? I kind of get the whole functional-level scope only thing, and also realize that this gets assigned to the nearest enclosing function, but I'm not crystal clear on that..
I also breifly read on but don't fully understand closures..
Thanks :)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
否,因为
this
引用的是对象的实例,而不是对象模板。闭包只是从函数内部返回的函数,然后可以将其分配给新变量并像父函数一样执行。闭包保留了其原始函数父函数的范围,即使它的新赋值没有提及它。这就是闭包容易发生内存泄漏的原因,因为 ECMAScript 的垃圾收集器没有闭包分配的范围。
No because
this
refers to the instance of the object, not the object template.Closures are simply returned functions from within functions which can then be assigned to new variables and executed as if they were parent functions. The closure retains the scope of its original function parent even though there is no mention of it by its new assignment. This is why closures are prone to memory leaks, because ECMAScript's garbage collector has no scope of the closure assignments.