[[269412]]

對(duì)很多人來(lái)說(shuō)，學(xué)寫代碼很難。本文將通過編寫與眾不同且富有詩(shī)意的代碼來(lái)克服學(xué)習(xí)代碼最初遇到的困難。如果你是個(gè)JavaScript新手，或者是在編程學(xué)習(xí)過程中遇到了困難，本文介紹的方法也許可以幫到你。

為什么學(xué)習(xí)編程這么難?

以下是人們對(duì)編程很難學(xué)及JavaScript(或任何編程語(yǔ)言)很枯燥的一些誤解：

• 代碼晦澀難懂令人望而生畏，只有實(shí)用功能毫無(wú)樂趣;
• 代碼僅適用于機(jī)器，人們無(wú)法與它交流或參與其中;
• 代碼不算一種語(yǔ)言，因?yàn)樗c一般語(yǔ)言的用法截然不同，形式上的差別也很大;
• 提到程序員，人們就會(huì)想到邪惡的黑客或黑客帝國(guó)的成員等刻板形象，因此沒有認(rèn)同感。

未接觸編程的人

開發(fā)人員需要以一種非常特殊的方式看待代碼，甚至要以一種完全不同且高度邏輯化的方式來(lái)思考。編程語(yǔ)言非常嚴(yán)格，對(duì)錯(cuò)誤零容忍，單個(gè)字符就可能使機(jī)器無(wú)法理解人們的意思，并使應(yīng)用程序奔潰。學(xué)習(xí)編程時(shí)，應(yīng)將之前學(xué)習(xí)人類語(yǔ)言時(shí)的讀寫規(guī)則歸零(順便說(shuō)一下，在學(xué)習(xí)一種新的人類語(yǔ)言時(shí)也是如此)。

但并非網(wǎng)上的編程語(yǔ)言、文檔或視頻教程都是針對(duì)“從人類語(yǔ)言到編程語(yǔ)言的轉(zhuǎn)換”這一思維而編寫的。當(dāng)然，他們也沒有必要這樣做。畢竟，寫代碼的主要是為了告訴機(jī)器要做什么。

鑒于此目的，沒有機(jī)會(huì)對(duì)這兩種語(yǔ)言進(jìn)行比較，因此人類的語(yǔ)言(包括詞匯和語(yǔ)法規(guī)則)似乎對(duì)學(xué)習(xí)編程語(yǔ)言毫無(wú)用處。JavaScript語(yǔ)言中沒有“愛”這個(gè)詞，“我愛你。”這句話在其中也沒有意義。機(jī)器(或?yàn)g覽器)根本不理解愛。這種“聞所未聞”、“無(wú)從下手”的感覺可能會(huì)讓人感到害怕。

***次接觸編程的人

這就是本文的意義所在，借助已掌握的人類語(yǔ)言知識(shí)，將JavaScript看作一種人類語(yǔ)言，以一種更容易、更具藝術(shù)性的方式來(lái)學(xué)習(xí)它。舉個(gè)小例子來(lái)說(shuō)明吧!

一個(gè)有趣的事實(shí)是，一些編程語(yǔ)言實(shí)際上已經(jīng)從一種編程語(yǔ)言轉(zhuǎn)換到另一種編程語(yǔ)言。這就是為什么掌握多種編程語(yǔ)言變得簡(jiǎn)單多了——只學(xué)一門編程語(yǔ)言就夠啦。

一個(gè)小例子

例如，在很多情況下，要想運(yùn)行JavaScript代碼，需要準(zhǔn)備好“文檔”(基本上是網(wǎng)站，用戶每次訪問時(shí)都在下載)，以便與HTML元素進(jìn)行交互。在純JavaScript語(yǔ)言中，可能會(huì)偶然發(fā)現(xiàn)以下內(nèi)容。

(function() { 
 // Your code goes here 
})(); 

或者有時(shí)像這樣：

if (document.readyState === ‘complete’) { 
 // Your code goes here 
} 

上述***個(gè)代碼肯定需要加以解釋，而對(duì)第二個(gè)代碼(也許需要一些想象)，可以這樣理解：滿足了必需的某個(gè)條件后，后續(xù)步驟僅通過觀察就能進(jìn)行下去。

試想這樣的場(chǎng)景：

onceUponATime(function () { 
 // Your code (story) goes here 
}) 

