如何寫好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（上）
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/301083.html
標籤：其他