为什么不使用 JS 匿名函数

本文主要给大家分析了不使用js匿名函数的三大理由,匿名函数的作用是避免全局变量的污染以及函数名的冲突,关于js匿名函数的三大理由大家参考下本文,希望能帮助到大家。

匿名函数的基本形式为(function(){…})();

前面的括号包含函数体,后面的括号就是给匿名函数传递参数并立即执行之

匿名函数的作用是避免全局变量的污染以及函数名的冲突

无论你在什么时候读代码,您都必须注意到匿名函数。有时它们被称为 lambda,有时是匿名函数,不管怎样,我认为他们是不好使用的。

如果你不知道匿名函数是什么,这里有一个引语:

匿名函数是一种在运行时动态声明的函数。它们之所以被称为匿名函数是因为不同于普通函数,它们并没有函数名 。 — Helen Emerson, Helephant.com

匿名函数形式如下:

function () { ... code ... }OR(args) => { ... code .. }

登录后复制

我今天尝试让大家理解通常情况下只有在绝对需要的情况下才使用匿名函数的想法。匿名函数不应该是首选,而且应该知道原因情况下使用。当理解这种想法之后,你的代码会变得更简洁,更容易维护,并且更容易跟踪bug。先从避免使用匿名函数的三个理由开始:

你写代码的时候, 无论你多么擅长敲代码, 总是会碰到错误。有时候,这些错误很容易被查出,有时候并不容易。

如果你知道这些错误来自哪里,那么错误很容易会被查出来。为了查出错误,我们使用这个被叫做堆栈轨迹的工具。如果你不了解 堆栈轨迹 ,goole给出了很棒的介绍。

假设现在有一个非常简单的工程:

function start () { (function middle () { (function end () {  console.lg('test'); })() })()}

登录后复制

上面代码里面有一个非常愚蠢的错误,拼写错误(console.log)。在小工程里面,这个拼写错误不是什么大问题。 如果这是一个有非常多模块非常大的工程的一小段,问题就大了。假设这个愚蠢的错误不是你犯的,那么新来的初级工程师将会在他休假之前把这个错误提交到代码库!

现在,我们必须追查。 使用我们精心命名的函数, 我们得到如下的堆栈跟踪:

谢谢你命名你的函数 ,初级开发者们! 现在我们可以轻松地追踪到这个bug。

但是..一旦我们解决了这个问题, 就会发现 还有另一个bug。 这次是一位更资深的开发人员介绍的。这个人知道 lambdas
结果他们偶然发现了一个bug,我们的工作就是追踪它。

下面是代码:

(function () { (function () { (function () {  console.lg('test'); })(); })();})();

登录后复制

吃不吃惊,这名开发者也忘记了如何拼写console.log了!这也太巧合了吧!令人感到遗憾的是,他们都没有命名他们的函数。

那么控制台会输出什么呢?

好吧,我们至少还有行号,对吧?在这个例子中,看起来我们有大约7行代码。如果我们处理一大段代码会如何呢?比如一万行代码?行号的跨度如此之大该怎么办呢?如果代码被折叠后有没有一个代码地图文件,那么对行号的渲染是不是根本就是没有什么用了呢?

我想对这些问题的回答相当简单,答案就是:想这些会让你一整天都会过的相当糟心。

可读性

咦,我听说你还不信。你仍旧对你的匿名函数恋恋不舍,并且还从未发生过bug。那么我得向你道歉,你认为你的代码是完美的。让我们看看这个!

看看下面两段代码:

