如何写出干净的 JavaScript 代码

一段干净的代码，你在阅读、重用和重构的时候都能非常轻松。编写干净的代码非常重要，因为在我们日常的工作中，你不是仅仅是在为自己写代码。实际上，你还需要考虑一群需要理解、编辑和构建你的代码的同事。

1. 变量使用有意义的名称

变量的名称应该是可描述，有意义的， JavaScript 变量都应该采用驼峰式大小写 ( camelCase) 命名。

 
 
 
      
  
  
  1. // Don't  
    2.   
  
  
  2. const foo = "JDoe@example.com"; 
    3.   
  
  
  3. const bar = "John"; 
    4.   
  
  
  4. const age = 23; 
    5.   
  
  
  5. const qux = true; 
    6.   
  
  
  6.  
    7.   
  
  
  7. // Do  
    8.   
  
  
  8. const email = "John@example.com"; 
    9.   
  
  
  9. const firstName = "John"; 
    10.   
  
  
  10. const age = 23; 
    11.   
  
  
  11. const isActive = true 
    12.

布尔变量通常需要回答特定问题，例如：

 
 
 
      
  
  
  1. isActive  
    2.   
  
  
  2. didSubscribe  
    3.   
  
  
  3. hasLinkedAccount 
    4.

(1) 避免添加不必要的上下文

当对象或类已经包含了上下文的命名时，不要再向变量名称添加冗余的上下文。

 
 
 
      
  
  
  1. // Don't  
    2.   
  
  
  2. const user = { 
    3.   
  
  
  3.   userId: "296e2589-7b33-400a-b762-007b730c8e6d", 
    4.   
  
  
  4.   userEmail: "JDoe@example.com", 
    5.   
  
  
  5.   userFirstName: "John", 
    6.   
  
  
  6.   userLastName: "Doe", 
    7.   
  
  
  7.   userAge: 23, 
    8.   
  
  
  8. }; 
    9.   
  
  
  9.  
    10.   
  
  
  10. user.userId; 
    11.   
  
  
  11.  
    12.   
  
  
  12. // Do  
    13.   
  
  
  13. const user = { 
    14.   
  
  
  14.   id: "296e2589-7b33-400a-b762-007b730c8e6d", 
    15.   
  
  
  15.   email: "JDoe@example.com", 
    16.   
  
  
  16.   firstName: "John", 
    17.   
  
  
  17.   lastName: "Doe", 
    18.   
  
  
  18.   age: 23, 
    19.   
  
  
  19. }; 
    20.

(2) 避免硬编码值

确保声明有意义且可搜索的常量，而不是直接插入一个常量值。全局常量可以采用 SCREAMING_SNAKE_CASE 风格命名。

 
 
 
      
  
  
  1. // Don't  
    2.   
  
  
  2. setTimeout(clearSessionData, 900000); 
    3.   
  
  
  3.  
    4.   
  
  
  4. // Do  
    5.   
  
  
  5. const SESSION_DURATION_MS = 15 * 60 * 1000; 
    6.   
  
  
  6.  
    7.   
  
  
  7. setTimeout(clearSessionData, SESSION_DURATION_MS); 
    8.

2. 函数使用有意义的名称

函数名称需要描述函数的实际作用，即使很长也没关系。函数名称通常使用动词，但返回布尔值的函数可能是个例外 — 它可以采用 是或否 问题的形式，函数名也应该是驼峰式的。

 
 
 
      
  
  
  1. // Don't  
    2.   
  
  
  2. function toggle() { 
    3.   
  
  
  3.   // ... 
    4.   
  
  
  4. } 
    5.   
  
  
  5.  
    6.   
  
  
  6. function agreed(user) { 
    7.   
  
  
  7.   // ... 
    8.   
  
  
  8. } 
    9.   
  
  
  9.  
    10.   
  
  
  10. // Do  
    11.   
  
  
  11. function toggleThemeSwitcher() { 
    12.   
  
  
  12.   // ... 
    13.   
  
  
  13. } 
    14.   
  
  
  14.  
    15.   
  
  
  15. function didAgreeToAllTerms(user) { 
    16.   
  
  
  16.   // ... 
    17.   
  
  
  17. } 
    18.

