分享8個可以提高開發效率的JavaScript庫

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"現代前端開發相比以前來說幸福很多了，過去爲了兼容IE、火狐等瀏覽器環境焦頭爛額，爲了減少代碼加速文件的加載儘可能的編寫原生JavaScript，能不用插件就不用（插件由於要考慮通用性，會增加很多兼容代碼）。這一切變化首要功能應該要給谷歌瀏覽器提供的開源核心，360瀏覽器爲中國用戶普及高級瀏覽器的努力，網絡提速政策的實時。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"隨着5G技術的發展普及，未來將有大量的應用場景將由前端來承擔。本文跟大家分享8個可以提高開發效率的JavaScript庫，不需要花時間自己去編寫常用的基礎函數，避免重複造輪子，讓更多的精力去優化應用場景的邏輯，也提高開發效率。當然作爲團隊，可以通過學習這些開源JavaScript庫，構建適用於團隊的基礎框架。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"1. Lodash","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://lodash.com/","title":"","type":null},"content":[{"type":"text","text":"Lodash","attrs":{}}]},{"type":"text","text":"是最實用的JavaScript庫之一，擁有大量的函數特性集，像數組、對象、字符串、數字等類型的常見處理函數，語法上面通俗易懂，容易上手，也是一個學習編碼技術的好庫。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主頁：","attrs":{}},{"type":"link","attrs":{"href":"https://lodash.com/","title":"","type":null},"content":[{"type":"text","text":"https://lodash.com/","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一下是簡單的示例代碼：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"const _ = require(\"lodash\");\nconst objIntro = {\n title: \"devpoint\",\n city: \"Shenzhen\",\n};\nconst arrMonths = [\"一月\", \"二月\"];\n_.forEach(objIntro, (value, key) => {\n console.log(`${key}:${value}`);\n});\n// title:devpoint\n// city:Shenzhen\n_.forEach(arrMonths, (value, index) => {\n console.log(`${index}:${value}`);\n});\n// 0:一月\n// 1:二月\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"2.Luxon","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://moment.github.io/luxon/","title":"","type":null},"content":[{"type":"text","text":"Luxon","attrs":{}}]},{"type":"text","text":" 是一個非常流行的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"日期/時間","attrs":{}}],"attrs":{}},{"type":"text","text":" 操作庫，是新項目的最佳選擇，因爲它使用更現代的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Intl","attrs":{}}],"attrs":{}},{"type":"text","text":" 對象，具有解析、操作和創建與時間相關的所有功能。當然還有一個類似的JavaScript庫是 ","attrs":{}},{"type":"link","attrs":{"href":"https://momentjs.com/","title":"","type":null},"content":[{"type":"text","text":"Moment","attrs":{}}]},{"type":"text","text":" 。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Intl","attrs":{}}],"attrs":{}},{"type":"text","text":" 對象是 ECMAScript 國際化 API 的一個命名空間，它提供了精確的字符串對比、數字格式化，和日期時間格式化 【","attrs":{}},{"type":"link","attrs":{"href":"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl","title":"","type":null},"content":[{"type":"text","text":"詳細介紹","attrs":{}}]},{"type":"text","text":"】。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主頁：","attrs":{}},{"type":"link","attrs":{"href":"https://moment.github.io/luxon/","title":"","type":null},"content":[{"type":"text","text":"https://moment.github.io/luxon/","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"const luxon = require(\"luxon\");\n\nconst convertTime = (timestamp, format = \"yyyy-MM-dd hh:mm\") => {\n return luxon.DateTime.fromMillis(timestamp).toFormat(format);\n};\nconst now = luxon.DateTime.now();\nconst nowUtc = now.toString(); // 2021-06-12T12:07:51.897+08:00\nconst nowTimestamp = now.toMillis(); // 1623470871897\nconst formatTime = convertTime(nowTimestamp); // 2021-06-12 12:07\nconsole.log(nowUtc); // 2021-06-12T12:07:51.897+08:00\nconsole.log(nowTimestamp); // 1623470871897\nconsole.log(formatTime); // 2021-06-12 12:07\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3.NanoID","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"創建記錄唯一的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"key","attrs":{}}],"attrs":{}},{"type":"text","text":"，一般採用自遞增的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ID","attrs":{}}],"attrs":{}},{"type":"text","text":"或者採用UUID，這裏推薦一個創建唯一ID的JavaScript庫 NanoID。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/ai/nanoid/","title":"","type":null},"content":[{"type":"text","text":"NanoID","attrs":{}}]},{"type":"text","text":" 創建一個由字母數字組成的ID，通常比UUID要小，它是用於創建安全並且唯一ID的最小庫之一，本身可以縮小並壓縮到僅只有 108 字節。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主頁：","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/ai/nanoid/","title":"","type":null},"content":[{"type":"text","text":"https://github.com/ai/nanoid/","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"const { nanoid } = require(\"nanoid\");\n\nconst key = nanoid();\nconsole.log(key); // U6XRwZsfcDuexQ7m55qdy\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.Passport","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在現代 Web 應用程序中，身份驗證可以採用多種形式。傳統上，用戶通過提供用戶名和密碼進行登錄。隨着社交網絡的興起，使用 OAuth 提供商（如 Facebook 或 谷歌）的單點登錄已成爲一種流行的身份驗證方法，公開 API 的服務通常需要基於令牌的憑據來保護訪問。如果自己需要去實現整個邏輯還是挺繁瑣的，如果你有這方便的需求，可以考慮 ","attrs":{}},{"type":"link","attrs":{"href":"http://www.passportjs.org/","title":"","type":null},"content":[{"type":"text","text":"Passport","attrs":{}}]},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主頁：","attrs":{}},{"type":"link","attrs":{"href":"http://www.passportjs.org/","title":"","type":null},"content":[{"type":"text","text":"http://www.passportjs.org/","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"app.post(\"/login\", passport.authenticate(\"local\"), function (req, res) {\n\n res.redirect(\"/users/\" + req.user.username);\n});\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"5.Faker","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/marak/Faker.js/","title":"","type":null},"content":[{"type":"text","text":"Faker","attrs":{}}]},{"type":"text","text":" 是一種將虛假數據快速添加到應用程序中以進行測試的腳本庫，通過它可以生成姓名、圖片、產品信息、銀行信息等虛擬信息。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主頁：","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/marak/Faker.js/","title":"","type":null},"content":[{"type":"text","text":"https://github.com/marak/Faker.js/","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"const faker = require(\"faker\");\nconst randomName = faker.name.findName();\nconst randomEmail = faker.internet.email();\nconst randomProductName = faker.commerce.productName();\nconsole.log(randomName); // Dr. Debbie Rowe\nconsole.log(randomEmail); // [email protected]\nconsole.log(randomProductName); // Intelligent Frozen Keyboard\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"6.Axios","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/axios/axios","title":"","type":null},"content":[{"type":"text","text":"Axios","attrs":{}}]},{"type":"text","text":" 是一個非常熟悉的基於 promise 的 HTTP 庫，易於使用，常用於vue項目中。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主頁：","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/axios/axios","title":"","type":null},"content":[{"type":"text","text":"https://github.com/axios/axios","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"axios\n .get(\"/auth?id=89\")\n .then(function (response) {\n console.log(response);\n })\n .catch(function (error) {\n console.log(error);\n });\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"7.axios-mock-adapter","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://www.npmjs.com/package/axios-mock-adapter","title":"","type":null},"content":[{"type":"text","text":"axios-mock-adapter","attrs":{}}]},{"type":"text","text":"是一款基於axios的請求模擬器，用來模擬HTTP請求，對於前端項目開發非常實用，可以在後臺服務未完成之前按照API協議模擬相應的請求及響應。在以vue做後臺管理項目中，可以使用它來實現請求攔截並模擬後臺回覆","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主頁：","attrs":{}},{"type":"link","attrs":{"href":"https://www.npmjs.com/package/axios-mock-adapter","title":"","type":null},"content":[{"type":"text","text":"https://www.npmjs.com/package/axios-mock-adapter","attrs":{}}]}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"8.Nodemon","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在開發 Web 應用程序時，特別是基於 node.js 的後臺服務，Nodemon是個不容錯過工具。在《","attrs":{}},{"type":"link","attrs":{"href":"https://juejin.cn/post/6969114676059701261","title":"","type":null},"content":[{"type":"text","text":"使用 Docker 開發Node應用程序","attrs":{}}]},{"type":"text","text":"》中簡單介紹過其使用，用來監聽 node.js 項目中文件的更改並自動重啓服務的工具。可以使開發變得更容易，節省了每次更改時自己重新啓動服務器的時間。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主頁：","attrs":{}},{"type":"link","attrs":{"href":"https://www.npmjs.com/package/nodemon","title":"","type":null},"content":[{"type":"text","text":"https://www.npmjs.com/package/nodemon","attrs":{}}]}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"總結","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"合理利用開源JavaScript庫，避免重複製造輪子，以助於提升效率是個不錯的選擇，同樣對於提升JavaScript編碼水平，這些開源庫是個不錯的教材。","attrs":{}}]}]}