js給初學者的(de)印象總是(shì)那麽的(de)“雜而(ér)亂”，相信很多初學者都在(zài)找輕松學習js的(de)途徑。我試着總結自己學習多年js的(de)經驗，希望能給後來(lái)的(de)學習者探索出(chū)一(yī / yì ／yí)條“輕松學習js之(zhī)路”。js給人(rén)那種感覺的(de)原因多半是(shì)因爲(wéi / wèi)它如下的(de)特點：

A：本身知識很抽象、晦澀難懂，如：閉包、内置對象、DOM。

B：本身内容很多，如函數庫、對象庫就(jiù)一(yī / yì ／yí)大(dà)堆。

C：混合多種編程思想。它裏面不(bù)但牽涉面向過程編程思想，又有面向對象編程思想，同時(shí)，它的(de)面向對象還和(hé / huò)别的(de)編程語言（如：C++，JAVA，PHP）不(bù)大(dà)一(yī / yì ／yí)樣。就(jiù)好像又是(shì)新的(de)一(yī / yì ／yí)樣，讓你對曾經學的(de)面向對象産生了(le／liǎo)懷疑......

D：辛苦學習後又看似和(hé / huò)實際應用脫節。通常學了(le／liǎo)很久的(de)js基礎之(zhī)後，變量、函數、對象你也(yě)都略知一(yī / yì ／yí)二，但一(yī / yì ／yí)到(dào)公司開發項目的(de)時(shí)候，卻又難以(yǐ)下手。因爲(wéi / wèi)公司在(zài)開發實際項目的(de)時(shí)候通常都是(shì)直接用它的(de)衍生庫，如：jquery，angular，boostrap，amaze，layui，ueditor等，而(ér)這(zhè)些庫又多如牛毛，同時(shí)還有自己的(de)難點。讓你都不(bù)知道(dào)該學哪個(gè)好，甚至都懷疑自己學的(de)是(shì)不(bù)是(shì)js了(le／liǎo)，好像有多個(gè)版本的(de)js一(yī / yì ／yí)樣，總是(shì)學不(bù)完......

那麽，怎麽才能在(zài)js領域内學的(de)輕松甚至遊刃有餘呢？我總結了(le／liǎo)一(yī / yì ／yí)些實戰意義的(de)js學習經驗：

首先要(yào / yāo)緊緊抓住它的(de)地(dì / de)位

時(shí)刻都不(bù)能忘記，否則很容易犯“一(yī / yì ／yí)葉障目不(bù)見泰山”的(de)錯誤。不(bù)要(yào / yāo)學了(le／liǎo)很久就(jiù)知道(dào)js是(shì)編程語言，就(jiù)是(shì)寫代碼，而(ér)且特點就(jiù)是(shì)亂七八糟就(jiù)完了(le／liǎo)，那樣是(shì)學不(bù)好js的(de)。要(yào / yāo)時(shí)時(shí)抓住它的(de)地(dì / de)位，确切的(de)說(shuō)是(shì)它在(zài)整個(gè)Web中的(de)地(dì / de)位：它屬于(yú)前端的(de)核心，主要(yào / yāo)用來(lái)操控和(hé / huò)重新調整DOM，通過修改DOM結構，從而(ér)來(lái)達到(dào)修改頁面效果的(de)目的(de)。要(yào / yāo)用這(zhè)個(gè)中心思想去指導後續的(de)一(yī / yì ／yí)切js的(de)學習，并且形成條件反射。

要(yào / yāo)有一(yī / yì ／yí)條清晰的(de)學習路線

      這(zhè)個(gè)隻能是(shì)過來(lái)人(rén)給你提供參考了(le／liǎo)。我的(de)學習路線如下：

A：js基礎部分，如：定義變量、函數、數組、字符串等的(de)處理，内置函數、内置對象等；

B：js面向過程編程思想，封裝出(chū)各個(gè)函數，試着用這(zhè)些去做一(yī / yì ／yí)些常見的(de)小功能，如：選項卡、自定義多選按鈕、自定義播放器、3D幻燈片；

C：js面向對象編程思想，試着去封裝一(yī / yì ／yí)些你自己的(de)對象，提供出(chū)有意義的(de)接口出(chū)來(lái)；

D：學了(le／liǎo)上(shàng)述的(de)内容，然後學常用的(de)庫，這(zhè)裏必須學jquery；