(1) 使用默认参数

默认参数比 && || 或在函数体内使用额外的条件语句更干净。

 
 
 
      
  
  
  1. // Don't  
    2.   
  
  
  2. function printAllFilesInDirectory(dir) { 
    3.   
  
  
  3.   const dirdirectory = dir || "./"; 
    4.   
  
  
  4.   //   ... 
    5.   
  
  
  5. } 
    6.   
  
  
  6.  
    7.   
  
  
  7. // Do  
    8.   
  
  
  8. function printAllFilesInDirectory(dir = "./") { 
    9.   
  
  
  9.   // ... 
    10.   
  
  
  10. } 
    11.

(2) 限制参数的数量

尽管这条规则可能有争议，但函数最好是有3个以下参数。如果参数较多可能是以下两种情况之一：

  • 该函数做的事情太多，应该拆分。
  • 传递给函数的数据以某种方式相关，可以作为专用数据结构传递。
 
 
 
      
  
  
  1. // Don't  
    2.   
  
  
  2. function sendPushNotification(title, message, image, isSilent, delayMs) { 
    3.   
  
  
  3.   // ... 
    4.   
  
  
  4. } 
    5.   
  
  
  5.  
    6.   
  
  
  6. sendPushNotification("New Message", "...", "http://...", false, 1000); 
    7.   
  
  
  7.  
    8.   
  
  
  8. // Do  
    9.   
  
  
  9. function sendPushNotification({ title, message, image, isSilent, delayMs }) { 
    10.   
  
  
  10.   // ... 
    11.   
  
  
  11. } 
    12.   
  
  
  12.  
    13.   
  
  
  13. const notificationConfig = { 
    14.   
  
  
  14.   title: "New Message", 
    15.   
  
  
  15.   message: "...", 
    16.   
  
  
  16.   image: "http://...", 
    17.   
  
  
  17.   isSilent: false, 
    18.   
  
  
  18.   delayMs: 1000, 
    19.   
  
  
  19. }; 
    20.   
  
  
  20.  
    21.   
  
  
  21. sendPushNotification(notificationConfig); 
    22.

(3) 避免在一个函数中做太多事情

一个函数应该一次做一件事，这有助于减少函数的大小和复杂性，使测试、调试和重构更容易。

 
 
 
      
  
  
  1. / Don't  
    2.   
  
  
  2. function pingUsers(users) { 
    3.   
  
  
  3.   users.forEach((user) => { 
    4.   
  
  
  4.     const userRecord = database.lookup(user); 
    5.   
  
  
  5.     if (!userRecord.isActive()) { 
    6.   
  
  
  6.       ping(user); 
    7.   
  
  
  7.     } 
    8.   
  
  
  8.   }); 
    9.   
  
  
  9. } 
    10.   
  
  
  10.  
    11.   
  
  
  11. // Do  
    12.   
  
  
  12. function pingInactiveUsers(users) { 
    13.   
  
  
  13.   users.filter(!isUserActive).forEach(ping); 
    14.   
  
  
  14. } 
    15.   
  
  
  15.  
    16.   
  
  
  16. function isUserActive(user) { 
    17.   
  
  
  17.   const userRecord = database.lookup(user); 
    18.   
  
  
  18.   return userRecord.isActive(); 
    19.   
  
  
  19. } 
    20.

(4) 避免使用布尔标志作为参数

