怎么自己建网址:怎么写出优雅的 JS 代码,变量和函数的正确写法
本文摘要: 在开发中,变量名,函数名一般要做到明晰明了,尽量做到看名字就可以让人知道你的意图,所以变量和函数命名是挺重要,今天来看看假如较优雅的方式给变量和函数命名。变量使用有意义和可发音的变量名// 欠好的写法const yyyymmdst
在开发中,变量名,函数名一般要做到明晰明了,尽量做到看名字就可以让人知道你的意图,所以变量和函数命名是挺重要,今天来看看假如较优雅的方式给变量和函数命名。

变量

使用有意义和可发音的变量名

// 欠好的写法const yyyymmdstr = moment().format("YYYY/MM/DD");// 好的写法const currentDate = moment().format("YYYY/MM/DD");

对同一类型的变量使用相同的词汇

// 欠好的写法getUserInfo();getClientData();getCustomerRecord();// 好的写法getUser();

使用可查找的名字


我们读的会比我们写的多得多,所以假如命名太过随意不只会给后续的维护带来困难,也会伤害了读我们代码的开发者。让你的变量名可被读取,像buddy.js 和 ESLint 这样的东西可以协助辨认未命名的常量。
// 欠好的写法// 86400000 的用处是什么?setTimeout(blastOff, 86400000);// 好的写法const MILLISECONDS_IN_A_DAY = 86_400_000;setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

使用解释性变量


防止费脑的猜想


显式用于隐式

无需添加没必要要的上下文


假如类名/对象名现已说明了,就无需在变量名中重复。

使用默许参数替代逻辑或(与)运算


函数

函数参数(抱负状况下为2个或更少)


限制函数参数的数量对错常重要的,因为它使测试函数变得更容易。假如有三个以上的参数,就会导致组合爆炸,有必要用每一个单独的参数测试很多不同的状况。

一个或两个参数是抱负的状况,假如可能,应防止三个参数。除此之外,还应该合并。大大都状况下,大于三个参数可以用对象来替代。

函数应该只做一件事


这是现在为止软件工程中最重要的规则。当函数做不止一件事时,它们就更难组合、测试和推理。可以将一个函数阻隔为一个操作时,就能够很容易地重构它,代码也会读起来更明晰。

函数名称应说明其作用


函数应该只有一个笼统层次


当有一个以上的笼统层次函数,意味该函数做得太多了,需要将函数拆分可以完成可重用性和更简略的测试。





删除重复的代码


尽量防止重复的代码,重复的代码是欠好的,它意味着假如我们需要更改某些逻辑,要改很多当地。

通常,有重复的代码,是因为有两个或多个稍有不同的事物,它们有很多一同点,可是它们之间的差异迫使我们编写两个或多个独立的函数来完成许多相同的事情。 删除重复的代码意味着创建一个仅用一个函数/模块/类就能够处理这组不同事物的笼统。

取得正确的笼统是至关重要的,这就是为何我们应该遵循类部分中列出的「SOLID原则」。糟糕的笼统可能比重复的代码更糟糕,所以要当心!说了这么多,假如你能做一个好的笼统,那就去做吧!不要重复你自己,不然你会发现自己在任何时分想要改变一件事的时分都要更新多个当地。

「设计模式的六大原则有」
  • Single Responsibility Principle:单一职责原则
  • Open Closed Principle:开闭原则
  • Liskov Substitution Principle:里氏替换原则
  • Law of Demeter:迪米特法则
  • Interface Segregation Principle:接口阻隔原则
  • Dependence Inversion Principle:依赖倒置原则

把这六个原则的首字母联合起来(两个 L 算做一个)就是 SOLID (solid,安稳的),其代表的意义就是这六个原则结合使用的优点:建立安稳、活络、强健的设计。下面我们来分别看一下这六大设计原则。

「欠好的写法」



「好的写法」

使用Object.assign设置默许对象


「欠好的写法」


「好的写法」


不要使用标志作为函数参数


标志通知使用者,此函数可以完成多项使命,函数应该做一件事。假如函数遵循基于布尔的不同代码途径,请拆分它们。


防止反作用(第一部分)


假如函数除了承受一个值并返回另外一个值或多个值以外,不执行任何其他操作,都会发生反作用。反作用多是写入文件,修正某些全局变量,或者不当心将你的所有资金都汇给了生疏人。

