javascript匿名函数中的'return function()'作用
我最近看到很多javascript代码,看起来我错了.在这种情况下,我应该建议哪种更好的代码模式？我将重现我所看到的代码和每个代码的简短说明：
代码块#1
该代码不应该评估内部函数.程序员会因为代码应该运行而感到困惑.
$(document).ready( function() {
return function() {
/* NOPs */
}
});
代码块#2
程序员可能打算实现一个自调用功能.他们没有完全完成实现(他们在嵌套括号的末尾缺少一个().另外,由于它们在外部函数中没有做任何事情,所以嵌套的自调用函数可以刚刚嵌入到外部功能定义.
其实我不知道他们打算使用自调用函数,因为代码仍然是错误的.但似乎他们想要一个自我调用的功能.
$(document).ready( (function() {
return function() {
/* NOPs */
}
}));
代码块#3
再次,程序员似乎试图使用自调用函数.但是,在这种情况下,它是过度的.
$(document).ready( function() {
(return function() {
/* NOPs */
})()
});
代码块#4
一个示例代码块
$('#mySelector').click( function(event) {
alert( $(this).attr('id') );
return function() {
// before you run it, what's the value here?
alert( $(this).attr('id') );
}
});
评论：
我想我只是沮丧,因为它会导致人们不明白的蠕虫,更改范围界定,他们不是grokking,并通常使真正奇怪的代码.这些都是来自某些教程的地方吗？如果我们要教人们如何编写代码,我们可以教他们正确的方法吗？
你会建议什么作为一个准确的教程向他们解释为什么他们使用的代码是不正确的？你会建议他们学习什么模式？
我看到的所有使我提出这个问题的样本都是这样的问题.这是我遇到的最新的特征片段,展示了这种行为.你会注意到,我没有发布一个链接的问题,因为用户似乎是相当新手.
$(document).ready(function() {
$('body').click((function(){
return function()
{
if (counter == null) {
var counter = 1;
}
if(counter == 3) {
$(this).css("background-image","url(3.jpg)");
$(this).css("background-position","10% 35%");
var counter = null;
}
if(counter == 2) {
$(this).css("background-image","url(2.jpg)");
$(this).css("background-position","10% 35%");
var counter = 3;
}
if(counter == 1) {
$(this).css("background-image","url(1.jpg)");
$(this).css("background-position","40% 35%");
var counter = 2;
}
}
})());
});
以下是我建议他们重写代码的方法：
var counter = 1;
$(document).ready(function() {
$('body').click(function() {
if (counter == null) {
counter = 1;
}
if (counter == 3) {
$(this).css("background-image", "url(3.jpg)");
$(this).css("background-position", "10% 35%");
counter = 1;
}
if (counter == 2) {
$(this).css("background-image", "url(2.jpg)");
$(this).css("background-position", "10% 35%");
counter = 3;
}
if (counter == 1) {
$(this).css("background-image", "url(1.jpg)");
$(this).css("background-position", "40% 35%");
counter = 2;
}
});
});
请注意,我并不是说我的代码在任何方面都更好.我只是删除匿名中介功能.我实际上知道为什么这个代码最初没有做他们想要的,而且我并没有重写大家的代码,但是我确实想要这个代码至少有可用的代码.
我认为一个真正的代码示例将不胜感激.如果你真的想要这个特定问题的链接,请给我这个昵称.他得到了几个非常好的答案,其中我的中档最好.
你的第一个例子是奇怪的.我甚至不知道这是否会以作者可能打算的方式工作.第二个简单地将第一个包装在不必要的括号中.第三个使用自调用函数,尽管由于匿名函数创建了自己的范围(可能还有一个闭包),我不知道它有什么好处(除非作者在闭包中指定了其他变量 – 读取).
自调用函数采用模式(函数f(){/ * do stuff * /}()),并且被立即评估,而不是调用它.所以这样的事情
var checkReady = (function () {
var ready = false;
return {
loaded: function () { ready = true; },
test: function () { return ready; }
};
}())
$(document).ready(checkReady.loaded);
创建一个封装,将返回的对象作为checkready返回到变量ready(它从闭包之外的一切隐藏).这将允许您通过调用checkReady.test()来检查文档是否已加载(根据jQuery).这是一个非常强大的模式,并且具有很多合法用途(命名空间,记忆,元编程),但在您的示例中并不是必需的.
编辑：阿尔,我误解了你的问题.没有意识到你正在呼吁不好的做法,而不是要求澄清模式.更多关于您询问的最终形式的问题：
(function () { /* woohoo */ }())
(function () { /* woohoo */ })()
function () { /* woohoo */ }()
总结
以上所述是小编给大家介绍的javascript匿名函数中的'return function()'作用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
下面小编就为大家带来一篇window.open不被拦截的简单实现代码(推荐) 。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
JavaScript中数组的方法种类众多，在ES3-ES7不同版本时期都有新方法；并且数组的方法还有原型方法和从object继承的方法，本文介绍了JavaScript数组及非数组对象的深浅克隆，希望读者能从中有所收获2021-10-10
在这篇文章中给大家分享了关于JavaScript实用代码小技巧的相关内容，有兴趣的朋友们可以参考学习下。2018-08-08
这篇文章主要介绍了webpack多页面开发实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
今天小编就为大家分享一篇layui表格设计以及数据初始化详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了JavaScript中最简洁的编码html字符串的方法,非常非常简洁的一个方法,小编亲测可用,需要的朋友可以参考下2014-10-10
当大家使用window.onload执行一个函数时，必须要等到页面上的图片等信息全部加载完毕之后才执行的。但很多时候图片的数量比较多，所以需要很多时间下载。更令人尴尬的是，当网页文档（或者说Dom）已经加载完毕,而图片尚未加载完毕，很多用户已经开始浏览网页，但这时很多由window.onload所触发的函数不能执行，这就导致一部分功能不能完美地给用户使用，更严重的是会给用户留下不好的印象！2008-05-05
这篇文章主要介绍了微信小程序生成分享海报方法（附带二维码生成），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要为大家详细介绍了微信小程序日历组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
传递信息到服务器，从服务器获取信息，是前端发展的重中之重，尤其是现在前后端分离的大前提下，前后端的数据交互是前端的必修科目了，下面这篇文章主要给大家介绍了关于JavaScript利用fetch实现异步请求的相关资料，需要的朋友可以参考借鉴。2017-07-07
最新评论