函数含有布尔标志的参数意味这个函数是可以被简化的。

 
 
 
      
  
  
  1. // Don't  
    2.   
  
  
  2. function createFile(name, isPublic) { 
    3.   
  
  
  3.   if (isPublic) { 
    4.   
  
  
  4.     fs.create(`./public/${name}`); 
    5.   
  
  
  5.   } else { 
    6.   
  
  
  6.     fs.create(name); 
    7.   
  
  
  7.   } 
    8.   
  
  
  8. } 
    9.   
  
  
  9.  
    10.   
  
  
  10. // Do  
    11.   
  
  
  11. function createFile(name) { 
    12.   
  
  
  12.   fs.create(name); 
    13.   
  
  
  13. } 
    14.   
  
  
  14.  
    15.   
  
  
  15. function createPublicFile(name) { 
    16.   
  
  
  16.   createFile(`./public/${name}`); 
    17.   
  
  
  17. } 
    18.

(5) 避免写重复的代码

如果你写了重复的代码，每次有逻辑改变，你都需要改动多个位置。

 
 
 
      
  
  
  1. // Don't  
    2.   
  
  
  2. function renderCarsList(cars) { 
    3.   
  
  
  3.   cars.forEach((car) => { 
    4.   
  
  
  4.     const price = car.getPrice(); 
    5.   
  
  
  5.     const make = car.getMake(); 
    6.   
  
  
  6.     const brand = car.getBrand(); 
    7.   
  
  
  7.     const nbOfDoors = car.getNbOfDoors(); 
    8.   
  
  
  8.  
    9.   
  
  
  9.     render({ price, make, brand, nbOfDoors }); 
    10.   
  
  
  10.   }); 
    11.   
  
  
  11. } 
    12.   
  
  
  12.  
    13.   
  
  
  13. function renderMotorcyclesList(motorcycles) { 
    14.   
  
  
  14.   motorcycles.forEach((motorcycle) => { 
    15.   
  
  
  15.     const price = motorcycle.getPrice(); 
    16.   
  
  
  16.     const make = motorcycle.getMake(); 
    17.   
  
  
  17.     const brand = motorcycle.getBrand(); 
    18.   
  
  
  18.     const seatHeight = motorcycle.getSeatHeight(); 
    19.   
  
  
  19.  
    20.   
  
  
  20.     render({ price, make, brand, nbOfDoors }); 
    21.   
  
  
  21.   }); 
    22.   
  
  
  22. } 
    23.   
  
  
  23.  
    24.   
  
  
  24. // Do  
    25.   
  
  
  25. function renderVehiclesList(vehicles) { 
    26.   
  
  
  26.   vehicles.forEach((vehicle) => { 
    27.   
  
  
  27.     const price = vehicle.getPrice(); 
    28.   
  
  
  28.     const make = vehicle.getMake(); 
    29.   
  
  
  29.     const brand = vehicle.getBrand(); 
    30.   
  
  
  30.  
    31.   
  
  
  31.     const data = { price, make, brand }; 
    32.   
  
  
  32.  
    33.   
  
  
  33.     switch (vehicle.type) { 
    34.   
  
  
  34.       case "car": 
    35.   
  
  
  35.         data.nbOfDoors = vehicle.getNbOfDoors(); 
    36.   
  
  
  36.         break; 
    37.   
  
  
  37.       case "motorcycle": 
    38.   
  
  
  38.         data.seatHeight = vehicle.getSeatHeight(); 
    39.   
  
  
  39.         break; 
    40.   
  
  
  40.     } 
    41.   
  
  
  41.  
    42.   
  
  
  42.     render(data); 
    43.   
  
  
  43.   }); 
    44.   
  
  
  44. } 
    45.

(6) 避免副作用