連小孩都能理解“Once upon a time” (“曾幾何時(shí)”)這樣的內(nèi)容。這種內(nèi)容在與開發(fā)者對(duì)話(通過喚起他們的童年回憶)，同時(shí)在理論上也能做開發(fā)。這就是“讓人類語(yǔ)言轉(zhuǎn)換為編碼語(yǔ)言”的想法。

關(guān)于“functions(函數(shù))”的簡(jiǎn)要說(shuō)明：函數(shù)基本來(lái)說(shuō)是一種技能，在調(diào)用之前處于休眠狀態(tài)。“To read”是function read() { …}}的一項(xiàng)技能，想讀取某內(nèi)容時(shí)就寫成這樣：read()，就會(huì)調(diào)用才會(huì)調(diào)用該函數(shù)。還有一種是“匿名函數(shù)”，即function(){ … }(沒有名字，就像上面的代碼片段那樣)，它基本上是“一次性的臨時(shí)操作”，甚至不算一種技能，例如“按下按鈕”。

扭轉(zhuǎn)乾坤：從信息到基礎(chǔ)

要更進(jìn)一步了解這個(gè)想法，可將上述的原因和誤解顛倒過來(lái)：

一首小詩(shī)，

用JavaScript語(yǔ)言編寫。

為人類而寫，

講述兩個(gè)人之間的愛。

// Love at first sight 
if (me.getDistanceTo(you.position) < 200) { 
 me.setFeelings({ 
 inLove: true, 
 }); 
} 

它不具有功能性，目前也不適用于機(jī)器，只是方便人們閱讀和理解。

如果你能看懂這首詩(shī)，你實(shí)際上是理解了一段JavaScript代碼，也許你還會(huì)拿來(lái)與英語(yǔ)進(jìn)行比較。

現(xiàn)在你可能會(huì)問自己：我理解這一點(diǎn)，但它為什么這么寫呢?這種語(yǔ)言背后的規(guī)則(語(yǔ)法)是什么呢?“me”在技術(shù)層面是什么意思?為什么這段代碼看起來(lái)很像英語(yǔ)?

規(guī)則、詞匯和變量

學(xué)習(xí)編程語(yǔ)言時(shí)，最重要的事情之一就是理解變量的概念。

每一種人類語(yǔ)言都有其規(guī)則(語(yǔ)法)和大量詞匯(意思均已知)。顯然，只有先學(xué)習(xí)這兩點(diǎn)才會(huì)說(shuō)這種語(yǔ)言。

與許多其它編程語(yǔ)言一樣，JavaScript也有一套規(guī)則(例如，單詞之間要加“.”或如何編寫“if”語(yǔ)句)和詞匯(if、document、window、Event等)。這些關(guān)鍵字由JavaScript(和瀏覽器)所有(或“預(yù)先定義”)，并且每個(gè)關(guān)鍵字都有其特定用途。

就像之前提到的那樣，似乎沒有機(jī)會(huì)去和英語(yǔ)中的單詞和句子做比較，因?yàn)镴avaScript中根本沒有對(duì)應(yīng)的詞和句子。

這就是引入變量這個(gè)概念的原因，開發(fā)人員可以(甚至必須)定義變量，以便讓機(jī)器和開發(fā)人員理解某些東西代表什么。變量可以采用多種形式(因此得名)：它們可以是一串單詞和字母(字符串)、數(shù)字、操作(函數(shù))、甚至集合(數(shù)組)，不勝枚舉。

在所有人類語(yǔ)言中，可能都有一個(gè)關(guān)于“love”的詞，你大概明白它是什么意思，但不太肯定，因?yàn)樗饔^了。但無(wú)論怎樣，還是有一個(gè)詞可以形容它。

但在JavaScript中，如果不定義“love”，就沒有與之對(duì)應(yīng)的表達(dá)，至于形式，則完全取決于你。

var love = { 
 color: ‘red’, 
 duration: 365, 
 loveTarget: ‘cats’, 
}; 
// a simple variable expression, 
// where love is an object “{ … }”, a thing 
// with some properties (color, duration, loveTarget). 
const love2 = { 
 color: ‘purple’, 
 duration: ‘forever’, 
 loveTarget: ‘dogs’, 
}; 
// also a variable expression, where love2 (aconstant), 
// cannot be redefined / overwritten completely: 
// love2 = undefined; // => will not work 
// (“undefined” is a pre-defined javascriptkeyword, 
// basically saying “has no value”) 

