每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文,歡迎關注開源日報。交流QQ群:202790710;微博:https://weibo.com/openingsource;電報群 https://t.me/OpeningSourceOrg


今日推薦開源項目:《猴子也能看懂的 TensorFlow 教程 Easy-TensorFlow》GitHub鏈接

推薦理由:雖然說猴子大概是看不懂這個的,但是這個項目依然是一個很全面的教程,從安裝到如何創建表到各種各樣的類型再到重頭戲如何訓練神經網路,相信對於初學者來說已經可以解決不少問題了,強烈推薦給學習 TensorFlow 的朋友們,有了這個教程可以少走不少彎路。


今日推薦英文原文:《How To Make Your Code Readable》作者:Christopher Brown

原文鏈接:https://medium.com/@chbchb55/the-importance-of-readable-code-165895e939c7

推薦理由:「』當我寫這段代碼的時候,只有神仙和我知道我在寫什麼……好了,現在只有神仙知道了」

How To Make Your Code Readable

We』ve all seen (and written) bad code at one point or another and hopefully we』re all working at bettering these skills and not just learning the newest framework out there.

Why do we need to write good code, not just performant code?

While the performance of your product or site is important, so is the way your code looks. This reasoning behind this is that the machine isn』t the only entity reading your code.
First, and foremost, you are eventually going to have to re-read some portion of your code, if not the whole thing, and when that time comes performant code isn』t going to help you understand what you』ve written or figure out how to fix it.
Second, if you work on a team or collaborate with other developers then any time you write code your team members have to read your code and try to interpret it in a way they understand. To make that easier for them, it』s important to consider how you name variables and functions, the length of each line, and the structure of your code, among other things.
Lastly, it』s just nicer to look at.

Part 1: How do you identify bad code?

The simplest way to identify bad code, in my opinion, is to try to read your code as if it were a sentence or phrase.

For example, here is some code:

The pictured function above, when passed an element and a conditional function returns the nearest parent node that passes the conditional function.

const traverseUpUntil = (el, f) => {

Following the idea that code should be readable like regular writing, the first line has three fatal flaws.

  • The parameters for the function are not readable like words.
  • While el can be understood as it is commonly used to mean element, the parameter name f does not explain its purpose.
  • If you were to use the function it would read like so: 「traverse up until el passes f」 which could probably better read as 「traverse up until f passes, from el」. Granted, the best way to actually do this would to allow the function to be called like el.traverseUpUntil(f) but that』s a different problem.
let p = el.parentNode

This is the second line. Again we have a naming issue, this time with a variable. If one were to look at the code they would most likely understand what p is. It is the parentNode of parameter el . However, what happens when we look at p used anywhere else, we no longer have the context that explains what it is.

while (p.parentNode && !f(p)) {

In this line, the main problem we encounter is not knowing what !f(p) means or does, because 「f」 could mean anything at this point. What the person reading the code is supposed to understand is that !f(p) is a check to see if the current node passes the condition. If it does, stop the loop.

p = p.parentNode

This one is pretty self-explanatory.

return p

Not 100% clear what is being returned due to the bad variable name.

Part 2: Let』s make improvments

First we modify the parameter names and their order:(el, f) => into (condition, node) => (you can also do condition => node => which adds an extra layer of useability)
You might be wondering why, instead of using 「element」, I used 「node」. I used it because of the following:

  • We are already writing code in terms of nodes, for example .parentNode , so why not make it all the same.
  • It』s shorter than writing element without losing it』s meaning. And the reason why I say this is that it works with all forms of nodes that have the property 「parentNode」, not just HTML elements.

Next we touch up on the variable name(s):

let parent = node

It』s very important to fully elaborate the meaning of your variable within its name, 「p」 is now 「parent」. You may have also noticed we aren』t starting out by getting node.parentNode , instead we only get node .

This leads us into our next few lines:

do {
  parent = parent.parentNode
} while (parent.parentNode && !condition(parent))

Instead of a regular while loop I』ve opted for a do … while loop. This means that we only have to get the parent node once, as it runs the condition after the action, not the other way around. The use of the do … while loop also reaches back to being able to read the code like writing.

Let』s try reading it: 「Do parent equals parent』s parent node while there is a parent node and the condition function doesn』t return true.」 While that may seem a bit weird it helps us understand what the code means when we can easily read it.

return parent

While many people opt to use the generic ret variable (or returnValue), it is not a good practice to name the variable you return 「ret」. If you name your return variables appropriately it becomes obvious to what is being returned. However, sometimes functions can be long and daunting causing it to be more confusing. In this instance, I would suggest splitting your function into multiple functions and if it』s still too complicated adding comments can help.

Part 3: Simplify the code

Now that you』ve made the code readable it』s time to take out any unnecessary code. As I』m sure some of you have already noticed, we probably don』t need the variable parent at all.

const traverseUpUntil = (condition, node) => {
  do {
    node = node.parentNode
  } while (node.parentNode && !condition(node))
  
  return node
}

What I』ve done is taken out the first line and replaced 「parent」 with 「node」. This bypasses the unnecessary step of creating 「parent」 and goes straight to the loop.

But what about the variable name?

While 「node」 isn』t the best descriptor for this variable, it』s a decent one. But let』s not settle for decent, let』s rename it. How about 「currentNode」?

const traverseUpUntil = (condition, currentNode) => {
  do {
    currentNode = currentNode.parentNode
  } while (currentNode.parentNode && !condition(currentNode))
  
  return currentNode
}

That』s better! Now when we read it we know that no matter what currentNode will always represent the node we are currently at instead of it just being some node.


每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文,歡迎關注開源日報。交流QQ群:202790710;微博:https://weibo.com/openingsource;電報群 https://t.me/OpeningSourceOrg