在 JavaScript 中，你应该更喜欢函数式模式而不是命令式模式。换句话说，大多数情况下我们都应该保持函数纯。副作用可能会修改共享状态和资源，从而导致一些奇怪的问题。所有的副作用都应该集中管理，例如你需要更改全局变量或修改文件，可以专门写一个 util 来做这件事。

 
 
 
      
  
  
  1. // Don't  
    2.   
  
  
  2. let date = "21-8-2021"; 
    3.   
  
  
  3.  
    4.   
  
  
  4. function splitIntoDayMonthYear() { 
    5.   
  
  
  5.   datedate = date.split("-"); 
    6.   
  
  
  6. } 
    7.   
  
  
  7.  
    8.   
  
  
  8. splitIntoDayMonthYear(); 
    9.   
  
  
  9.  
    10.   
  
  
  10. // Another function could be expecting date as a string 
    11.   
  
  
  11. console.log(date); // ['21', '8', '2021']; 
    12.   
  
  
  12.  
    13.   
  
  
  13. // Do  
    14.   
  
  
  14. function splitIntoDayMonthYear(date) { 
    15.   
  
  
  15.   return date.split("-"); 
    16.   
  
  
  16. } 
    17.   
  
  
  17.  
    18.   
  
  
  18. const date = "21-8-2021"; 
    19.   
  
  
  19. const newDate = splitIntoDayMonthYear(date); 
    20.   
  
  
  20.  
    21.   
  
  
  21. // Original vlaue is intact 
    22.   
  
  
  22. console.log(date); // '21-8-2021'; 
    23.   
  
  
  23. console.log(newDate); // ['21', '8', '2021']; 
    24.

另外，如果你将一个可变值传递给函数，你应该直接克隆一个新值返回，而不是直接改变该它。

 
 
 
      
  
  
  1. // Don't  
    2.   
  
  
  2. function enrollStudentInCourse(course, student) { 
    3.   
  
  
  3.   course.push({ student, enrollmentDate: Date.now() }); 
    4.   
  
  
  4. } 
    5.   
  
  
  5.  
    6.   
  
  
  6. // Do  
    7.   
  
  
  7. function enrollStudentInCourse(course, student) { 
    8.   
  
  
  8.   return [...course, { student, enrollmentDate: Date.now() }]; 
    9.   
  
  
  9. } 
    10.

3. 条件语句

(1) 使用非负条件

 
 
 
      
  
  
  1. // Don't  
    2.   
  
  
  2. function isUserNotVerified(user) { 
    3.   
  
  
  3.   // ... 
    4.   
  
  
  4. } 
    5.   
  
  
  5.  
    6.   
  
  
  6. if (!isUserNotVerified(user)) { 
    7.   
  
  
  7.   // ... 
    8.   
  
  
  8. } 
    9.   
  
  
  9.  
    10.   
  
  
  10. // Do  
    11.   
  
  
  11. function isUserVerified(user) { 
    12.   
  
  
  12.   // ... 
    13.   
  
  
  13. } 
    14.   
  
  
  14.  
    15.   
  
  
  15. if (isUserVerified(user)) { 
    16.   
  
  
  16.   // ... 
    17.   
  
  
  17. } 
    18.

(2) 尽可能使用简写

 
 
 
      
  
  
  1. // Don't  
    2.   
  
  
  2. if (isActive === true) { 
    3.   
  
  
  3.   // ... 
    4.   
  
  
  4. } 
    5.   
  
  
  5.  
    6.   
  
  
  6. if (firstName !== "" && firstName !== null && firstName !== undefined) { 
    7.   
  
  
  7.   // ... 
    8.   
  
  
  8. } 
    9.   
  
  
  9.  
    10.   
  
  
  10. const isUserEligible = user.isVerified() && user.didSubscribe() ? true : false; 
    11.   
  
  
  11.  
    12.   
  
  
  12. // Do  
    13.   
  
  
  13. if (isActive) { 
    14.   
  
  
  14.   // ... 
    15.   
  
  
  15. } 
    16.   
  
  
  16.  
    17.   
  
  
  17. if (!!firstName) { 
    18.   
  
  
  18.   // ... 
    19.   
  
  
  19. } 
    20.   
  
  
  20.  
    21.   
  
  
  21. const isUserEligible = user.isVerified() && user.didSubscribe(); 
    22.

(3) 避免过多分支