區(qū)分JavaScript中預(yù)定義的內(nèi)容(JavaScript規(guī)則和詞匯表)與開發(fā)人員實(shí)際自定義的內(nèi)容(也稱為“應(yīng)用程序邏輯”或“業(yè)務(wù)邏輯”)十分重要。

回到上面寫的詩(shī)：

// Love at first sight 
if (me.getDistanceTo(you.position) < 200) { 
 me.setFeelings({ 
 inLove: true, 
 }); 
} 

這些表達(dá)式來(lái)自以下JavaScript詞匯表規(guī)則集：

if (…) { … } 
// if statement: when … is met, do things in { … } 
{ 
 inLove: true, 
} 
// an “object” with some info, some thing in the world. 
// can contain other info, and “skills” (functions). 
// “inLove” is a custom property, 
// “true” is pre-defined in javascript, (meaning: “yes”) 
// and the value of “inLove”. 
. 
// needed to access an objects property “my name: me.name” 
getDistanceTo() 
// an expression to “call” a function (a “skill”). 
// getDistanceTo is custom (not JavaScript), and a function, 
// so it can be executed / called upon with the “()” after. 
// sometimes you can pass arguments in those brackets (like “position”) 
// to change the outcome of a function. 

這些是變量，可以自定義它們的名稱和行為。

me // an object, some thing in the world 
you // an object, some thing in the world 
position // an info about “you”, accessed by the “.” 
getDistanceTo // a skill of me, accessed by the “.” 
getDistanceTo() // the skill, with javascript grammar telling: do it. 
getDistanceTo(position) // same, but do it with “position”. 
setFeelings // another skill of me, accessed by the “.” 
setFeelings({ inLove: true }); // the skill, with some instructions (anobject). 

假設(shè)這是一首人類讀得懂的詩(shī)，你可能已經(jīng)理解了其中的信息，也可能看到了需要遵循的JavaScript語(yǔ)言規(guī)則與需要提出的內(nèi)容(變量)之間有何區(qū)別。

但機(jī)器又會(huì)怎么做呢?

如果是機(jī)器(瀏覽器)讀取這首詩(shī)，那就會(huì)識(shí)別為錯(cuò)誤。機(jī)器需要一個(gè)“me”和“you”的定義，因?yàn)樗噲D訪問其屬性(通過在me.getDistanceTo()中的“.”來(lái)訪問)。有了上面提到的區(qū)分能力，實(shí)際上你可以設(shè)計(jì)“me”和“you”,讓計(jì)算機(jī)能夠執(zhí)行或讀取詩(shī)，如下所示：

// This is how the definition of a being (me/you)could look like 
var me = { 
 position: {x: 0, y: 0} // some coordinates, maybe 
 getDistanceTo: function(position) { 
 // calculate the distance, relative to own position 
 }, 
 setFeelings: function(feelings) { 
 // handle those feelings… 
 } 
} 
var you = { 
 position: {x: 0, y: 0} // some coordinates, maybe 
} 
// the poem itself 
if (me.getDistanceTo(you.position) < 200) { 
 me.setFeelings({ 
 inLove: true, 
 }); 
} 

那么在這里發(fā)生了什么?

• 為了讓人們理解，讀取一首用JavaScript“語(yǔ)法”編寫而成的JavaScript詩(shī);
• 在理解信息之后，為理解詩(shī)的結(jié)構(gòu)(JavaScript的語(yǔ)法和基礎(chǔ)知識(shí))，對(duì)規(guī)則、詞匯和變量進(jìn)行了區(qū)分;
• 通過這種區(qū)分后，使用JavaScript規(guī)則設(shè)計(jì)了其余的詩(shī)歌變量，使其可以通過機(jī)器(在瀏覽器中)運(yùn)行。

這可以做到，因?yàn)樘幚鞪avaScript，就像處理英語(yǔ)語(yǔ)言一樣。

更大的例子：交互式代碼詩(shī)歌

LoveBits是一種代碼學(xué)習(xí)或用代碼講故事的體驗(yàn)。

LoveBits：基于JavaScript的代碼詩(shī)歌項(xiàng)目

它試圖通過以下方式讓人們對(duì)JavaScript或代碼感興趣：

• 將可讀性和人類語(yǔ)言放在***位;
• 將代碼與讀者可能熟知的藝術(shù)形式相結(jié)合。

