当前位置: 首页 > 科技观察

编写更简洁的JavaScript代码的十个技巧_1

时间:2023-03-18 20:53:04 科技观察

近年来,随着众多框架的推出,涵盖从后端、Web前端到跨平台移动应用程序,甚至游戏的方方面面,Javascript的流行度达到了一个很高的水平。高水平。编写干净易读的代码是构建业务逻辑之后最重要的事情之一。根据我与多个组织、初创公司和项目合作的经验,我可以保证处理糟糕的代码是一场噩梦。它减慢了开发过程,延迟了发布,并使使用它的开发人员感到沮丧。因此,我们需要编写一些干净且可读的代码。在今天的内容中,我将与大家分享一些我编写干净代码的基本技巧,希望对大家有所帮助。现在让我们开始吧。1.变量名——保留它们的意义你的变量名应该清楚地解释它们的用途。此外,避免混淆首字母缩略词和难以发音的单词。我不知道如何强调这一点,让我们看下面的例子://Badconstyyyymmdstr=moment().format("YYYY/MM/DD");//GoodconstcurrentDate=moment().format("YYYY/MM/DD");2.变量名——保持可搜索性虽然有些文章会告诉你在可以使用单态形式时不要创建变量,但不应该扩展为使用常量,这会使代码更清晰难以阅读和搜索。此外,正确的做法是将它们存储在const变量中并使用CONSTANT_CASE来命名变量。例如,看看这个片段://86400000到底是什么?setTimeout(blastOff,86400000);//将它们声明为大写的命名常量.constMILLISECONDS_PER_DAY=60*60*24*1000;//86400000;setTimeout(blastOff,MILLISECONDS_PER_DAY);3.避免变量的心理映射最好在array.forEach()中显式命名变量,而不是使用以后可能没有意义的简写。//BADconstlocations=["Austin","NewYork","SanFrancisco"];位置。forEach(l=>{doStuff();doSomeOtherStuff();//...//...//...//等等,`l`又是什么?dispatch(l);});//GOODconstlocations=["Austin","NewYork","SanFrancisco"];位置。forEach(location=>{doStuff();doSomeOtherStuff();//...//...//...dispatch(location);});4.如果类名或对象名已经告诉您它代表什么,请避免不必要的上下文,不要将该信息再次添加到您的变量名中。在下面的示例中,由于我们已经知道我们在谈论Car或paintCar,因此您无需在变量中再次提及上下文的Car。//BADconstCar={car??Make:"Honda",carModel:"Accord",carColor:"Blue"};functionpaintCar(car,color){car??.carColor=color;}//GOODconstCar={make:"Honda"}",model:"Accord",color:"Blue"};functionpaintCar(car,color){car??.color=color;}5.在函数中使用默认参数以避免在函数中使用短路或条件来保持它更清洁。更重要的是,请记住你的函数只会为未定义的参数提供值,默认值不会替换任何其他假值。//BADfunctioncreateMicrobrewery(name){constbreweryName=name||“时髦啤酒公司”;//...}//GOODfunctioncreateMicrobrewery(name="HipsterBrewCo."){//...}6.明智地使用函数参数根据经验,尝试将函数参数的数量限制为2个或最多3个。如果它需要那么多参数,则您的函数可能做得太多了。但是,如果您仍然需要它,请使用JavaScript对象作为参数。为了使函数期望的属性一目了然,可以使用ES6解构语法。//BADfunctioncreateMenu(title,body,buttonText,cancelable){//...}createMenu("Foo","Bar","Baz",true);//好functioncreateMenu({title,body,buttonText,cancellable}){//...}createMenu({title:"Foo",body:"Bar",buttonText:"Baz",cancelable:true});7.一个函数应该做一件事不要忘记函数的作用——给你的代码增加模块化。每个只执行一项任务的较小函数将确保您的代码易于编写、测试和理解。切勿为单个功能设置多个目标。//BADfunctionemailClients(clients){clients.forEach(client=>{constclientRecord=database.lookup(client);if(clientRecord.isActive()){email(client);}});}//好的函数emailActiveClients(客户){clients.filter(isActiveClient).forEach(email);}functionisActiveClient(client){constclientRecord=database.lookup(client);returnclientRecord.isActive();}8.函数名——让它们有含义确保写下函数名以清楚说明函数的作用。模棱两可的函数名称意味着读者必须查看函数定义和逻辑才能理解它们的作用。//BADfunctionaddToDate(date,month){//...}constdate=newDate();//从函数名很难判断添加了什么addToDate(date,1);//GOODfunctionaddMonthToDate(month,date){//...}constdate=newDate();addMonthToDate(1,date);9.避免重复代码——让代码更短更简洁是在一堆相同或相似行的多个代码段中最痛苦的事情。我们都去过那里。这通常是因为某些逻辑在2个或更多地方的实现略有不同。但是,想想如果有人在逻辑中发现错误,现在他们必须到处修复它,那将是一场噩梦。10.不要使用标志作为函数参数为什么需要标志作为函数参数?您的功能只是出于一个明显的原因而做多件事。从第7点,您知道这是不好的做法。因此,继续将您的功能一分为二。//BADfunctioncreateFile(name,temp){if(temp){fs.create(`./temp/${name}`);}else{fs.create(名称);}}//GOODfunctioncreateFile(name){fs.create(name);}functioncreateTempFile(name){createFile(`./temp/${name}`);}总结以上就是我分享给大家的基本技巧关于我写干净代码,希望这10个基本技巧可以帮到你,如果你觉得有用,请记得点赞,关注我,分享给你的朋友,说不定能帮到他。