一：面向对象的 JavaScript

[EthanLin-TWer]

Object Oriented JavaScript OOJ

• 课程链接：https://classroom.udacity.com/nanodegrees/nd001-cn-advanced/syllabus
• 优达学习之道：https://discussions.youdaxue.com/t/udacity-jedi/2319
• Udacity 课程 Styleguide

TODOLIST

• 总结关于 this 关键字的最佳实践 1.3 this 关键字 #133
• 补全一下 prototype 的知识和教程 1.4 类与原型链 Classes versus Prototypes #134
• 没听太懂 1.6 函数类 与 原型类 Functional Classes vs. Prototype Classes #136 回顾一下
• 重新对 第一章 的所有内容进行提问，按照费曼技巧或者 小波老师的 是什么 -> 为什么 -> 看示范 -> 动手做 -> 反馈调整 进行练习提问
• 产出一张 本章 的脑图（或说 chunk 图）
• https://www.google.com.hk/search?q=how+to+metaphors
• https://www.google.com.hk/search?tbm=isch&sa=1&q=teaching+javascript+-Java+analogy+OR+metaphors
• https://classroom.udacity.com/nanodegrees/nd001-cn-advanced/parts/82ba869b-bb0a-4ce8-847a-b59c6935ee05/modules/6e3703ab-e4fc-4889-84f5-5bf0c913c09b/lessons/2696458597239847/concepts/26849785360923
• 总结一下课程网
  • EggHead.io
  • pluralsight
  • Thinkster.io
• 前端体系知识点：
  • https://zhuanlan.zhihu.com/p/23976121
  • https://www.slideshare.net/imwebimweb/zhuoying
  • https://github.com/tmallfe/tmallfe.github.io/issues
  • http://caibaojian.com/frontend-build.html
  • https://github.com/icepy/Front-End-Develop-Guide
  • http://sentsin.com/daohang/
  • https://github.com/nieweidong/fetool
  • https://dwqs.gitbooks.io/frontenddevhandbook/content/
  • https://zhuanlan.zhihu.com/p/26426054
  • https://segmentfault.com/l/1500000008843842
  • https://segmentfault.com/l/1500000008524402
  • https://github.com/bolshchikov/js-must-watch
  • https://github.com/feross/conferences
• https://www.google.com.hk/search?q=CMD+module+exports&oq=CMD+module+exports+&ie=UTF-8&gws_rd=cr&ei=pbv1WOXdIIv88gWblbXYBQ
• js refactoring & design pattern
  • https://github.com/tcorral/Design-Patterns-in-Javascript
  • https://github.com/tcorral/Refactoring_Patterns
  • Removing the keyboard icon in status bar while keeping the keystroke stats?  KonsomeJona/OctoMouse#16

---

总路线图

最核心理念和知识

• JavaScript basis 零：JavaScript 预备 #130
• scopes 1.1 作用域 Scope #131
• closures 1.2 闭包 Closure  #132
• the this keyword 1.3 this 关键字 #133
• classes versus prototypes 1.4 类与原型链 Classes versus Prototypes #134
• functional programming
• design pattern

标准、规范

• ES2015。ES6(ES2015)是现代特性最多也最有名的版本
• ES2017。ES2016不是重要的发布，没什么新特性，不看。ES2017 包含了 async 等有价值的特性，值得一看
• Chrome V8: An Open Source, High-Performance Implementation of ECMAScript Engine

最佳实践

• https://github.com/stevekwan/best-practices/blob/master/javascript/best-practices.md
• https://www.w3.org/wiki/JavaScript_best_practices
• https://www.thinkful.com/learn/javascript-best-practices-1
• http://jstherightway.org/
• http://yanhaijing.com/basejs/
• http://bonsaiden.github.io/JavaScript-Garden/zh/
• https://coderlmn.github.io/code-standards

最佳的信息源

每种信息源不超过两个。

	JavaScript	ES6 and beyond
最好的书	JavaScript: The Good Parts You Don't Know JS	JavaScript Allonge ES6 features
最好的博客/网站	前端观察 前端外刊评论 div.io	http://www.2ality.com/ ES6 in depth es6 equivalents in es5
最好的公众号	前端早读课 奇舞周刊	JavaScript Weekly
知乎、Github 大 V	https://github.com/JimmyLv 2016年2月-前端开发月刊  jikeytang/jikeytang.github.io#17
最好的 Kata		http://es6katas.org/
大杂烩：材料来源	前端开发资料指南 前端学习的网站推荐 ds.laboratory	ES6 Learning mostly adequate guide