故事情節(jié)與兩個(gè)比特(矩形狀)有關(guān);其中一個(gè)比特(blueBit)是浪漫主義者，為另一個(gè)比特(purpleBit)寫出JavaScript的愛情詩(shī)。

啟動(dòng)LoveBits時(shí)，可選擇其中一首愛情詩(shī)(由JavaScript代碼編寫而成)。每首詩(shī)都有一個(gè)代碼片段，不甚熟悉編程的人都能理解其中的編寫方式。這個(gè)項(xiàng)目唯一的要求就是要懂英語(yǔ)。

例如，“love at first sight”(實(shí)際上是LoveBits詩(shī)歌中的一首)講述的是這兩個(gè)比特之間的故事，詩(shī)中，blueBit大致是這么說(shuō)的，“If I get close enough toyour position, I will ‘set my feelings’ to inLove: true.”

這些詩(shī)歌的特殊之處在于你可以通過點(diǎn)擊下面的“play”按鈕,“run”或“play”它們。在“Love at first sight”的詩(shī)中，你會(huì)見到一個(gè)藍(lán)色和紫色的矩形以及一個(gè)數(shù)字。正如你猜到的那樣，它們就是詩(shī)中提到的兩個(gè)比特，而blueBit下面的數(shù)字實(shí)際上是blueBit和purpleBit之間的距離。

正如詩(shī)歌所暗示的那樣，你可能想要通過減少它們之間的距離讓blueBit愛上purpleBit。那要怎么做呢?可以和blueBit互動(dòng)，把它拖來(lái)拖去，讓它墜入愛河。但要小心，有時(shí)結(jié)果可不只一種。

實(shí)際上有人可能會(huì)說(shuō)程序員成為了這里的機(jī)器，但程序員才是需要解釋JavaScript代碼，并采取行動(dòng)幫助兩個(gè)數(shù)字生物墜入愛河的那個(gè)人。

未來(lái)將何去何從?

如果你是個(gè)奮力拼搏的開發(fā)者，試著將JavaScript視為人類語(yǔ)言吧，只了解需首先執(zhí)行的代碼片段就夠了，不必去考慮它們最終運(yùn)行的結(jié)果。

進(jìn)一步的建議：

• 永遠(yuǎn)優(yōu)先選擇能將規(guī)則、詞匯和變量組合在一起形成應(yīng)用程序邏輯的整個(gè)應(yīng)用程序;
• 應(yīng)用程序邏輯會(huì)講故事，這些故事將幫你填補(bǔ)上述代碼示例中的空白。代碼庫(kù)和實(shí)用程序(如lodash)只能提供新的詞匯表，在你能閱讀和理解JavaScript代碼后會(huì)有所幫助;
• 檢查現(xiàn)有代碼，并嘗試將其分解為具有反映其功能名稱的小函數(shù)。編寫適用于人和機(jī)器的代碼，編寫出可以像句子一樣閱讀的代碼，并在需要的地方加以注釋。思考：怎么用人類語(yǔ)言(向另一個(gè)開發(fā)者)表述這個(gè)代碼?

結(jié)論

將代碼視為人類語(yǔ)言而不是外星人發(fā)明的東西，學(xué)習(xí)代碼就會(huì)更容易。學(xué)習(xí)區(qū)分語(yǔ)言屬性(內(nèi)置)和應(yīng)用程序邏輯的變量/自定義代碼至關(guān)重要。理解了應(yīng)用程序邏輯，你就無(wú)需了解語(yǔ)言特征即可作出改進(jìn)和更改。

學(xué)習(xí)基礎(chǔ)知識(shí)前需明白：理解了任一代碼片段的信息，JavaScript的基礎(chǔ)知識(shí)自然就能隨之掌握。有多少次你聽到有人說(shuō)：“我能看懂這種語(yǔ)言，但我還不會(huì)說(shuō)。”這是一個(gè)自然過程，能夠并可能適用于人類語(yǔ)言和編碼語(yǔ)言的學(xué)習(xí)。

此外，請(qǐng)牢記代碼有明確的功能性目的，但也并非總是如此。即使是人類語(yǔ)言，曾經(jīng)也只滿足純粹的功能性需求，后來(lái)才出現(xiàn)了詩(shī)歌甚至歌曲(說(shuō)到這，有人對(duì)JavaScript歌曲感興趣嗎?)這些以截然不同方式使人們密切相聯(lián)的語(yǔ)言形式。這同樣適用于編程語(yǔ)言。