今年有越来越多企业开始跟我们接洽企业内训的事，想请我帮他们培训前端工程师，但你知道一个好的前端工程师绝对不是两三个月可以养成的，需要多年的努力与磨练才会有点成绩。而这几年可谓前端正夯，有为数不少的人开始大规模的往前端开发移动，而我被问到最多的问题就是「请问 JavaScript 要怎麽学？」或「请问 JavaScript 该怎样入门？」诸如此类的问题。
大家都知道，对于一门程式技术来说，「会写」与「会教」是两个截然不同的领域，会写 JavaScript 的人到处都是，但是会教的人就相对少很多了。我这几年教授 JavaScript 开发实战课程已经超过 15 梯次，在将近 500 位学员裡面，我所看到的大部分学员都是对 JavaScript 不胜理解，普遍处于一种一知半解、模糊不清的状态。另一方面，我在公司内部也带过不少工程师，总是有人会想学习 JavaScript 但不知道如何入门的情况，这让我陷入深思，该如何帮助一个人学习 JavaScript 从入门到精通呢？本篇文章将说说我个人的一些想法与建议。
渴望学习
先别说 JavaScript 如何从入门到精通，我们就先来看看我所看到的实务情况，所我看到许多正积极前往前端工程发展的人，无不渴望学习、无不渴望进步，但学习路径为何？没人说得准！每个人都是独立的个体，有著不同的学习速度与理解。当然，如果你愿意投资自己，跑去各家教育训练机构报名课程，让专业讲师教你逐步上手当然很棒，但并非所有人都有这个机会或意愿做这件事，毕竟学费不便宜。大部分的 JavaScript 开发人员，其实都是靠著自己的热情与兴趣自主学习而成的。
一般来说，有人问我怎样学习 JavaScript 的时候，我都会建议他们先买一本犀牛书回来看，但这本书有 1,096 页啊！
这本书就算你买得回来，但真的有心看完的人又有多少呢？我所看到的状况是，大家第一时间先被这本书的厚度给吓傻了，都把这本书当成「参考书」了，也就是反正先买回来摆著，等出问题再来翻翻看就好，反正程式逻辑不管甚麽语言都一样啦，我只要写得出来就好了，写不出来就先找 Google 大神啊，不然就搜寻 Stack Overflow 看看有没有类似的解答！真正悲剧的是，通常你都找的到解答！
悲剧的开始
各位看官，你看到这裡一定觉得有点怪，既然都找的到答案了，为什麽还算是个「悲剧」呢？
这牵扯到「大脑科学」的领域，人类大脑的结构极其複杂，在接触外界事物的时候，很多时候无法处裡太多细节，甚至于有很多时候，大脑所接收到的资讯是有片段的、缺漏的，无论是过多的资讯或是过少的资讯，人脑都会在很短的时间内自动做出判断。讲简单一点，各位听过什麽是「脑补」吗？就是「脑内补充」的意思，源自于动漫方面的用语，现在很多年轻人都知道这个词彙，意指「在头脑中对某些情节进行脑内补充，对漫画中、小说中以及现实中自己希望而没有发生的情节在脑内幻想」。
在程式设计的领域中，有许多抽象的概念，就是因为某些概念难以思考，某些技术难以理解，所以我们才称呼他「抽象」，也就是说，抽象的事物是无法思考的，当你的脑中对某种技术、程式语言或是框架拥有这种「抽象」的感觉，那麽就代表你不够了解他，你还没办法融会贯通，也没办法举一反三。相对的，人的大脑在学习一件事情时，当然会设法尽力理解，以求日后能够举一反三。
我认真的问你，当你从网路上看到一段程式码可以解决你的问题时，请问你的第一反应是甚麽？ (1) 查书？ (2) 继续 Google？ (3) 自行看程式码脑补剧情？ 请作答！
我把这三个选项一一拆解，告诉你为什麽很自然的会选择 (3) 这个答案！
1. 查书：你真的知道你的问题出现在书籍的哪一页吗？这本犀牛书有 1,096 页啊，你连认真翻完他都有难度了，你会因为一个小问题从第一页找到最后一页吗？别傻了！
2. 继续 Google：这是个很合理的选项，因为你想学得更深入，好，请问你要下什麽关键字进行搜寻？你连犀牛书裡面出现的专有名词都没看过了 (因为你没读完过)，你能打出甚麽像样的关键字？你能查到甚麽重要且完整的搜寻结果？有限！
3. 自行看程式码脑补剧情：是的，我们查到的程式码看起来很简单，每一行拆开我都看的懂阿，合在一起应该是这个意思吧！嗯，我觉得我理解了，就这样吧，下次遇到相同问题再说！
认真的同学，想必这三个选项都会尝试，但书上写的跟你遇到的好像有点不太一样，你遇到的可能是複合式的观念问题，例如 Closure + Hoisting 的问题；继续 Google 到的内容好多喔 (而且都英文)，看不完耶，先收藏好了，以后有空再看 (跟你买犀牛书却不看完是一样道理，你永远不会打开你的网址书籤的)；自行看程式码脑补剧情，我自己理解出来的，跑出来结果也对，应该没错吧，反正就逻辑啊！
不好意思，以上剧情我假设的有点武断，并非每个人都这样想，但是大家都会会心一笑，因为每个人都干过这种事，因为自动脑补是最有效率的学习方法，只是你学到的观念可能是错的！
大家都好忙
为什麽我们总是不断寻找有效率的学习方法？因为大家都很忙，每天忙著开发程式，每天忙著救火，只要不忙的时候 (而且被发现)，就会立刻被塞入一堆工作，工作都没时间了，何时才有空学习啊！
大家都很清楚，从事软体开发要从入门到精通没有甚麽捷径，就是要花时间练习、练习、再练习，写 Code、写 Code、多写 Code，所以「做中学」是大家公认最可行的唯一解，无论被安排了什麽工作，反正不会就学，开发时间估长一点即可，如果时间内做不完，难道你咬我吗？所以说啊，在「甲方」公司上班是幸福的，我曾经看过有公司因为是幸福企业，只要你有做不出来的理由，专案永远可以无限期 Delay！ ( 不要笑，这是真的 )
现在每间公司多多少少都需要仰赖 IT 系统的支持，很多公司都有自己的开发团队，大多用来开发公司内部所需的系统，其实这个「做中学」方案，是个不得不的选择，因为很多时候你并没有更好的选择，所以目前的选择就是最好的选择！( 咦?! 好熟悉的一句话! )
在台湾，中小企业佔了 90% 以上，许多公司都是传统产业，没有良好的技术学习环境，所以能招募到高手的机会很低，再加上优秀的软体人才极度缺乏，真正的高手大家都抢著要，所以不得已只能聘用有点经验、又不太有经验的开发人员，进到公司在落实「做中学」策略，让大家慢慢进步，反正有做事就会进步，也会越来越熟，总有一天可以独当一面。
做中学 ( Learning by Doing )
如果你问我的意见，我也会说「做中学」是唯一解，因为我也是这样带人的，我知道「做中学」不是最有效率的解法，但是确实唯一可行的解法！
哪裡没效率？在一知半解的情况下，学习过程会大量累积「错误的观念」( 请记得人会自动脑补剧情 )。事实上，你在自我理解的过程中，并不知道那些观念是对的，你工作的周遭不见的有人可以帮你点出正确的观念，而大多只能帮你点出解决问题的方法，你遇到一个问题，可以问到一种解法，重点在于你无法举一反三，当你无法活用你所学习到的知识，你就无法累积更多的自信，无法累积自信，你就会一直处于一种一知半解的状态。
发现了吗？这是一种老鼠赛跑的迴圈，这样的学习方式会让你一直倾向使用「已经会」的技术来解决问题，那麽你的学习领域就会受限，自然无法进步太多，在未来的世界裡，不可讳言的，进步太慢就是退步！
所以一直以来，我的教学风格都很强调一点，那就是「建立观念」比「写 Code」还重要，网路上几乎可以搜寻到任何你需要的程式码，所以看完别人的程式码还能够写出类似的应用才厉害，也就是能够举一反三的能力。但是，如果你不写 Code，学会再多的观念，你也会渐渐忘记，到头来等于没学！
所以你问我「做中学」重不重要？我会说：超级重要！但是，在有观念打底的情况下去「做」，保证「学」的更扎实，更有自信，也更加有趣，这是我从事软体开发 20 多年的秘密，请大家不要告诉大家！
培养自信
如果你未来想成为一个专业的前端工程师，你要知道一件事，绝对不能因为刚学会 jQuery 就心满意足，也不能因为学不会 Node.js 就失去了热情。你要不断肯定自己，你要知道从看不懂 jQuery 到能够自己写出正确的程式码是一段很有成就感的事，这是你努力学习的成果。但如果你试图跳级打怪，被对方秒杀也只是刚好而已。你需要时间成长，一步一步来，这也是「做中学」不可或缺的理由之一，因为你不可能在短时间学会所有观念与技能！
如果有人跟你说：「你都出来工作几年了？还写出这种程式码？」请不要跟他做朋友，因为他把事实讲出来了，想在心裡还可以接受，但当面讲出来就是不行！
请相信自己「没有什麽事情是学不会的，只是时间长短的问题」，在学习的道路上，你会发现经常有许多神人出没在你身边，他们会让你感觉，他们会的一切都是浑然天成、与生俱来的，请相信我，这一切都是幻觉。这些想法，全部都是你自行脑补的剧情，在这个世界上，我相信有天才存在，但不会是你，也不会是我，更不会是你身边的人，他们只是在你看不见的时候偷偷努力而已。
我分享一个自己的小故事，在我小时候曾经有一次要跟同学出游，我想跟我父亲借用传统相机 (需要换底片的那种)，他只跟我说一句话：「你不会换底片」。我说：「你教我，我就会啦」。他说：「不可能啦，小朋友不会换底片」。但我跟他卢了很久，最后他终于借我了，而且还示范一次换底片的过程给我看，他问我：「有没有学会？」我当然说：「会阿，这很简单」。出游回来后，我拍了好多卷底片，我拿去冲洗之后发现，只有第一卷底片是好的，其他的全部都没有装成功，而第一卷是我父亲示范给我看的那卷。
你可以想像，当时的我非常受伤，有种被戳中要害的感觉，且真的觉得自己学不会、自己没有天分，我花了好多年的时间，才用自己的努力证明自己、相信自己，原来我可以学会很多我以前学不会的事，而且学习的速度会随著你会的东西越多而学得更快。很多时候你觉得别人很强，学东西很快，那是你不知道他自己学过多少东西，你只是起步比人家晚而已，没甚麽好自卑的！
要成为一个专业的前端工程师，过程中会遇到许多阻碍，这些阻碍可能会来自于你的家人、你的朋友、你的客户、你的同事、甚至于是你的老板，但最大的阻碍其实还是你自己，当你拥有正确的学习心态，不再跟别人比较，为自己做出实质的努力 (不要只挂在嘴边说你想学习)，你才有可能有达阵的一天！
会写得多、看懂得少
JavaScript 几乎成为 Web 世界的标准程式语言，无论在你再怎样不喜欢它，它就是在那裡，就是 Number One，所有浏览器唯一支持的程式语言。而这个世界，几乎所有的软体都在 Web 化，除了网站之外，像是 Mobile App (Titanium, NativeScript, React Native)、网路游戏 (Web Game)、穿戴式装置 (Apple Watch)、… 几乎都朝著 Web 化的方向前进，你说花点力气投资在 JavaScript 不对吗？
偏偏我所看到的是，大部分人都会写、也能写 JavaScript，但真正理解 JavaScript 的人却很少，非常的少。当你开始采用一个完全依赖 JavaScript 的框架时 (例如 Node.js、AngularJS、React、… etc.)，如果你还是用一知半解的观念去开发，你会花上大把大把的时间在除错、鬼打牆、生闷气、捶心肝、… 等诸如此类的事情上。
因为没有好的观念支持，你写不出有品质的程式码。没有好的观念支持，你也无法有效率的团队合作，整个开发团队如果有观念悬殊的成员存在，影响的是全队的品质与效率，因为一个人的程式出错，很有可能会影响另一个人的开发效率，因为他所遇到的问题，可能来自于你写的程式码。
学习资源整理
我个人觉得自学成材是非常有可能的，因为我确实亲眼目睹短时间内学会 JavaScript 的人，并且完全依赖网路上优质的、免费的学习资源就可以学到非常扎实的观念，以下我列出一些学习资源给大家参考：
免费线上资源
Eloquent JavaScript
一本开放、免费且非常优质的 JavaScript 线上电子书，曾荣获 Mozilla 与多人赞助，章节结构清楚明瞭，内容不拖泥带水，各种格式的电子书、范例程式通通可以线上取得。
Speaking JavaScript: An In-Depth Guide for Programmers
一本写给已经有其他程式语言基础的人看的书，从入门到进阶可以在短时间内学会许多重要的观念。
Programming JavaScript Applications
一本写给有点 JavaScript 开发经验的人看的书，内容精简扼要，也是有网路上知名人物 Eric Elliott 撰写的书籍，品质有保证！
Train with Programming Challenges/Kata | Codewars
透过闯关的方式练成 JavaScript 达人，这网站在注册的时候，会先让你选择程式语言，如果你选择 JavaScript 的话，他会问你两个 JavaScript 的问题，要你在线上改 Code，你必须回答正确才能让你注册帐号，所以你适合给已经入门的人练功。注册成功后，可以点击 Kata 开始练等级 (kyu)，他有八个困难等级，共有 1,158 关，每一关通过后还可以看到全世界其他人有哪些不同的解法，非常有趣。
Exploring ES6: Upgrade to the next version of JavaScript
一本针对 ECMAScript 6 进行详细阐述的书，可免费线上观看，本书的主要对象是已经拥有 ECMAScript 5 开发经验的 JavaScript 开发人员，完整补充 ECMAScript 6 的重要观念与特性。
ECMAScript 6 入门
一本开源的 JavaScript 语言教学，主要针对 ECMAScript 6 引入的语法与特性进行解说，内容也相当完整。此书为简体中文
JavaScript Promise 迷你书（中文版）
一本由日文版翻译过来的电子书，专注在 ES6 的 Promise 这个主题上，有非常完整的图文范例与解说。
中文书籍推荐
JavaScript 大全, 6/e (JavaScript: The Definitive Guide: Activate Your Web Pages, 6/e)
从最基础的 JavaScript 语言特性讲起，非常适合初学者阅读，只怕你觉得他太厚而中途放弃而已！
Speaking JavaScript｜简明完整的 JS 精要指南 (Speaking JavaScript)
专为初学 JavaScript 的程式设计师而写的书，其厚度是 JavaScript 大全的一半而已，本书英文版写得很好，中译版当然可以参考，也可以多买英文版中英对照著看！
JavaScript 应用程式开发实务 (Programming JavaScript Applications: Robust Web Architecture with Node, HTML5, and Modern JS Libraries)
用简单明瞭的方式解说 JavaScript 的重要细节，其厚度是 Speaking JavaScript 的再一半厚度而已，非常适合已入门的 JavaScript 开发人员阅读。
JavaScript－优良部份 (JavaScript: The Good Parts)
我最喜欢的一本书，仅 164 页，阐述所有 JavaScript 的优良部分，适合进阶的 JavaScript 开发人员阅读。
影音互动教学
JavaScript – Code School ( 每月 29 美金 )
Code School 是国内外备受好评的互动式线上学习网站之一，只要不排斥英文，他有文章、影片、互动练习 (真的让你输入程式码练习) 等方式逐步教学，也非常适合初学者自学之用，透过这个网站所设计的学习路径来学习 JavaScript 可以在短时间学会如何开发！
JavaScript Lessons – Screencast Video Tutorials @eggheadio ( 每月 19.99 美金 )
eggheadio 网站提供高品质的预录影片，透过专业的讲师讲解 JavaScript 的各个面向与观念，只要英文听力还不错，也是强烈建议可以花点小钱线上学习，他们每个影片都有完整的文字稿 (Transcript)，也可以顺便练英文喔！
JavaScript – Pluralsight ( 每月 29 美金 )
Plualsight 俨然成为全美最大的线上教学平台，拥有 4,500 门课程，其中优质的 JavaScript 教学课程也非常多，从入门到进阶通通都有，部分课程有中英文字幕。
学习方法
前阵子我才听到一句很有哲理的话：「努力不一定会成功，但不努力一定很轻松」 XD
学习没有捷径，只能靠自身努力，别无他法！
这是一场脑内革命，过程并不轻松，但即便不轻松，这过程却可以很有趣，记得要不断找乐子、获取成就感，如果可以，找个一起学习的伙伴，否则真你会撑不下去。
以下我来分享一些学习 JavaScript 的方法供新手参考：
找乐子
不要每天都写 Code，你会弹性疲乏，适度的平衡工作、学习与生活也是很重要的，但是请记得还很菜的时候，要把学习放重一点。
很多人会适时地玩些线上游戏来转移弹性疲乏的注意力，有时候解 Bug 解不出来的时候，也可以尝试一些完全不同的事情，扩展你的思考领域。
请参考这篇文章：为什麽你睡了 11 个小时还会累? 原来我们的休息方式都错了
找成就感
培养自信是学习过程中非常重要的一环，不断接受挑战，并且一一突破，过程中就会有源源不绝的成就感出现。
站在巨人的肩膀上开发真的很棒，学一些现成的函式库来用 ( 例如 jQuery, jQuery UI)，会有助于累积成就感，开发起来也会比较有趣！
多找一些跟学习主题相关的资料来看，看懂一个自己原本不懂的资料，本身也是很有成就感的一件事，不过记得要学著分享，分享才能产生快乐。
光是学习 JavaScript 语言特性是很枯燥无味的，如果也能学习一些知名的开发框架，如 AngularJS 或 React/Redux 都不错，不但有助于解决工作上的难题，更能获得许多解决问题的成就感。
如果有主题相关的闯关游戏也可以试试看，例如 Codewars, Code Hunt 之类的。
找学习伙伴
如果有同事、伙伴、朋友也对写程式有兴趣，建议可以组织读书会、分享会之类的活动。
多参加一些知名的 Facebook 线上社团，可以在上面发问，也可以分享一些自己的所见所得，如果心有馀力，还可以回答别人的问题，过程中你就可以交到不少志同道合的朋友。
JavaScript.tw
Front-End Developers Taiwan
台中前端社群
高雄前端社群
node.js 台湾
AngularJS.tw
ReactJS.tw
找机会参加一些实体的社群聚会，毕竟在网路上交流技术还是有点虚，如果可以跟大家见见面，彼此见面交流一些技术心得，会有比较踏实的感觉。
分享学习心得
我强烈建议新手上路可以尝试撰写部落格，将所知、所见、所闻都写下来，不仅仅是留下纪录而已，更重要的是学习组织自己的思绪，将抽象的概念透过具象的文字表达出来，这对一些观念的理解来说非常重要。
如果一开始不容易组织大量文字，也可以试著从手稿或笔记开始写起，累积一些学习心得与想法，但若能公开发表出来，更能促使你将心得与想法整理得更清晰。
你也可以尝试做些简报 (Slides)，将一些你学到的重要概念与技巧，透过简要的版面配置整理出来，并且分享到 SlideShare 或 Speaker Deck 都可以。
手刻作品集
无论你学了多少东西，你如何证明你真的学会了呢？是的，你要留下你的学习纪录，你要整理你的作品集，一个两个是不够的。
你可以参考 Jennifer Dewalt 的作品网站，他从第一天开始学习网页技术开始，就决定每天写出一个作品 (网站)，你可以从他的作品集中看出一个人的热情与努力，相较于第一天与最后一天的作品，你会很惊讶一个人可以在 180 天内学到这麽多东西！
很多人也会透过建立自己的个人网站，放上自己的作品集，用以证明自己会写网页，你能做多炫就做多炫，没有美感的人，到 WrapBootstrap 买个现成的版型也不错，通常都不贵！
结论
其实无论你想学甚麽程式语言都一样，这些学习方法与经验都可以参考，但是我总认为，一个开发人员不可以只学一种程式语言，因为你的思路会受到侷限。但你其实不用刻意去学两三个语言，你总不能为了学两三种语言，结果每个都会一点、每个都不太熟，这样就本末倒置了。
无论如何，请先精通某个程式语言再说，从中学习到精随，当有机会接触下一个程式语言时，相对的会比较顺利，也比较能比较不同语言之间的差异。不过我所看到的许多 JavaScript 新手，很多都是先学过其他程式语言然后才学 JavaScript 的，而这个转换的过程，他们把其他程式语言的特性与概念，原封不动的套用在 JavaScript 开发上，结果当然是惨不忍睹，开发从头到尾都是自行脑补的剧情，Bug 满天飞啊！
最后，我个人还是认为，书要认真读、Code 要努力写，这才是学习程式设计的不二法则，祝大家都能维持热情，开心的成为专业的前端工程师！ ^_^
本文文字及图片出自 buzzorange.com
共有 1 条讨论