E：學基于(yú)jquery之(zhī)上(shàng)的(de)常見插件，如：bootstrap，Layer，富文本編輯器等；

F：綜合應用上(shàng)面的(de)多種庫寫實際項目的(de)模闆，多寫幾套。

注意學習方法

        我的(de)學習方法總結如下：

       A：多買幾本國(guó)外的(de)js書籍，不(bù)要(yào / yāo)購買那種20天精通之(zhī)類的(de)書。否則你是(shì)很難學通的(de)，更可怕的(de)是(shì)：本來(lái)你買本好書自學3個(gè)月可能學會的(de)，它們硬是(shì)能折騰你兩年......

書籍推薦（僅供參考）

《JavaScript DOM編程藝術》

《JavaScript權威指南》

《javaScript DOM高級程序設計》

《JavaScript設計模式》

《鋒利的(de)jquery》

争取把書上(shàng)的(de)功能都自己練習多次，不(bù)是(shì)一(yī / yì ／yí)次。書讀百遍，其義自見。

B：從多角度去學習和(hé / huò)領悟

      充分調動你所學的(de)東西，從多角度去做某一(yī / yì ／yí)功能，如：以(yǐ)前你是(shì)從面向過程角度做的(de)，現在(zài)改爲(wéi / wèi)從面向對象的(de)角度再來(lái)做，或者繼續做成可以(yǐ)直接使用的(de)插件，提供屬性、方法等出(chū)來(lái)。争取讓你做的(de)這(zhè)個(gè)功能逐漸能使用到(dào)實際項目中來(lái)。這(zhè)樣的(de)好處：既綜合應用了(le／liǎo)你的(de)所學，又能有實際意義。

C：一(yī / yì ／yí)定不(bù)要(yào / yāo)好高骛遠

      不(bù)要(yào / yāo)放過哪怕很小的(de)動手機會，如做一(yī / yì ／yí)個(gè)選項卡。千萬不(bù)要(yào / yāo)認爲(wéi / wèi)有了(le／liǎo)類似的(de)甚至更好的(de)插件就(jiù)不(bù)需要(yào / yāo)自己寫了(le／liǎo)，知識是(shì)别人(rén)的(de)，不(bù)是(shì)你的(de)，你即使會用了(le／liǎo)也(yě)對你的(de)技術技能水平沒有任何提升。你要(yào / yāo)多問自己，如果要(yào / yāo)我來(lái)做，我該怎麽做？

D：腳踏實地(dì / de)的(de)同時(shí)，也(yě)不(bù)要(yào / yāo)脫離實際

      多看現在(zài)網上(shàng)已經出(chū)現的(de)效果好的(de)功能，讓它去激發你的(de)學習熱情，盡量去學着模拟，調動你的(de)知識去和(hé / huò)實際相結合。

E：多寫總結

      這(zhè)種總結不(bù)但包括源代碼、顯示效果截圖，還應該很容易犯的(de)錯誤和(hé / huò)對應的(de)解決方法以(yǐ)及最後一(yī / yì ／yí)兩句精簡的(de)結論性語句。對自己寫的(de)總結不(bù)是(shì)寫完了(le／liǎo)就(jiù)了(le／liǎo)事了(le／liǎo)，要(yào / yāo)多回顧、多改進、多精簡。到(dào)做項目的(de)時(shí)候，應該是(shì)看裏面的(de)一(yī / yì ／yí)兩句話就(jiù)知道(dào)是(shì)講什麽了(le／liǎo)，而(ér)不(bù)要(yào / yāo)再去看長篇大(dà)論了(le／liǎo)。

F：構建知識導圖

      這(zhè)個(gè)可以(yǐ)讓你越學越清晰，比如：http://www.phpkhbd.com/sky.html，你可以(yǐ)按你喜歡的(de)任何形式去做，隻要(yào / yāo)自己印象深刻就(jiù)行。

注意：知識導圖也(yě)應該是(shì)經常修改、修正，讓它更合理、更清晰。

注意事項

