东旗极限

不使用 JS 匿名函数的三个理由

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

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

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

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

今天我尝试让大家理解只有在需要的情况下才使用匿名函数的想法。匿名函数不应该是优选,而且你自己也应该知道为什么使用它。当理解这种想法之后,你的代码会变得更简洁,更容易维护,并且更容易跟踪bug。

先从避免使用匿名函数的三个理由开始:

无论你多么擅长写代码,出现错误也是不可避免的。有时候,这些错误很容易被查出,有时候并不容易。

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

假设现在有一个非常简单的项目:

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

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

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

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

但是..一旦我们解决了这个问题,就会发现还有另一个bug。 这次是一位更资深的开发人员介绍的。这个人知道lambdas(匿名函数),并在代码中大量使用它们。 结果他们偶然发现了一个bug,我们的工作就是追踪它。

下面是代码:

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

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

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

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

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

可读性

咦,我听说你还不信。你仍旧对你的匿名函数恋恋不舍,并且还从未发生过bug。我的错,你的代码是完整的。但是让我们看看这个!

看看下面两段代码:

function initiate (arguments){returnnewPromise((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){returnnewPromise(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只是指向了发生所有事情的函数。

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

可重用性

你注意到上一个例子了吗?上个例子中的函数的使用范围从参数和初始化函数,变为让所有函数都能使用。

当你使用匿名函数时这些函数很难在你的应用程序内重复使用。

可重用性将不复存在,终你会一遍又一遍地写重复的代码。正如我们所见的,代码写的越少引入的Bug就越少,用户必须加载的内容就越少。所有人都会因此获益!

相反的,命名函数可以全局使用,而不需要像变量一样到处传递。你的代码的可重用性会更好,

匿名函数有可取的地方吗?

有。虽然很不愿意承认,但有时候使用匿名函数是较好的选择。

const stuff =[{ hide:true, name:'justin'},{ hide:false, name:'lauren'},{ hide:false, name:'max'},];const filteredStuff = stuff.filter(s =>!s.hide);

上边代码中的匿名函数s => !s.hide非常简单,即使不能在别的地方使用也不会对别人有任何影响,而且也可以在stuff.filter中显示出堆栈调用。如果想要重用这段代码,较好重用整段代码:

function filterByHide (array){return array.filter(item =>!item.hide);}

有时你想把你所有的代码封装到匿名函数中,以保证全局范围不会被污染。

(()=>{... your code here ...})();

在栈空间中拥有一个优质的匿名函数真得不会有什么错误。没有代码重用是痛苦的,因为完整的目的是保持方法内含。



首页            热门课程             职业路径             实战课程             文章问答