如何寫好js - 寫代碼應該關注什么

• 😜序言
• 🤗part1：先來看一段代碼
• 🤫part2：寫代碼最應該關注什么？
• 🤔part3：當年的 Left-pad 事件
• 🥳結束語
• 🧐往期推薦

😜序言

接上一篇文章，我們繼續來看如何寫好 JS 。在下面的文章中，將講解寫代碼應該關注什么，以及通過引例闡述一些相關性問題。

下面開始本文的講解~

🤗part1：先來看一段代碼

首先我們先來看一段代碼。具體代碼如下：

//判斷一個mat2d矩陣是否是單位矩陣 function isUnitMatrix2d(m) {return m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1 && m[4] === 0 && m[5] === 0; }

我們先來思考一個問題：上面的代碼寫的好不好？為什么？

有的小伙伴可能會覺得寫起來看著不太美觀、又或者沒有注釋、擴展性不高等等各種原因。

---

其實，上面這段代碼是一段真實的代碼，其來源于一個開源庫。具體地址：spritejs

get layerTransformInvert() {if(this[_layerTransformInvert]) return this[_layerTransformInvert];const m = this.transformMatrix;if(m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1 && m[4] === 0 && m[5] === 0) {return nul l;}this[_layerTransformInvert] = mat2d.invert(m);return this[_layerTransformInvert]; }

現在，我們來分析一下上面這段代碼寫的好不好。具體分析結果如下：

單從代碼優雅性的角度來看的話，這段代碼確實不夠優雅。

但是呢，上面這個庫是一個圖形庫，且這段代碼負責的是在渲染之前，計算我們圖層的 transform 矩陣的邏輯代碼。

也就是說，我們在計算每一幀的時候，都需要進行一個計算。因此呢，在這樣的一個場景下，我們首先要去關注的是如何達到性能最優化。

而與其他任何類型的寫法來比，以上這種寫法能夠達到性能最大化，所以，以上這段代碼在這樣的一個場景下是沒有任何問題滴。

同時呢，如果是對于其他場景來說，如果堆性能優化沒有這么敏感的話，是可以不用這么寫滴。

所以，一般來說，代碼的好壞要結合它的使用場景來分析。

🤫part2：寫代碼最應該關注什么？

• 寫代碼我們應該要注重風格、效率、約定、 使用場景（算法） 和設計等方面；
• 風格：選擇什么風格都沒有錯，關鍵是風格要統一（分號、行尾花括號等等）；
• 效率：在寫代碼時要考慮什么樣的代碼寫起來效率是最高的，能寫高效率的代碼就不要寫低效率的代碼；當然，也要追求一個平衡就是，要結合它的場景來使用；
• 約定：在開發前，團隊要約定好代碼規范和風格，比如 eslint 、 airbnb 等等；

🤔part3：當年的 Left-pad 事件

我們來了解下當年 github 的 Left-pad 事件。先來這個事件中的一段代碼，具體如下：

function leftpad (str, len, ch) {str = String(str);var i = -1;if (!ch && ch !== 0) ch = '';len = len - str.length;while(++i < len) {str = ch - str;}return str; }

那么這個作者想要實現的功能就是，比如說我現在有一段字符串，然后呢，我想要把這段字符串拼接成同樣長度的字符串。

這個使用場景通常會放在一些展示類的地方，比如排序。當時這個模塊一開始被用于很多的 npm 包中，但是后面被作者下線了，所以引起了很大的風波，因為很多人在用的庫突然被下線了，試想，開發者豈不是要哭遼。

那這個事件本身的槽點呢，主要有以下三點：

• NPM 模塊粒度
• 代碼風格
• 代碼質量和代碼效率

如果要考慮效率的話，那么我們可以對代碼進行改進。比如：

function leftpad(str, len, ch = '') {str = "" + str;// 判斷要補充的代碼長度const padLen = len - str.length;if(padLen <= 0) {return str;}else {return ("" + ch).repeat(padLen) + str;} }

通過這樣的改進，使得代碼更簡潔，同時也極大的提升了運行效率。

🥳結束語

在上面的這篇文章中，我們了解到了當年的 left-pad 事件，同時呢，我們也學習到了寫代碼應該關注的5個問題：風格、效率、約定、 使用場景（算法） 和設計。

到這里，關于本文講解就結束啦~

如果您覺得這篇文章有幫助到您的的話不妨點贊支持一下喲~~😛

🧐往期推薦

👉值得關注的HTML基礎知識

👉css還只停留在寫布局？10分鐘帶你探索css中更為奇妙的奧秘！

👉【青訓營】- 前端只是切圖仔？來學學給開發人看的UI設計

👉【青訓營】- 緊跟月影大佬的步伐，一起來學習如何寫好JS（上）

總結

以上是生活随笔為你收集整理的紧跟月影大佬的步伐，一起来学习如何写好JS（下）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。