A：充分利用一(yī / yì ／yí)切手段

      很多人(rén)總感覺時(shí)間緊，沒有大(dà)塊的(de)時(shí)間學習。我要(yào / yāo)說(shuō)你不(bù)會學了(le／liǎo)，你不(bù)應該隻是(shì)抱怨，而(ér)是(shì)要(yào / yāo)利用一(yī / yì ／yí)切手段去學習，要(yào / yāo)知道(dào)，不(bù)一(yī / yì ／yí)定隻有看書才叫學習。當你冷靜的(de)坐在(zài)某個(gè)地(dì / de)方，思考了(le／liǎo)一(yī / yì ／yí)下，總結了(le／liǎo)一(yī / yì ／yí)下，你也(yě)都叫學習，但凡有靈感，就(jiù)可以(yǐ)記錄下來(lái)，比如：記錄在(zài)手機上(shàng)，等方便了(le／liǎo)再記錄在(zài)專門的(de)地(dì / de)方。這(zhè)都叫學習。

B：貴在(zài)堅持

      要(yào / yāo)沉的(de)下心。沒有一(yī / yì ／yí)蹴而(ér)就(jiù)的(de)成功，否則那也(yě)不(bù)是(shì)成功，隻能叫“僥幸”。不(bù)但要(yào / yāo)老老實實的(de)把每個(gè)功能都試着去實現，而(ér)且要(yào / yāo)精益求精地(dì / de)不(bù)斷去修正，這(zhè)個(gè)過程是(shì)漫長的(de)，也(yě)是(shì)考驗一(yī / yì ／yí)個(gè)人(rén)是(shì)否是(shì)人(rén)才的(de)标準。

C：注意培養信心

      此時(shí)的(de)你，不(bù)适合一(yī / yì ／yí)來(lái)就(jiù)看很複雜很炫的(de)網頁效果的(de)源代碼，也(yě)不(bù)适合一(yī / yì ／yí)來(lái)就(jiù)學jquery，angular，vue，bootstrap這(zhè)些東西。這(zhè)些内容包含了(le／liǎo)很多深奧的(de)知識在(zài)裏面，在(zài)沒有任何基礎的(de)情況下直接學這(zhè)些，會嚴重打擊你的(de)自信心。而(ér)此時(shí)你是(shì)弱小的(de)，你需要(yào / yāo)的(de)是(shì)培養信心，而(ér)不(bù)是(shì)反過來(lái)，否則結局很可能是(shì)“夭折”，離學有所成也(yě)就(jiù)遙遙無期了(le／liǎo)。

D：多跟學的(de)好的(de)過來(lái)人(rén)學習

站在(zài)巨人(rén)的(de)肩上(shàng)，才能看的(de)更遠。

E：不(bù)要(yào / yāo)浪費在(zài)工具的(de)不(bù)停選擇上(shàng)

    js的(de)編輯工具很多，如果無從下手，建議使用：sublime，或者使用Hbuilder。很多公司裏的(de)技術人(rén)員都用這(zhè)些，你直接用這(zhè)個(gè)也(yě)減少了(le／liǎo)和(hé / huò)别人(rén)之(zhī)間的(de)溝通問題。我也(yě)是(shì)用這(zhè)個(gè)，感覺很好。

總結

感覺js學起來(lái)“雜而(ér)亂”的(de)原因是(shì)因爲(wéi / wèi)你太“聰明”了(le／liǎo)，一(yī / yì ／yí)開始就(jiù)管的(de)太寬，利害得失也(yě)計算的(de)太精細。要(yào / yāo)求太完美則心裏承受能力下降，很容易出(chū)現“障”。此時(shí)，你應該“笨”一(yī / yì ／yí)些，不(bù)要(yào / yāo)考慮那麽長遠，“傻人(rén)有傻福”，隻要(yào / yāo)做好今天就(jiù)夠了(le／liǎo)。一(yī / yì ／yí)些不(bù)合理的(de)學習方法和(hé / huò)心态也(yě)讓你迷失了(le／liǎo)自我，如：心浮氣躁、眼高手低、好高骛遠，這(zhè)些都會讓你在(zài)“亂七八糟”的(de)js面前深陷迷霧、不(bù)能自拔。此時(shí)，你應該重新定位自己的(de)位置，重新去認識js，放下包袱，方能輕松上(shàng)陣。把杯子(zǐ)先倒空，才能灌新水......其實，js是(shì)前端的(de)核心。影響越來(lái)越深的(de)互聯網+會渴求越來(lái)越多的(de)js人(rén)才，隻有經曆過真正刻骨銘心的(de)學習經曆，才能造就(jiù)出(chū)赢得未來(lái)的(de)真正精英。