javascript匿名函数中的'return function()'作用


Posted in Javascript onOctober 15, 2018

我最近看到很多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()'作用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
二级域名转向类
Nov 09 Javascript
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
Vue 同步异步存值取值实现案例
Aug 05 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 #Javascript
Vue-Router基础学习笔记(小结)
Oct 15 #Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 #Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 #Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 #Javascript
vue+axios+promise实际开发用法详解
Oct 15 #Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 #Javascript
You might like
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
生产部厂长助理职位说明书
2014/03/03 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python