[[269412]]

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

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

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

• 代碼晦澀難懂令人望而生畏，只有實用功能毫無樂趣;
• 代碼僅適用于機器，人們無法與它交流或參與其中;
• 代碼不算一種語言，因為它與一般語言的用法截然不同，形式上的差別也很大;
• 提到程序員，人們就會想到邪惡的黑客或黑客帝國的成員等刻板形象，因此沒有認同感。

未接觸編程的人

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

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

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

***次接觸編程的人

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

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

一個小例子

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

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

或者有時像這樣：

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

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

試想這樣的場景：

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

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

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

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

要更進一步了解這個想法，可將上述的原因和誤解顛倒過來：

一首小詩，

用JavaScript語言編寫。

為人類而寫，

講述兩個人之間的愛。

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

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

如果你能看懂這首詩，你實際上是理解了一段JavaScript代碼，也許你還會拿來與英語進行比較。

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

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

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

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

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

就像之前提到的那樣，似乎沒有機會去和英語中的單詞和句子做比較，因為JavaScript中根本沒有對應(yīng)的詞和句子。

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

在所有人類語言中，可能都有一個關(guān)于“love”的詞，你大概明白它是什么意思，但不太肯定，因為它太主觀了。但無論怎樣，還是有一個詞可以形容它。

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

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ā)人員實際自定義的內(nèi)容(也稱為“應(yīng)用程序邏輯”或“業(yè)務(wù)邏輯”)十分重要。

回到上面寫的詩：

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

這些表達式來自以下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è)這是一首人類讀得懂的詩，你可能已經(jīng)理解了其中的信息，也可能看到了需要遵循的JavaScript語言規(guī)則與需要提出的內(nèi)容(變量)之間有何區(qū)別。

但機器又會怎么做呢?

如果是機器(瀏覽器)讀取這首詩，那就會識別為錯誤。機器需要一個“me”和“you”的定義，因為它試圖訪問其屬性(通過在me.getDistanceTo()中的“.”來訪問)。有了上面提到的區(qū)分能力，實際上你可以設(shè)計“me”和“you”,讓計算機能夠執(zhí)行或讀取詩，如下所示：

// 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“語法”編寫而成的JavaScript詩;
• 在理解信息之后，為理解詩的結(jié)構(gòu)(JavaScript的語法和基礎(chǔ)知識)，對規(guī)則、詞匯和變量進行了區(qū)分;
• 通過這種區(qū)分后，使用JavaScript規(guī)則設(shè)計了其余的詩歌變量，使其可以通過機器(在瀏覽器中)運行。

這可以做到，因為處理JavaScript，就像處理英語語言一樣。

更大的例子：交互式代碼詩歌

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

LoveBits：基于JavaScript的代碼詩歌項目

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

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

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

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

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

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

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

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

未來將何去何從?

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

進一步的建議：

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

結(jié)論

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

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

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