最佳的工具集

• IDE
• Editor
  • node 即时执行器
  • ES6 在线编译器，快速得到反馈：https://babeljs.io/repl/
• Plugins for IDE
• Plugins for Editor

学习阶段图

• 英语原文：Why Learning to Code is so Damn Hard
• 中文版：为什么成为一名程序员这么难？

成长型思维

[JimmyLv]

Q&A

Jimmy: 卧槽，已经买了？
Linesh: 毕竟昨天就是最后一天了…hope group 一起学习能有氛围一些，可以获得一些 code review，push 自己！
Jimmy: hhhh, actually you can edit my comments, rather than delete so directly. (from DA)
Jimmy: 知乎、Github 大 V 得有我才行啊，😂
Linesh: 大 V 已上榜😂😂有没有发现 Github 的配色变鲜艳了，绿色，蓝色，提交格子，仓库名等
Jimmy: 哈哈哈，多谢！是啊，这个亮色很是讨好啊，其实不错的！

[EthanLin-TWer]

无意间看到一篇教学方面的好博文，讲了如何组织一个课程的三个层面，每个层面的难点，及如何通过一个模型来辅助解决这个（些）难点。文章链接在此：A few useful analogies

Levels	Challenges	Solution Model
Program	Motivation & Validation	Well model
Module	Breadth & Depth	Soil model
Lesson	Content & Context	Sandwich model

课程（Program）设计：动机 与 验收 Motivation & Validation

对于一个课程，我们（学生）很容易从大的角度询问两个问题：为什么 和 怎么做。一门课程需要倾注教师的心血和学生的精力，因此，弄明白课程目标，能回答“为什么要花费大量精力学习这个课程，其价值何在”这个问题；弄明白教学手段，能回答“是否能更高效地学习”这个问题。

作者讲，对于这两类问题，他同时会向历史寻求回答。他会尝试回溯行业历史，尝试了解其他领域是如何解决这些问题的。（他的）结论是，抽象。抽象帮助人在还未深入细节的时候，通过概念或模型理解其宏观视图。用 井模型 well model 来比喻 就很形象。

抽象有两种实践方式：

• 自顶向下 Top down。这种方式对于形成高层和整体视图有好处，利于后面将不同知识收纳进对应抽象层级
• 自底向上 Bottom up。这种方式展示了底层技术如何被用以建构高层技术。这不仅有助于了解底层原理、理解为何某个抽象层在整个体系结构中是必须的，还利于学习过程构建更有效的组块 chunks

不过，抽象只解决了学习全图和道路这两个最顶层的问题，对于每个模块、每个课时如何学习的回答还没有可落地的助益。这也引出了下面我们要谈的更深入的两个内容。

模块（Module）教授：深度 与 广度 Breadth & Depth

矛盾在于，时间是有限的，因此在一门课程中广度与深度必不能兼得。特别是在类似全栈工程师等课程中
，领域的复杂性决定了其广度无法删减，因此必然稍微要牺牲深度。更深的深度、更牢固的 chunks 建立，必然依赖于学生课后的自我学习，但对于一门课程而言，如何保证到广度深度的尽量最优兼顾呢？

作者提出了一个 soil 模型来解决这个问题： 即对于每个 topic 的知识，尽量在一个模块/课时的教授中把它们放在一个同样的抽象层级中。此外，还有两个自然却极难的要求，做到的话能使学生根据自身余力选择是否理解到更深的抽象层级，同时不理解上一层知识的自洽理解：

• 不同 topic、同一抽象层级的知识之间，最好要有自洽的联系
• 每个抽象层级的知识，必须能独立、自洽地——也即不依赖下一层级细节或实现地——被解释理解

课时（Lesson）实操：内容 与 外延 Content & Context

• 讲一个问题之前，讲清楚一个前件：上下文（痛点）。为什么需要这个东西，当前其他技术为什么不能解决这个问题，它属于哪个抽象层级的东西（hopefully 属于上节讲到的那个模块所属的层级）
• 讲完一个问题后，讲清楚一个后件：例子。一个同样具备这个上下文（痛点）的例子，它如何使用了这个技术解决了这个问题

[EthanLin-TWer]

课程反馈

Well

• 图
• 测验，并且测验有时还要混合以前的知识点进行测验（比如this关键字一节时又考察了一次 scope 节的知识）
• 短视频

Confusing/Improvement

• 使用比喻或类比来阐述技术，加深记忆
• 一些技术的来龙去脉、使用场景似还没有讲的很突出。参考上面的 SandWich 模型：上下文层、实例层