不使用 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 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
js 获取时间间隔实现代码
May 12 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
解决Layui数据表格的宽高问题
Sep 28 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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
php防盗链的常用方法小结
2010/07/02 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
制作特殊字的脚本
2006/06/26 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
微信小程序  modal弹框组件详解
2016/10/27 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
Python中相见恨晚的技巧
2021/04/13 Python
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android