不使用 JS 匿名函数理由


Posted in Javascript onNovember 17, 2017

匿名函数的基本形式为(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 匿名函数的理由,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
js操作iframe父子窗体示例
May 22 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 #Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 #Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 #Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 #Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 #Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 #Javascript
JS实现的数组去除重复数据算法小结
Nov 17 #Javascript
You might like
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
JS中 用户登录系统的解决办法
2013/04/15 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python3学生名片管理v2.0版
2018/11/29 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
清洁工岗位职责
2014/01/29 职场文书
校园绿化美化方案
2014/06/08 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
毕业设计论文评语
2014/12/31 职场文书
党小组考察意见
2015/06/02 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
《所见》教学反思
2016/02/23 职场文书