function initiate (arguments) { return new Promise((resolve, reject) => { try {  if (arguments) {   return resolve(true);  }  return resolve(false); } catch (e) {  reject(e); } });}initiate(true) .then(res => {  if (res) {   doSomethingElse();  } else {   doSomething();  } ).catch(e => {   logError(e.message);   restartApp();   } );

登录后复制

这是一个非常不正常的例子,但是我相信你已经明白我要说什么 了。我们的方法返回了一个promise,我们用这个promise对象/方法处理不同可能的 响应。

你也许会认为几段代码读起来并不难,但我认为它们可以变得更好!

如果我们去掉所有的匿名函数会怎样呢?

function initiate (arguments) { return new Promise(checkForArguments);}function checkForArguments (resolve, reject) { try { if (arguments) {  return resolve(true);  } return resolve(false); } catch (e) { reject(e); }}function evaluateRes (res) { if (res) { doSomethingElse(); } else { doSomething(); }}function handleError (e) { logError(e.message); restartApp();}initiate(true) .then(evaluateRes) .catch(handleError);

登录后复制

好,先讲清楚:这部分代码更长,但我认为其不仅仅是有更多的可读性!我们精心命名的函数与匿名函数不一样,只要我们一看到它们的名字就知道它们的功能是什么。这避免了在评估代码时的障碍。

这也有助于分清楚其中的关系。与创建一个方法、将其传递、然后运行逻辑不同,在第二个例子中的参数被给到了then,catch只是指向了发生所有事情的函数。

关于更具有可读性,我没有什么再能说服你的了。但是也许你还没被说服的话,我可以试一下最后的论据。

相关推荐:

js给按钮循环设置匿名函数的问题

js给按钮循环设置匿名函数的问题

js给按钮循环设置匿名函数的问题

以上就是为什么不使用 JS 匿名函数的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2790796.html

(0)
上一篇 2025年3月8日 19:01:46
下一篇 2025年3月8日 19:01:56

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Vue.js 组件中的v-on绑定自定义事件

    本文主要介绍了浅谈vue.js 组件中的v-on绑定自定义事件理解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 每个 Vue 实例都实现了事件接口(Events interface),即:…

    2025年3月8日
    200
  • js毫秒如何转时分秒

    本文主要为大家分享一篇js 毫秒转天时分秒的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。 实例如下所示: formatDuring: function(mss) { var days = pars…

    编程技术 2025年3月8日
    200
  • Vue.js与 ASP.NET Core 服务端渲染功能

    在前端使用 vue.js,vue 服务端渲染直到第二个版本才被支持。 在本例中,我想展示如何将 vue.js  服务端渲染功能整合 asp.net core。 我们在服务端使用了 microsoft.aspnetcore.spaservic…

    2025年3月8日
    200
  • threeJS实现星空粒子移动效果实例分享

    本文主要为和家详细介绍了使用3d引擎threejs实现星空粒子移动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Thr…

    2025年3月8日
    200
  • vue.js项目打包上线的图文讲解

    本文主要为大家分享一篇vue.js项目打包上线的图文教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。 最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问…

    2025年3月8日
    200
  • Three.js基础入门学习教程

    本文主要为大家详细介绍了three.js基础学习教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 一、Three.js官网及使用Three.js必备的三个条件 1.Three.js 官网 https://three…

    2025年3月8日 编程技术
    200
  • js函数的按值传递参数

    本文主要为大家分享一篇js的函数的按值传递参数的实例,具有很好的参考价值,一起跟随小编过来看看吧,希望对大家有所帮助,希望能帮助到大家。 js的函数传参的方式是按值传递,正常情况下,改变函数参数的值,并不会对函数外部的变量造成影响。例如: …

    编程技术 2025年3月8日
    200
  • javascript函数的节流throttle与防抖debounce详解

    本文主要介绍了javascript函数的节流[throttle]与防抖[debounce ],详细的介绍了节流与防抖的原理和示例,具有一定的参考价值,有兴趣的可以了解一下,希望能帮助到大家。 防抖和节流 窗口的resize、scroll,输…

    编程技术 2025年3月8日
    200
  • PM2将Node.js的集群变得更加容易的实现方法

    本文主要介绍了详解如何使用pm2将node.js的集群变得更加容易,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 介绍 众所周知,Node.js运行在Chrome的JavaScript运行时…

    2025年3月8日
    200
  • vuejs实现本地数据的筛选分页功能

    做项目需要一份根据本地数据的筛选分页功能,下面小编把vuejs实现本地数据的筛选分页功能的实现思路分享到脚本之家平台,需要的朋友可以参考下,希望能帮助到大家。 效果图: 项目需要:点击左侧进行数据筛选,实现自动分页,自动生成页数,点击自动跳…

    2025年3月8日
    200

发表回复

登录后才能评论