尽早 return 会使你的代码线性化、更具可读性且不那么复杂。

 
 
 
      
  
  
  1. // Don't  
    2.   
  
  
  2. function addUserService(db, user) { 
    3.   
  
  
  3.   if (!db) { 
    4.   
  
  
  4.     if (!db.isConnected()) { 
    5.   
  
  
  5.       if (!user) { 
    6.   
  
  
  6.         return db.insert("users", user); 
    7.   
  
  
  7.       } else { 
    8.   
  
  
  8.         throw new Error("No user"); 
    9.   
  
  
  9.       } 
    10.   
  
  
  10.     } else { 
    11.   
  
  
  11.       throw new Error("No database connection"); 
    12.   
  
  
  12.     } 
    13.   
  
  
  13.   } else { 
    14.   
  
  
  14.     throw new Error("No database"); 
    15.   
  
  
  15.   } 
    16.   
  
  
  16. } 
    17.   
  
  
  17.  
    18.   
  
  
  18. // Do  
    19.   
  
  
  19. function addUserService(db, user) { 
    20.   
  
  
  20.   if (!db) throw new Error("No database"); 
    21.   
  
  
  21.   if (!db.isConnected()) throw new Error("No database connection"); 
    22.   
  
  
  22.   if (!user) throw new Error("No user"); 
    23.   
  
  
  23.  
    24.   
  
  
  24.   return db.insert("users", user); 
    25.   
  
  
  25. } 
    26.

(4) 优先使用 map 而不是 switch 语句

既能减少复杂度又能提升性能。

 
 
 
      
  
  
  1. // Don't  
    2.   
  
  
  2. const getColorByStatus = (status) => { 
    3.   
  
  
  3.   switch (status) { 
    4.   
  
  
  4.     case "success": 
    5.   
  
  
  5.       return "green"; 
    6.   
  
  
  6.     case "failure": 
    7.   
  
  
  7.       return "red"; 
    8.   
  
  
  8.     case "warning": 
    9.   
  
  
  9.       return "yellow"; 
    10.   
  
  
  10.     case "loading": 
    11.   
  
  
  11.     default: 
    12.   
  
  
  12.       return "blue"; 
    13.   
  
  
  13.   } 
    14.   
  
  
  14. }; 
    15.   
  
  
  15.  
    16.   
  
  
  16. // Do  
    17.   
  
  
  17. const statusColors = { 
    18.   
  
  
  18.   success: "green", 
    19.   
  
  
  19.   failure: "red", 
    20.   
  
  
  20.   warning: "yellow", 
    21.   
  
  
  21.   loading: "blue", 
    22.   
  
  
  22. }; 
    23.   
  
  
  23.  
    24.   
  
  
  24. const getColorByStatus = (status) => statusColors[status] || "blue"; 
    25.

(5) 使用可选链接

 
 
 
      
  
  
  1. const user = { 
    2.   
  
  
  2.   email: "JDoe@example.com", 
    3.   
  
  
  3.   billing: { 
    4.   
  
  
  4.     iban: "...", 
    5.   
  
  
  5.     swift: "...", 
    6.   
  
  
  6.     address: { 
    7.   
  
  
  7.       street: "Some Street Name", 
    8.   
  
  
  8.       state: "CA", 
    9.   
  
  
  9.     }, 
    10.   
  
  
  10.   }, 
    11.   
  
  
  11. }; 
    12.   
  
  
  12.  
    13.   
  
  
  13. // Don't  
    14.   
  
  
  14. const email = (user && user.email) || "N/A"; 
    15.   
  
  
  15. const street = 
    16.   
  
  
  16.   (user && 
    17.   
  
  
  17.     user.billing && 
    18.   
  
  
  18.     user.billing.address && 
    19.   
  
  
  19.     user.billing.address.street) || 
    20.   
  
  
  20.   "N/A"; 
    21.   
  
  
  21. const state = 
    22.   
  
  
  22.   (user && 
    23.   
  
  
  23.     user.billing && 
    24.   
  
  
  24.     user.billing.address && 
    25.   
  
  
  25.     user.billing.address.state) || 
    26.   
  
  
  26.   "N/A"; 
    27.   
  
  
  27.  
    28.   
  
  
  28. // Do  
    29.   
  
  
  29. const email = user?.email ?? "N/A"; 
    30.   
  
  
  30. const street = user?.billing?.address?.street ?? "N/A"; 
    31.   
  
  
  31. const street = user?.billing?.address?.state ?? "N/A"; 
    32.

