在掌握如何编写JavaScript代码之后,那么就进阶到实践——如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读,因为这样的程序更易于团队成员之间紧密协作。今天,我们将 " />

您现在的位置是:娱乐闲谈 >>正文

你不可不知的 15 个 JavaScript 小贴士

娱乐闲谈683人已围观

简介bvaxrpv">在掌握如何编写JavaScript代码之后,那么就进阶到实践——如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读,因为这样的程序更易于团队成员之间紧密协作。今天,我们将 ...

bvaxrpv">在掌握如何编写JavaScript代码之后,不可不知那么就进阶到实践——如何真正地解决问题。小贴我们需要更改JS代码使其更简单、不可不知更易于阅读,小贴因为这样的不可不知程序更易于团队成员之间紧密协作。今天,小贴我们将介绍15个最佳实践技巧,不可不知可帮助简化JavaScript代码,小贴易于其他开发人员理解,不可不知也使程序更具可读性和可维护性。小贴1. 在顶部声明并初始化变量没有什么比延迟声明更能破坏可读性的不可不知了。正如在开始工作之前准备好所有工具可以帮助简化工作,小贴在进入函数的不可不知细节之前声明所有变量也可以让程序更简单。这也方便了我们以后调整变量名称或值。小贴至于变量,不可不知最佳做法是在创建时初始化变量,以便你和你的团队都可以确定没有undefined的变量。2. 构建模块化、专业化的函数为了效率和可读性,单个函数走天下是不可行的。所以我们在设计函数时,应该秉持着一个任务一个函数的原则。函数命名也应当匹配任务。这样做是不是更方便其他人阅读代码了呢?因为只处理一项任务,自然而然函数就会更简单。甚至以后如果有需要,你和你的团队还可以将此函数应用到其他程序。请看下面的示例,改进后的代码只看函数名和变量名,就可以清楚地知道任务目的。function table (columns, rows, item){creates table and searches it for the passed item}// compared tofunction createTable (columns, rows){//creates table}function searchTable (table.length, item) {//searches table for the passed item}3. 识别并删除重复代码有时,代码中不可避免地会出现重复的代码行。在这种情况下,应将重复的代码改写为函数,并在以前所有使用过这些代码的地方改为调用函数。这不但减少了视觉混乱,还有助于以后的调试,因为这样一来团队只需要查看函数,而不必一一检查多处代码。<script>var x = 5;var y = 6;var x = x*2var y = y*2</script><script>var x = 5;var y = 6;function double (value){return value*2;}double (x);double(y);</script>4. 多注释代码注释是总结代码片段目的的好方法,可以节省其他开发人员靠自己去确定代码所需的时间。如果代码未完成注释描述应完成的任务,还能及时捕获可能的错误。一般来说,最好每个函数都有一条注释。不确定应不应该写注释?那就写吧!如果太过杂乱,大不了以后删除罢了。//declares and initializes var x<script>var x = 5;</script>5. 谨防过度使用递归注意:递归函数不要嵌套太多层。虽然说多层嵌套能一次解决许多问题,但我们很难一目了然。为避免困惑,尽可能在不产生大量运行时成本的前提下,解放嵌套的递归函数。如果你有3+层的嵌套函数,那么你的同事可能很难跟上你的思路。function1 (a,b){  function2{    function3{    //this is too hard to follow and can likely be solved another way    }  }}</script>6. 高效使用DOM操作访问DOM对于充分利用程序至关重要,但反复这样做会导致视觉混乱并会减慢程序速度。因此,我们最好访问一次并进行缓存,以供稍后在变量中使用。然后有需要的话,直接访问变量而不是访问DOM。这个过程在视觉上更干净、更高效。注意:最佳做法是使用$符号标记DOM引用。function accountInfo(){var email = $("#accounts").find(".email").val();var accountNumber = $("#accounts").find(".accountNumber").val();}// Contents cached to variable "accounts"function accountInfo(){ var $accounts = $("#accounts"); var name = $accounts.find(".email").val(); var age = $accounts.find(".accountNumber").val();}7. 不惜一切代价避免全局变量在JavaScript中,变量具有或全局或局部的作用域。作用域决定了在代码何处定义和访问变量。我们可以在程序中的任何位置,甚至函数之外定义全局变量。而局部变量仅用于定义的函数中。如果存在同名的局部变量和全局变量,那么JavaScript将优先考虑局部变量并忽略全局变量。我们应避免使用全局变量,因为全局变量可能会意外覆盖窗口变量,从而导致错误。此外,过多的全局变量会减慢程序速度,因为在窗口关闭之前不会删除全局变量,而局部变量会在函数完成后删除。<html>      <script>            var myVar = "my global variable"; // This variable is declared as global            function localVariable( ) {               var myVar = "my local variable";  // This is a locally declared variable      </script>   </body></html>8. 使用速记符号(对象文字)在JavaScript中设计对象或数组时,可以通过选择速记符号来节省空间。实现方式是在声明期间而不是之后设置对象或数组的属性。这样做,我们就不必确定在每一行上设置了哪个对象或数组,从而使这部分代码更易于阅读。虽然是一个很小的变化,但随着对象和数组逐渐变得复杂,绝对可以为你的团队节省很多时间。例如创建一个对象普通写法:var computer = new Object();    computer.caseColor = 'black';    computer.brand = 'Dell';    computer.value = 1200;    computer.onSale = true;速记写法:var computer = {    caseColor: 'black';    brand: 'Dell';    value: 1200;    onSale: true;}速记数组:var computerBrands = ['Dell','Apple','Lenovo','HP','Toshiba','Sony'];9. 使用严格模式捕获静默错误与其他编程语言(如C++和Java)相比,JavaScript是一种语法非常宽松的语言。虽然这种宽大处理有助于在不引发错误的情况下运行代码,但可能会导致隐形的错误。所以我们需要解决隐形的静默错误,否则可能会导致意料之外的行为。解决方案就是严格模式。包括两项主要更改:以前可以通过编译器的静默错误现在会引发错误修复了阻止JavaScript优化代码的错误JavaScript Strict Code程序通常比非严格模式下的程序运行得更快。或者在脚本部分的顶部,或者在所需功能之前(部分严格),添加'use strict';即可进入严格模式。10. 设置默认值创建对象时,可以为对象的部分或全部属性设置默认值。这样做不仅可确保每个属性的值都不是undefined,而且还声明了属性所需的数据类型。此外,通过不为某些属性设置默认值,还可以向团队传达对象正常运行不需要这些值的意思。function logProperty({    address = '111 11th Street, 11111',     unit,   //optional    landlord = 'Sara',     tenant = 'Raj',     rent = 500, })上面的代码中,unit属性可选,但其他四个属性(预期的数据类型)都必须有默认值。为此,unit留空。11. 使用模板字面量组合字符串组合字符串可太麻烦了,尤其是在组合字符串和变量时。我们可以使用模板字面量(用反引号标记),简化组合过程,因为模板字面量同时接受字符串和变量。function greet(name) {    return `Hi, ${name}`; //template literal}console.log(greet('Leo'));注意,通过使用模板字面量,我们可以根据传递的名称、组合字符串Hi和变量name传递的值来记录对用户的问候语。因此,此代码打印:Hi, Leo12. 使用includes解决存在性测试测试数组中值是否存在是一个常见问题。值得庆幸的是,JavaScript有一个特殊的数组方法include()——如果数组包含搜索值,则返回布尔值。不用搜索数组,这是一种高效、易于阅读的解决方案。const sections = ['contact', 'shipping']; function displayShipping(sections) {    return sections.includes('shipping');} console.log(displayShipping(sections));此外,还有indexOf()方法可用于检查值以及查找索引。13. 用falsy值缩短条件在JavaScript的跨变量类型中,有一些值等效于false,包括:布尔值falsenull0NaN' '" "在 JavaScript 中,等效的==意味着两个对象共享相同的值,但它们可能不是相同的类型。完全相同的===表示两个对象类型相同,值也相同。这有什么用呢?好吧,与其创建单独的变量来保存布尔值,不如使用上述值作为默认值来报告false,如果没有任何东西覆盖的话。比如下面的例子,你需要检查给定的员工是否接受过设备培训(equipmentTraining)。这台机器只需要最低级别的培训,培训水平并不重要。因此,我们用if语句检查equipmentTraining是否具有falsy值,即默认的' '。如果是,则执行if语句并返回员工未获得授权。如果equipmentTraining包含除默认值以外的任何字符串,则表示具有truthy值,因此不会执行if语句。const employee = {    name: 'Eric',    equipmentTraining: '',} if (!employee.equipmentTraining) {    console.log('Not authorized to operate machinery');}14. 通过继承共享方法继承涉及在类之间共享属性或方法。下面的示例中使用super标签实现继承,允许FlashCoupon中的构造函数访问Coupon中的父构造函数。只需定义一次方法(在父类中),即可增强代码的可读性。代码也变得更加模块化,因为继承器类可以专门用于给定任务。注意,顶部的代码框建立了父类Coupon,其属性和方法共享到FlashCoupon,如FlashCoupon在其最后一行调用getExpirationMessage方法时看到的那样。class Coupon {  constructor(price, expiration) {    this.price = price;    this.expiration = expiration || 'Two Weeks';  }  getExpirationMessage() {    return `This offer expires in ${this.expiration}`;  }}export default Coupon;import Coupon from './extend'; class FlashCoupon extends Coupon {    constructor(price, expiration) {        super(price);        this.expiration = expiration || 'two hours';    }} const flash = new FlashCoupon(10);console.log(flash.getExpirationMessage());15. 使用数组方法编写较短的循环最后一个小贴士,我们将深入探讨数组优化的复杂性。循环是创建和填充数组的常用方法。但是,循环会导致代码杂乱且难以阅读。因此,我们可以使用数组方法来实现类似的效果,例如for只需若干代码行即可循环。以下面的for循环为例。const prices = ['1.0', 'negotiable', '2.15']; const formattedPrices = [];for (let i = 0; i < prices.length; i++) {    const price = parseFloat(prices[i]);    if (price) {        formattedPrices.push(price);    }}console.log(formattedPrices);我们可以通过三行map方法实现与上面代码相同的效果。此方法创建了一个大小相等的数组,只有price属性。然后使用parseFloat获取价格的浮点值。const prices = ['1.0', '2.15'];const formattedPrices = prices.map(price => parseFloat(price));console.log(formattedPrices)总结对简洁代码的追求是一个持续的旅程,因为最佳实践会随着语言的不断发展而不断改善。这个过程也是软件开发乐趣的一部分,学习最佳实践有助于开发人员真正掌握编程语言。大家加油!

Tags:

相关文章