<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          5個讓JavaScript代碼更簡潔的小技巧

          共 4606字,需瀏覽 10分鐘

           ·

          2021-05-20 15:33

          文 | https://betterprogramming.pub/5-practices-to-make-your-javascript-code-base-cleaner-611300dfe088
          翻譯 | 楊小二

          JavaScript無處不在,從PC端到移動設(shè)備端,甚至是后端,都在使用JavaScript。
          在本文中,我將嘗試一些可用來使代碼看起來更簡潔的實踐方案。

          1、使用默認參數(shù)代替短路或條件

          默認參數(shù)通常比短路更干凈。
          function SomeMethod(paramThatCanBeUndefined) {
          const localValue = paramThatCanBeUndefined || "Default Value"; console.log(localValue) // ...}SomeMethod() // Default ValueSomeMethod("SomeValue") // SomeValue

          嘗試以下方法:

          function SomeMethod(  console.log(paramThatCanBeUndefined)  // ...}SomeMethod() // Default ValueSomeMethod("SomeValue") // SomeValue

          聲明:Falsy值,如'',"",false,null,0,和NaN將不會被默認值替代:

          function SomeMethod(paramThatCanBeUndefined = "Default Value") {          console.log(paramThatCanBeUndefined)    // ...}SomeMethod(null) // will not Default Value, will null InsteadSomeMethod("SomeValue") // SomeValue

          2、處理多個條件

          const conditions = ["Condition 2","Condition String2"];someFunction(str){  if(str.includes("someValue1") || str.includes("someValue2")){    return true  }else{    return false  }}

          一種更干凈的方法是:

          someFunction(str){   const conditions = ["someValue1","someValue2"];   return conditions.some(condition=>str.includes(condition));}

          3、用動態(tài)鍵值對替換開關(guān)(即對象文字)

          開關(guān)版本(或?qū)㈤_關(guān)替換為if / else):

          const UserRole = {  ADMIN: "Admin",  GENERAL_USER: "GeneralUser",  SUPER_ADMIN: "SuperAdmin",};function getRoute(userRole = "default role"){

          switch(userRole){ case UserRole.ADMIN: return "/admin" case UserRole.GENERAL_USER: return "/GENERAL_USER" case UserRole.SUPER_ADMIN: return "/superadmin" default: return "/" }
          }console.log(getRoute(UserRole.ADMIN)) // return "/admin"console.log(getRoute("Anything")) // return Default pathconsole.log(getRoute()) // return Default pathconsole.log(getRoute(null)) // return Default path
          // More cases if new arrive// You can think if else instead of switch

          動態(tài)鍵值對版本:

          const UserRole = {   ADMIN: "Admin",   GENERAL_USER: "GeneralUser",   SUPER_ADMIN: "SuperAdmin",};function getRoute(userRole = "default role"){ const appRoute = {  [UserRole.ADMIN]: "/admin",  [UserRole.GENERAL_USER]: "/user",  [UserRole.SUPER_ADMIN]: "/superadmin" }; return appRoute[userRole] || "Default path";}console.log(getRoute(UserRole.ADMIN)) // return "/admin"console.log(getRoute("Anything")) // return Default pathconsole.log(getRoute()) // return Default pathconsole.log(getRoute(null)) // return Default path// No more switch/if-else here.// Easy to Further expansion

          4、避免過多的函數(shù)參數(shù)

          function myFunction(employeeName,jobTitle,yrExp,majorExp){ return `${employeeName} is working as ${jobTitle} with ${yrExp}    years of experience in ${majorExp}`}//output be like John is working as Project Manager with 12 year of experience in Project Management// you can call it viaconsole.log(myFunction("John","Project Manager",12,"Project Management"))//    ***** PROBLEMS ARE *****// Violation of 'clean code' principle// Parameter sequencing is important// Unused Params warning if not used// Testing need to consider a lot of edge cases.

          這是一種更清潔的方法:

          function myFunction({employeeName,jobTitle,yrExp,majorExp}){ return `${employeeName} is working as ${jobTitle} with ${yrExp} years of experience in ${majorExp}`}//output be like John is working as Project Manager with 12 year of experience in Project Management// you can call it viaconst mockTechPeople = {  employeeName:"John",  jobTitle:"Project Manager",  yrExp:12,  majorExp:"Project Management"}console.log(myFunction(mockTechPeople))// ES2015/ES6 destructuring syntax is in action// map your desired value to variable you need.

          5、使用Object.assign設(shè)置默認對象

          這看起來很繁瑣:

          const someObject = { title: null, subTitle: "Subtitle", buttonColor: null, disabled: true};function createOption(someObject) { someObject.title = someObject.title || "Default Title"; someObject.subTitle = someObject.subTitle || "Default Subtitle"; someObject.buttonColor = someObject.buttonColor || "blue"; someObject.disabled = someObject.disabled !== undefined ?  someObject.disabled : true; return someObject}console.log(createOption(someObject));
          // Output be like // {title: 'Default Title', subTitle: 'Subtitle', buttonColor: 'blue', disabled: true}

          這種方法看起來更好:

          const someObject = {  title: null,  subTitle: "Subtitle",  buttonColor: null,  disabled: true }; function creteOption(someObject) {  const newObject = Object.assign({   title: "Default Title",   subTitle: "Default Subtitle",   buttonColor: "blue",   disabled: true },someObject) return newObject } console.log(creteOption(someObject));

          最后,謝謝你的閱讀,祝編程愉快!


          瀏覽 50
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  无码内射中文字幕岛国片 | 秘 黄 视频免费看 | 色天天综合 | 狼人综合视频在线 | 国产操比|