4. 并发

避免回调：

回调很混乱，会导致代码嵌套过深，使用 Promise 替代回调。

 
 
 
      
  
  
  1. // Don't  
    2.   
  
  
  2. getUser(function (err, user) { 
    3.   
  
  
  3.   getProfile(user, function (err, profile) { 
    4.   
  
  
  4.     getAccount(profile, function (err, account) { 
    5.   
  
  
  5.       getReports(account, function (err, reports) { 
    6.   
  
  
  6.         sendStatistics(reports, function (err) { 
    7.   
  
  
  7.           console.error(err); 
    8.   
  
  
  8.         }); 
    9.   
  
  
  9.       }); 
    10.   
  
  
  10.     }); 
    11.   
  
  
  11.   }); 
    12.   
  
  
  12. }); 
    13.   
  
  
  13.  
    14.   
  
  
  14. // Do  
    15.   
  
  
  15. getUser() 
    16.   
  
  
  16.   .then(getProfile) 
    17.   
  
  
  17.   .then(getAccount) 
    18.   
  
  
  18.   .then(getReports) 
    19.   
  
  
  19.   .then(sendStatistics) 
    20.   
  
  
  20.   .catch((err) => console.error(err)); 
    21.   
  
  
  21.  
    22.   
  
  
  22. // or using Async/Await  
    23.   
  
  
  23.  
    24.   
  
  
  24. async function sendUserStatistics() { 
    25.   
  
  
  25.   try { 
    26.   
  
  
  26.     const user = await getUser(); 
    27.   
  
  
  27.     const profile = await getProfile(user); 
    28.   
  
  
  28.     const account = await getAccount(profile); 
    29.   
  
  
  29.     const reports = await getReports(account); 
    30.   
  
  
  30.     return sendStatistics(reports); 
    31.   
  
  
  31.   } catch (e) { 
    32.   
  
  
  32.     console.error(err); 
    33.   
  
  
  33.   } 
    34.   
  
  
  34. } 
    35.

5. 错误处理

处理抛出的错误和 reject 的 promise

 
 
 
      
  
  
  1. / Don't  
    2.   
  
  
  2. try { 
    3.   
  
  
  3.   // Possible erronous code 
    4.   
  
  
  4. } catch (e) { 
    5.   
  
  
  5.   console.log(e); 
    6.   
  
  
  6. } 
    7.   
  
  
  7.  
    8.   
  
  
  8. // Do  
    9.   
  
  
  9. try { 
    10.   
  
  
  10.   // Possible erronous code 
    11.   
  
  
  11. } catch (e) { 
    12.   
  
  
  12.   // Follow the most applicable (or all): 
    13.   
  
  
  13.   // 1- More suitable than console.log 
    14.   
  
  
  14.   console.error(e); 
    15.   
  
  
  15.  
    16.   
  
  
  16.   // 2- Notify user if applicable 
    17.   
  
  
  17.   alertUserOfError(e); 
    18.   
  
  
  18.  
    19.   
  
  
  19.   // 3- Report to server 
    20.   
  
  
  20.   reportErrorToServer(e); 
    21.   
  
  
  21.  
    22.   
  
  
  22.   // 4- Use a custom error handler 
    23.   
  
  
  23.   throw new CustomError(e); 
    24.   
  
  
  24. } 
    25.

6. 注释

(1) 只注释业务逻辑

可读的代码使你免于过度注释，因此，你应该只注释复杂的逻辑。

 
 
 
      
  
  
  1. // Don't  
    2.   
  
  
  2. function generateHash(str) { 
    3.   
  
  
  3.   // Hash variable 
    4.   
  
  
  4.   let hash = 0; 
    5.   
  
  
  5.  
    6.   
  
  
  6.   // Get the length of the string 
    7.   
  
  
  7.   let length = str.length; 
    8.   
  
  
  8.  
    9.   
  
  
  9.   // If the string is empty return 
    10.   
  
  
  10.   if (!length) { 
    11.   
  
  
  11.     return hash; 
    12.   
  
  
  12.   } 
    13.   
  
  
  13.  
    14.   
  
  
  14.   // Loop through every character in the string 
    15.   
  
  
  15.   for (let i = 0; i < length; i++) { 
    16.   
  
  
  16.     // Get character code. 
    17.   
  
  
  17.     const char = str.charCodeAt(i); 
    18.   
  
  
  18.  
    19.   
  
  
  19.     // Make the hash 
    20.   
  
  
  20.     hash = (hash << 5) - hash + char; 
    21.   
  
  
  21.  
    22.   
  
  
  22.     // Convert to 32-bit integer 
    23.   
  
  
  23.     hash &= hash; 
    24.   
  
  
  24.   } 
    25.   
  
  
  25. } 
    26.   
  
  
  26.  
    27.   
  
  
  27. // Do  
    28.   
  
  
  28. function generateHash(str) { 
    29.   
  
  
  29.   let hash = 0; 
    30.   
  
  
  30.   let length = str.length; 
    31.   
  
  
  31.   if (!length) { 
    32.   
  
  
  32.     return hash; 
    33.   
  
  
  33.   } 
    34.   
  
  
  34.  
    35.   
  
  
  35.   for (let i = 0; i < length; i++) { 
    36.   
  
  
  36.     const char = str.charCodeAt(i); 
    37.   
  
  
  37.     hash = (hash << 5) - hash + char; 
    38.   
  
  
  38.     hashhash = hash & hash; // Convert to 32bit integer 
    39.   
  
  
  39.   } 
    40.   
  
  
  40.   return hash; 
    41.   
  
  
  41. } 
    42.

(2) 使用版本控制

在代码里不需要保留历史版本的注释，想查的话你直接用 git log 就可以搜到。。

 
 
 
      
  
  
  1. // Don't  
    2.   
  
  
  2. /** 
    3.   
  
  
  3.  * 2021-7-21: Fixed corner case 
    4.   
  
  
  4.  * 2021-7-15: Improved performance 
    5.   
  
  
  5.  * 2021-7-10: Handled mutliple user types 
    6.   
  
  
  6.  */ 
    7.   
  
  
  7. function generateCanonicalLink(user) { 
    8.   
  
  
  8.   // const session = getUserSession(user) 
    9.   
  
  
  9.   const session = user.getSession(); 
    10.   
  
  
  10.   // ... 
    11.   
  
  
  11. } 
    12.   
  
  
  12.  
    13.   
  
  
  13. // Do  
    14.   
  
  
  14. function generateCanonicalLink(user) { 
    15.   
  
  
  15.   const session = user.getSession(); 
    16.   
  
  
  16.   // ... 
    17.   
  
  
  17. } 
    18.

好了，去写出你漂亮的代码吧!

网站名称：如何写出干净的 JavaScript 代码
当前地址：http://www.shufengxianlan.com/qtweb/news15/382265.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站设计公司知识

行业网站建设

成都标牌标识牌制作公司　　 　温江服务器租用　　 　铁科精智测控　　 　成都二枢机房　　 　成都电信光华数据中心　　 　网站定制　　 　成都建网站　　 　护栏钻孔机　　 　建站公司　　 　微信小程序　　 　成都网站设计　　 　成都网站安全运维　　 　青羊总部基地　　 　四川国泰民安消防　　 　成都手机网站报价　　 　时嘉做网站　　 　网络推广平台　　 　西部信息中心　　 　营销网站建设　　 　小谭网创广告