「欠好的写法」



「好的写法」


防止反作用(第二部分)


在JavaScript中,原始类型值是按值传递,而对象/数组按引用传递。关于对象和数组,假如有函数在购物车数组中进行了更改(例如,通过添加要购买的商品),则使用该购物车数组的任何其他函数都将遭到此添加的影响。那可能很棒,可是也可能欠好。来想象一个糟糕的状况:

用户单击“购买”按钮,该按钮调用一个purchase 函数,接着,该函数发出一个网络请求并将cart数组发送到效劳器。因为网络连接欠好,purchase函数有必要不断重试请求。现在,假如在网络请求开始之前,用户不当心点击了他们实践上不需要的项目上的“添加到购物车”按钮,该怎么办?假如发生这种状况,并且网络请求开始,那么购买函数将发送意外添加的商品,因为它有一个对购物车数组的引用,addItemToCart函数通过添加修正了这个购物车数组。

一个很好的解决方案是addItemToCart总是克隆cart数组,修改它,然后返回克隆。这可以确保购物车引用的其他函数不会遭到任何更改的影响。

关于这种方法有两点需要留意:

1.可能在某些状况下,我们确实需要修正输入对象,可是当我们选用这种编程实践时,会发现这种状况十分少见,大大都东西都可以被改形成没有反作用。

2.就性能而言,克隆大对象可能会十分贵重。幸运的是,在实践中这其实不是一个大问题,因为有很多很棒的库使这种编程方法可以快速进行,并且不像手动克隆对象和数组那样占用很多内存。
// 欠好的写法const addItemToCart = (cart, item) => {  cart.push({ item, date: Date.now() });};// 好的写法const addItemToCart = (cart, item) => {  return [...cart, { item, date: Date.now() }];};

不要写全局函数


污染全局变量在 JS 中是一种欠好的做法,因为可能会与另外一个库发生冲突,并且在他们的出产中遇到异常之前,API 的用户将毫无用处。让我们考虑一个示例:假如想扩展 JS 的原生Array方法以具有可以显示两个数组之间差异的diff方法,该怎么办?可以将新函数写入Array.prototype,但它可能与另外一个尝试执行相同操作的库发生冲突。假如其他库仅使用diff来查找数组的第一个元素和终究一个元素之间的差异怎么办?这就是为何只使用 ES6 类并简略地扩展Array全局会更好的原因。


尽量使用函数式编程而横死令式


JavaScript不像Haskell那样是一种函数式言语,但它具有函数式的风格。函数式言语可以更简洁、更容易测试。假如可以的话,尽量喜欢这种编程风格。

「欠好的写法」



「好的写法」


封装条件




防止使用非条件




防止使用过多条件


这似乎是一个不可能完成的使命。一听到这个,大大都人会说,“没有if语句,我怎么能做任何事情呢?”答案是,你可以在许多状况下使用多态性来完成相同的使命。

第二个问题通常是,“那很好,可是我为何要那样做呢?”答案是上面讲过一个概念:一个函数应该只做一件事。当具有if语句的类和函数时,这是在通知你的使用者该函数执行不止一件事情。

「欠好的写法」



「好的写法」


防止类型查看


JavaScript 是无类型的,这意味着函数可以承受任何类型的参数。有时q我们会被这种自在所困扰,并且很想在函数中进行类型查看。有很多方法可以防止这样做。首要要考虑的是一致的API。


不要过度优化


现代阅读器在运转时做了很多的优化工作。很多时分,假如你在优化,那么你只是在糟蹋时间。有很好的资源可以查看哪里缺乏优化,我们只需要针对需要优化的当地就好了。





作者:ryanmcdermott 译者:前端小智 来历:github

原文:https://github.com/ryanmcdermott/clean-code-javascript#table-of-contents

【免责声明】本文仅代表作者或发布者个人观念,不代表(www.lmnkf.cn)及其所属公司官方发声,对文章观念有疑义请先联络作者或发布者自己修正,若内容触及侵权或违法信息,请先联络发布者或作者删除,若需我们协助请联络平台管理员,Emailcxb5918(本平台不支撑其他投诉反馈渠道,谢谢合作)。若需要学习以上相关常识请到巨推学院观看视频教程,网站地址www.tsllg.cn。

相关内容