元学习课心得和实践 （一）—— 八小时搞定《JavaScript DOM》

image (1).jpg

之前在新生大学参加了XDite的元学习课程，感谢XDite的元学习课程，她跌破了我的眼镜，刷新了我的认知！

XDite 提出很多反常识的学习观点

第一堂，学习是拼图，不是登山；学习要有成就感，要让自己停不下来。

比如学习编程，应该先快速把东西拼出来，拼一个大东西，然后公开给朋友，接受朋友的赞美，得到正向回馈。而不是苦逼的把一本书从头看到尾。

我是嵌入式驱动程序员，一直想学前端，想学JavaScript，书也买了几本。可是，前几章枯燥的基本概念，就像车轱辘话，磨灭了兴趣。又没有项目的压力，于是厚厚的书本最终在书架上寂寞结蛛网。而又由于一次次从入门到放弃的不良记录，打击了自信心，每当新起起“前端好好玩，我也学学吧”的念头，拿出书，大脑中的“怕失败警卫员”就开始拉着我拖延，先洗个澡吧，先泡杯咖啡，空气不错，先去花园里快步走三圈，干劲会更足？不要笑，就这样，前端越来越好玩，可是，和我并没有什么关系！长叹一声！XDite说，拖延的时候不妨骗骗自己，”我只是玩玩，并不是要如何如何“，大脑就会放弃警惕，潜意识会忘记痛苦。原来如此！

第二堂，提出左右脑配合的肌肉快速入门法。通过先用右脑感知，模仿，熟悉基本框架，再放左脑出来理性分析。

XDite批判了自学效率低的四个大坑：

• 必须有天赋
• 必须要看懂每一个步骤，才能往前进
• 学习必须要扎实，要从技术原理开始学起
• 学习当中禁止用一切捷径，比如说复制粘贴代码，模仿别人的程序。

额，中枪！这不就是我一直以来信奉的真理吗？XDite说这些观点，放在进阶学习没有问题，但是放在初学者身上就是死路一条。原来，是我以往的C/C++学习经验拖了Javascript学习的后腿。
XDite又提出了一套学习编程的高频小套路：

• 找出一本实做型的入门指南。一至三天，写完一个小项目。
  翻开书，直接跳到最后的项目，快速做3遍
  • 第一遍： 复制项目代码
  • 第二遍： 跟着打代码，熟悉基本工具，阅读错误信息，学会Debug
• 第三遍， 分析打错的，为什么会错。体会输入什么，就会得到什么。把懂的，不懂的，都背下来。

还有独门秘籍：用markdown把自己特别傻逼犯错的地方记下来，把正确的解法也记下来，然后公开发表。同时，自己也背下来。
听完这课，磨拳搽掌，一有时间我就要Try。

第三堂，人人可以通过高频小套路，快速成为高级新手或胜任者

XDite提到了德雷福斯模型，新手—高级新手—胜任者—精通者—专家。其实市面上大于50%的都是高级新手。任何人只要有一份高频小套路的SOP，都快速成为高级新手甚至胜人者，可以入行得到一份职位。所以，同学们，希望是大大的有啊！XDite 还提醒我们专家都不是靠坚持得来的，而是上瘾和停不下来。要运用游戏化机制，行动——回馈——不确定的回馈，让自己上瘾。并呼吁大家一定要养成上瘾的习惯。

这一点，我可以胜任，通宵打游戏，用虚拟人生复刻自己小时候的社区，连夜追韩剧，看小说，我，你都可以的。

---

动手实践

正式课程一结束，我马上爬上凳子，从最高一排拿下《JavaScript DOM 编程艺术》，抹去上面厚厚的灰尘，露出她可爱的样子。翻到最后一章Chapter12《综合示例》，要给世界著名乐队Jay Skript and the Domsers 设计一个网站。不错哦！**“我只不过敲着代码玩玩，就一两个文件就好。” **我对竖起耳朵的大脑“怕失败警卫员”如是说，他说“OK，放行”。

第一遍： 复制项目代码（2小时）

1. 感谢万能的github，书的示例代码github上有：$git clone https://github.com/clamaa/javascript-dom.gitClone下整个工程。
2. 新建文件夹 /1st , 按照书中内容，规划站点结构，并建立模板html和对应的html文件。
3. 规划文件夹目录。
   /images ： 所有的图像文件
   /styles ： 颜色，版式和布局的CSS文件，使用basic.css 导入其它CSS文件，更方便编码和维护。
   /scripts ： Javascript 文件，使用modernizr-1.7.js 检测支援不同的浏览器，使用global.js 包含我们要编写的所有函数。
4. 从Clone下的工程，复制粘贴所以代码，文件。
5. 使用Chrome 打开index.html，然后逐一验证各个页面。 Bingo！

第二遍，跟着打代码，熟悉基本工具，阅读错误信息，学会Debug 4小时

• 新建文件夹 /2nd, 把 /1st 中的所以文件拷入

• 把所有.html, .css, global.js 文件，内容清空

• 跟着12章各个js函数，文件出场顺序，敲代码
  在书中每个html页面检测过程，遇到bug， 解bug。
  **使用工具： Chrome自带开发工具。
  **按F12按键开启：

  打印错误信息 : 参考https://developers.google.com/web/tools/chrome-devtools/console/

  • console.log()
  • console.error()

1.jpg

** 断点调试**![]

2.jpg

第三遍， 分析打错的，为什么会错。体会输入什么，就会得到什么。把懂的，不懂的，都背下来。（2小时）

记录下所犯的错误** 1. 拼写错误：**

• 函数名称写错：
  document.getElementById 误写成 document.getElementsById，var destination = this.getAttribute(“href”) 误写成var destination = this.getAttribut(“href”);

• CSS 中的误写：
  font-weight: bold 误写成 front-weight:bold;@import url(layout.css) 误写成 @import ulr(layout.css)， 所以Layout 不对
  href 误写成 hrdf， global.js 里面对 links.getAttribute(“href”) 当然没有作用。

• 遗漏
  JS function 不起作用： 漏写：……

这些Bug都可以通过设置断点和打印信息一一解决。
接下来，翻翻书中的知识点，对比项目中的运用，其义自见，无比轻松。（总结重要知识点，留到下一篇。）

真的没有想到，8小时，这本书被我搞定了！棒呆！~~

如果你也有过“从入门到放弃”的经历，听XDite一次，一定要试试她的方法哦！

关注微信号** 新生大学 **了解XDite 元学习课程详情。
谢谢阅读！

相关链接：
元学习实践（二） —— 从小项目倒推《JavaScript DOM》知识重点
元学习实践（三）五大法宝，助你抓住Bug，顺利通关
元学习实践（四）丰富多彩的Web开发世界

题图摄影：geralt
图片授权基于：CC0协议
个人转载内容至朋友圈和群聊天，无需特别申请版权许可。
转载时请务必注明出处。

---