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 相关文章推荐
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
mpvue 单文件页面配置详解
Dec 02 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中去掉字符串首尾空格的方法
2012/05/19 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
Python学习笔记之os模块使用总结
2014/11/03 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
销售副总经理岗位职责
2013/12/11 职场文书
说明书怎么写
2014/05/06 职场文书
入股合作协议书
2014/10/12 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS