小米降噪藍(lán)牙耳機(jī)Necklace分享：聽一首歌 讀懂一個故事
在今天下午的小米Civi 2新品發(fā)布會上，小米還帶來了一款新的降噪藍(lán)牙耳機(jī)Necklace，我們也在發(fā)布結(jié)束的第一時間給大家?guī)磉@款耳機(jī)的簡單分享。現(xiàn)在大家能見到最多的藍(lán)牙耳機(jī)
在編程世界中，代碼不僅僅是讓事情正常運(yùn)轉(zhuǎn)。 它就像一件講述故事的藝術(shù)品。 當(dāng)代碼干凈時，它就像一個美麗的、精心制作的雕塑，既美觀又運(yùn)行良好。
但在急于按期完成任務(wù)的過程中，有時團(tuán)隊(duì)不會太注意保持代碼的整潔。 這可能會導(dǎo)致項(xiàng)目變得混亂、復(fù)雜，變得更加難以開展。 隨著情況變得更糟，生產(chǎn)力也會下降。 然后，公司需要引進(jìn)更多的人來提供幫助，這使得一切都變得更加昂貴。
那么，干凈的代碼是什么樣的呢？ 它的代碼易于理解，沒有多余的部分，簡單，并且可以通過測試。 換句話說，它是可讀的、可重用的，并且在需要時易于更改。
為了幫助你編寫出色的 JavaScript 代碼，我將在今天的內(nèi)容中與你分享 26 個寫干凈代碼的技巧，這些技巧將指導(dǎo)你編寫既優(yōu)雅又高效的代碼。
// Badconst yyyymmdstr = moment().format("YYYY/MM/DD");// Goodconst currentDate = moment().format("YYYY/MM/DD");// BadgetUserInfo();getClientData();getCustomerRecord();// GoodgetUser();我們將閱讀比我們編寫的更多的代碼，我們編寫的代碼可讀且可搜索，這一點(diǎn)很重要。
// Bad// What the heck is 86400000 for?setTimeout(blastOff, 86400000); // Good// Declare them as capitalized named constants.const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000;setTimeout(blastOff, MILLISECONDS_PER_DAY);// Badconst address = "One Infinite Loop, Cupertino 95014";const cityZipCodeRegex = /^[^,//]+[,///s]+(.+?)/s*(/d{5})?$/;saveCityZipCode( address.match(cityZipCodeRegex)[1], address.match(cityZipCodeRegex)[2]);// Goodconst address = "One Infinite Loop, Cupertino 95014";const cityZipCodeRegex = /^[^,//]+[,///s]+(.+?)/s*(/d{5})?$/;const [_, city, zipCode] = address.match(cityZipCodeRegex) || [];saveCityZipCode(city, zipCode);顯式的比隱式的好。
// Badconst locations = ["Austin", "New York", "San Francisco"];locations.forEach(l => { doStuff(); doSomeOtherStuff(); // ... // ... // ... // Wait, what is `l` for again? dispatch(l);});// Goodconst locations = ["Austin", "New York", "San Francisco"];locations.forEach(location => { doStuff(); doSomeOtherStuff(); // ... // ... // ... dispatch(location);});如果您的類/對象名稱告訴您一些信息，請不要在變量名稱中重復(fù)該信息。
// Badconst Car = { carMake: "Honda", carModel: "Accord", carColor: "Blue"};function paintCar(car, color) { car.carColor = color;}// Goodconst Car = { make: "Honda", model: "Accord", color: "Blue"};function paintCar(car, color) { car.color = color;}默認(rèn)參數(shù)通常比短路更清晰。 請注意，如果您使用它們，您的函數(shù)將只為未定義的參數(shù)提供默認(rèn)值。 其他“假”值（例如 ''、""、false、null、0 和 NaN）不會被默認(rèn)值替換。
// Badfunction createMicrobrewery(name) { const breweryName = name || "Hipster Brew Co."; // ...}// Goodfunction createMicrobrewery(name = "Hipster Brew Co.") { // ...}限制函數(shù)參數(shù)的數(shù)量非常重要，因?yàn)樗箿y試函數(shù)變得更加容易。 超過三個會導(dǎo)致組合爆炸，您必須使用每個單獨(dú)的參數(shù)來測試大量不同的情況。
// Badfunction createMenu(title, body, buttonText, cancellable) { // ...}createMenu("Foo", "Bar", "Baz", true);//Goodfunction createMenu({ title, body, buttonText, cancellable }) { // ...}createMenu({ title: "Foo", body: "Bar", buttonText: "Baz", cancellable: true});這是迄今為止軟件工程中最重要的規(guī)則。 當(dāng)函數(shù)做不止一件事時，它們就更難編寫、測試和推理。 當(dāng)您可以將一個函數(shù)隔離為一個操作時，就可以輕松重構(gòu)它，并且您的代碼讀起來會更清晰。 如果您除了本指南之外沒有任何其他內(nèi)容，您將領(lǐng)先于許多開發(fā)人員。
// Badfunction emailClients(clients) { clients.forEach(client => { const clientRecord = database.lookup(client); if (clientRecord.isActive()) { email(client); } });}// Goodfunction emailActiveClients(clients) { clients.filter(isActiveClient).forEach(email);}function isActiveClient(client) { const clientRecord = database.lookup(client); return clientRecord.isActive();}// Badfunction addToDate(date, month) { // ...}const date = new Date();// It's hard to tell from the function name what is addedaddToDate(date, 1);// Goodfunction addMonthToDate(month, date) { // ...}const date = new Date();addMonthToDate(1, date);當(dāng)你有多個抽象級別時，你的函數(shù)通常會做太多事情。 拆分功能可以實(shí)現(xiàn)可重用性和更容易的測試。
// Badfunction parseBetterJSAlternative(code) { const REGEXES = [ // ... ]; const statements = code.split(" "); const tokens = []; REGEXES.forEach(REGEX => { statements.forEach(statement => { // ... }); }); const ast = []; tokens.forEach(token => { // lex... }); ast.forEach(node => { // parse... });}// Goodfunction parseBetterJSAlternative(code) { const tokens = tokenize(code); const syntaxTree = parse(tokens); syntaxTree.forEach(node => { // parse... });}function tokenize(code) { const REGEXES = [ // ... ]; const statements = code.split(" "); const tokens = []; REGEXES.forEach(REGEX => { statements.forEach(statement => { tokens.push(/* ... */); }); }); return tokens;}function parse(tokens) { const syntaxTree = []; tokens.forEach(token => { syntaxTree.push(/* ... */); }); return syntaxTree;}盡最大努力避免重復(fù)代碼。 重復(fù)的代碼是不好的，因?yàn)檫@意味著如果您需要更改某些邏輯，則需要在多個地方進(jìn)行更改。
// Badfunction showDeveloperList(developers) { developers.forEach(developer => { const expectedSalary = developer.calculateExpectedSalary(); const experience = developer.getExperience(); const githubLink = developer.getGithubLink(); const data = { expectedSalary, experience, githubLink }; render(data); });}function showManagerList(managers) { managers.forEach(manager => { const expectedSalary = manager.calculateExpectedSalary(); const experience = manager.getExperience(); const portfolio = manager.getMBAProjects(); const data = { expectedSalary, experience, portfolio }; render(data); });}// Goodfunction showEmployeeList(employees) { employees.forEach(employee => { const expectedSalary = employee.calculateExpectedSalary(); const experience = employee.getExperience(); const data = { expectedSalary, experience }; switch (employee.type) { case "manager": data.portfolio = employee.getMBAProjects(); break; case "developer": data.githubLink = employee.getGithubLink(); break; } render(data); });}// Badconst menuConfig = { title: null, body: "Bar", buttonText: null, cancellable: true};function createMenu(config) { config.title = config.title || "Foo"; config.body = config.body || "Bar"; config.buttonText = config.buttonText || "Baz"; config.cancellable = config.cancellable !== undefined ? config.cancellable : true;}createMenu(menuConfig);// Goodconst menuConfig = { title: "Order", // User did not include 'body' key buttonText: "Send", cancellable: true};function createMenu(config) { let finalConfig = Object.assign( { title: "Foo", body: "Bar", buttonText: "Baz", cancellable: true }, config ); return finalConfig // config now equals: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true} // ...}createMenu(menuConfig);標(biāo)志告訴你的用戶這個函數(shù)不止做一件事。 函數(shù)應(yīng)該做一件事。 如果函數(shù)遵循基于布爾值的不同代碼路徑，則拆分它們。
// Badfunction createFile(name, temp) { if (temp) { fs.create(`./temp/${name}`); } else { fs.create(name); }}// Goodfunction createFile(name) { fs.create(name);}function createTempFile(name) { createFile(`./temp/${name}`);}在 JavaScript 中污染全局變量是一種不好的做法，因?yàn)槟憧赡軙c另一個庫發(fā)生沖突，并且 API 的用戶在生產(chǎn)中遇到異常之前不會意識到這一點(diǎn)。
// BadArray.prototype.diff = function diff(comparisonArray) { const hash = new Set(comparisonArray); return this.filter(elem => !hash.has(elem));};// Goodclass SuperArray extends Array { diff(comparisonArray) { const hash = new Set(comparisonArray); return this.filter(elem => !hash.has(elem)); }}JavaScript 不像 Haskell 那樣是一種函數(shù)式語言，但它具有函數(shù)式風(fēng)格。 函數(shù)式語言可以更簡潔、更容易測試。 盡可能喜歡這種編程風(fēng)格。
// Badconst programmerOutput = [ { name: "Uncle Bobby", linesOfCode: 500 }, { name: "Suzie Q", linesOfCode: 1500 }, { name: "Jimmy Gosling", linesOfCode: 150 }, { name: "Gracie Hopper", linesOfCode: 1000 }];let totalOutput = 0;for (let i = 0; i < programmerOutput.length; i++) { totalOutput += programmerOutput[i].linesOfCode;}// Goodconst programmerOutput = [ { name: "Uncle Bobby", linesOfCode: 500 }, { name: "Suzie Q", linesOfCode: 1500 }, { name: "Jimmy Gosling", linesOfCode: 150 }, { name: "Gracie Hopper", linesOfCode: 1000 }];const totalOutput = programmerOutput.reduce( (totalLines, output) => totalLines + output.linesOfCode, 0);// Badif (fsm.state === "fetching" && isEmpty(listNode)) { // ...}// Goodfunction shouldShowSpinner(fsm, listNode) { return fsm.state === "fetching" && isEmpty(listNode);}if (shouldShowSpinner(fsmInstance, listNodeInstance)) { // ...}// Badfunction isDOMNodeNotPresent(node) { // ...}if (!isDOMNodeNotPresent(node)) { // ...}// Goodfunction isDOMNodePresent(node) { // ...}if (isDOMNodePresent(node)) { // ...}回調(diào)不干凈，并且會導(dǎo)致過多的嵌套。 在 ES2015/ES6 中，Promise 是內(nèi)置的全局類型。 使用它們！
// Badimport { get } from "request";import { writeFile } from "fs";get( "https://en.wikipedia.org/wiki/Robert_Cecil_Martin", (requestErr, response, body) => { if (requestErr) { console.error(requestErr); } else { writeFile("article.html", body, writeErr => { if (writeErr) { console.error(writeErr); } else { console.log("File written"); } }); } });// Goodimport { get } from "request-promise";import { writeFile } from "fs-extra";get("https://en.wikipedia.org/wiki/Robert_Cecil_Martin") .then(body => { return writeFile("article.html", body); }) .then(() => { console.log("File written"); }) .catch(err => { console.error(err); });Promise 是回調(diào)的一個非常干凈的替代方案，但 ES2017/ES8 帶來了 async 和 wait，它提供了更干凈的解決方案。
您所需要的只是一個以 async 關(guān)鍵字為前綴的函數(shù)，然后您可以命令式地編寫邏輯，而無需 then 函數(shù)鏈。
// Badimport { get } from "request-promise";import { writeFile } from "fs-extra";get("https://en.wikipedia.org/wiki/Robert_Cecil_Martin") .then(body => { return writeFile("article.html", body); }) .then(() => { console.log("File written"); }) .catch(err => { console.error(err); });// Goodimport { get } from "request-promise";import { writeFile } from "fs-extra";async function getCleanCodeArticle() { try { const body = await get( "https://en.wikipedia.org/wiki/Robert_Cecil_Martin" ); await writeFile("article.html", body); console.log("File written"); } catch (err) { console.error(err); }}getCleanCodeArticle()拋出錯誤是一件好事！ 它們意味著運(yùn)行時已成功識別出程序中的某些問題，并且它會通過停止當(dāng)前堆棧上的函數(shù)執(zhí)行、終止進(jìn)程（在 Node 中）并通過堆棧跟蹤在控制臺中通知您來通知您。
對捕獲的錯誤不采取任何措施并不能讓您有能力修復(fù)或?qū)λ鲥e誤做出反應(yīng)。 將錯誤記錄到控制臺 (console.log) 也好不了多少，因?yàn)樗３允г诖蛴〉娇刂婆_的大量內(nèi)容中。
如果您將任何代碼包裝在 try/catch 中，則意味著您認(rèn)為那里可能會發(fā)生錯誤，因此您應(yīng)該為錯誤發(fā)生時制定計劃或創(chuàng)建代碼路徑。
// Badtry { functionThatMightThrow();} catch (error) { console.log(error);}// Goodtry { functionThatMightThrow();} catch (error) { // One option (more noisy than console.log): console.error(error); // Another option: notifyUserOfError(error); // Another option: reportErrorToService(error); // OR do all three!}出于同樣的原因，您不應(yīng)該忽略 try/catch 中捕獲的錯誤。
// Badgetdata() .then(data => { functionThatMightThrow(data); }) .catch(error => { console.log(error); });// Goodgetdata() .then(data => { functionThatMightThrow(data); }) .catch(error => { // One option (more noisy than console.log): console.error(error); // Another option: notifyUserOfError(error); // Another option: reportErrorToService(error); // OR do all three! });評論是道歉，而不是要求。 好的代碼主要是文檔本身。
// Badfunction hashIt(data) { // The hash let hash = 0; // Length of string const length = data.length; // Loop through every character in data for (let i = 0; i < length; i++) { // Get character code. const char = data.charCodeAt(i); // Make the hash hash = (hash << 5) - hash + char; // Convert to 32-bit integer hash &= hash; }}// Goodfunction hashIt(data) { let hash = 0; const length = data.length; for (let i = 0; i < length; i++) { const char = data.charCodeAt(i); hash = (hash << 5) - hash + char; // Convert to 32-bit integer hash &= hash; }}版本控制的存在是有原因的。 將舊代碼留在您的歷史記錄中。
// BaddoStuff();// doOtherStuff();// doSomeMoreStuff();// doSoMuchStuff();// GooddoStuff();請記住，使用版本控制！ 不需要死代碼、注釋代碼，尤其是期刊注釋。 使用 git log 獲取歷史記錄！
// Bad/** * 2016-12-20: Removed monads, didn't understand them (RM) * 2016-10-01: Improved using special monads (JP) * 2016-02-03: Removed type-checking (LI) * 2015-03-14: Added combine with type-checking (JR) */function combine(a, b) { return a + b;}// Goodfunction combine(a, b) { return a + b;}它們通常只是增加噪音。 讓函數(shù)和變量名稱以及正確的縮進(jìn)和格式為代碼提供視覺結(jié)構(gòu)。
// Bad////////////////////////////////////////////////////////////////////////////////// Scope Model Instantiation////////////////////////////////////////////////////////////////////////////////$scope.model = { menu: "foo", nav: "bar"};////////////////////////////////////////////////////////////////////////////////// Action setup////////////////////////////////////////////////////////////////////////////////const actions = function() { // ...};// Good$scope.model = { menu: "foo", nav: "bar"};const actions = function() { // ...};從一開始就讓代碼干凈并不總是那么容易。 重要的是要記住，沒有必要執(zhí)著于使每條線路都完美，尤其是當(dāng)您的日程安排很緊時。 只是沒有足夠的時間來一遍又一遍地重寫代碼。
相反，專注于在有限的時間內(nèi)編寫最好的代碼。 當(dāng)下一輪更新到來并且您注意到可以改進(jìn)的內(nèi)容時，這是進(jìn)行這些更改的好時機(jī)。
每個公司和每個項(xiàng)目都有自己的編碼風(fēng)格，它可能與我分享的技巧不同。 如果您加入一個已經(jīng)啟動并運(yùn)行的項(xiàng)目，通常最好堅(jiān)持使用已經(jīng)存在的編碼風(fēng)格（除非您要重構(gòu)它）。 這是因?yàn)樵谡麄€代碼中保持一致的風(fēng)格也是保持代碼整潔的一種形式。
請記住，干凈的代碼是一個旅程，而不是目的地。 這是關(guān)于隨著時間的推移做出小的改進(jìn)，而不是陷入完美。 通過應(yīng)用您所學(xué)到的技巧，您將能夠編寫出更簡潔、更高效的 JavaScript 代碼，未來的您和其他人都會感謝您。
最后，感謝您的閱讀，也期待你的關(guān)注，祝編程快樂！
本文鏈接：http://m.www897cc.com/showinfo-26-80189-0.html26個寫出簡潔優(yōu)雅JavaScript代碼的技巧
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 高效運(yùn)維指南：通過 CLI 管理阿里云 ECS 實(shí)例
下一篇： Htmx，它到底是框架還是庫？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號