本文字数：3223字   预计阅读：8分钟

大前天，我零基础入门前端技术，暴力通宵实作2晚，写出了人生第一个网站《Galaxy Recruitment》

本文说说认知学习法理论如何与编程学习结合，以达到短时间暴力速成的效果，做出以上作品的。

注意，本文不涉及任何技术细节，是用前端入门来讲学习方法，任何人都看得懂。想当与认知学习法的实操版。

第一步：用旧事物理解新事物，快速建立心理表征

如何把全栈编程能力切成三块，以一个餐厅的空间关系来类比，任何人都能懂。想想这是一个肯德基餐厅的俯视图：

前：用餐区
中：服务台
后：后厨

用餐区的关键点是装潢漂亮，服务的关键点是准确无误地对接顾客和后厨的需求和供给，后厨的关键点是储存原材料并用它制作成食品，交给服务台，最后送到用餐区。

这能理解的话，那编程也是同样的——

前端用餐：你看到的网页。
中端服务：匹配你的需求和数据库的供给。
后端做菜：收集储藏数据，输出数据。

编程里一般说前端和后端，没说中端，但我这样的划分更有利于零基础的人理解。这样，才能建立起对新手来说极其重要的事（对老手已不值一提）——心理表征。

我就是通过这个模型去理解全栈编程的。在这个表征基础上，我就很清楚自己的每一步在整个作品能起什么作用。如果你没这个表征，跟教程一板一眼也能做出作品来，但是你的表征不够清晰分明，让你无法实现迁移。

利用空间隐喻建立心理表征，是人类进化遗留的优势。这适合学习任何新技能时，构建初步的心理表征。

这个认知学习玩法的原理讲起来太大了，在《认知学习法》中有专门讲述。继续说编程。

把全栈这个概念切开后，头脑清晰了。接下来，我们来看一下前端用餐区这个版块，发现有三个语言：HTML、CSS、Javascript。我根本不知道它们三位都是谁？它们之间，到底有什么苟且的关系？

疑问多就是好学嘛，所以你就会去查谷歌或者百度一下，那么必然会被糊一脸屎——

html是一种超级文本标记语言。

CSS层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

Javascript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。

每个字都认识，但就是不知道在说什么。

这里就得问一下你哦，第一天学游泳时，你有没有跑去问，教练，水到底是什么？水为什么会这样？水有什么原理？

我倒是从没见过游泳教练会跟你讲什么是水，水的本质是什么。这是物理学家的事，关游泳教练啥事？

编程跟学游泳一样，你别去问HTML、CSS、JS都是什么鬼，你是来游泳的，不是来搞科研的，你只需要知道能用它做什么。

所以，仅用以下类比就足以建立起基本的行动心理表征——

HTML是素描稿，CSS是水彩笔。
HTML是毛坯房，CSS是装潢样式。

而JS是干嘛的？让水彩画动起来。

虽然这样的类比很粗糙，但是so what？就像狗刨，跟游泳的正确姿势相比，这种类比粗糙到不行，但是你立马知道能做什么了，于是，你就暴力踹开了新技能的大门。

建立最基本的心理表征极其重要，哪怕与正确的标准相差十万八千里都没关系。

因为，接下来你要接触该技能中的新知识，你都能用“旧事物理解新事物。

第二步：完全彻底地模仿

有了基础的心理表征，接下来第一件事就是模仿。

模仿！
狠狠地模仿！
暴力自杀式地模仿！

前端就是你看到的网页，那么我要入门前端，直接去拷贝复制别人的网页就可以了。

模仿谁呢？——

你心中的TOP1！

既然都模仿了，就只模仿第一名，不要找一个简单的对象来模仿。

这就是所谓自杀式地模仿。什么是自杀？

打个比方，就像学游泳的第一天，有人去儿童区，有人去浅水区，有人去深水区，而你，因为住在长江旁，就直接往长江里跳。好在，编程上自杀式地做不会要你的命，最惨就是把项目彻底做烂了。

如果模仿的太简单，速成也许可以实现，但暴力速成则很难。

所以，我真实执行的路径如下：

1、找到要模仿的水彩画

自己想要做电影主题，找到我心中的TOP1漫威，打开他们的官网，看了一下界面，决定要做成风格。

2、找素描图

进入全栈营的官网，复制前端的HTML和CSS代码，只字不差地扔进自己的项目，这样就有了网页的素描框架。

3、对照着要模仿的水彩画着色

现在有了素描框架，有了要模仿的画，接下来就是要复制的网页上的颜色都给涂掉，重新涂色。

第三步：拆解要素，逐一更改

执行模仿路径时，我就开始观察代码与网页之前的对应关系。但是网页很复杂，一一去看，似乎费力不讨好，有没有方法归纳。

任何平面都能拆解成这三个要素：几何，颜色，位置。

所以，当我要模仿顶部导航栏时，就着重去找分别影响几何、颜色、排版的代码。而且，真的很好找。

在编译器中，搜索“color”，就有了所有有关color的代码，例如“color:#894141”，后面就是颜色值呗，改一改，看看网页怎么变。

例如“margin:30px”，margin是什么，不知道，改一改后面的值，看看网页怎么变。

这样调一调，看一看的对照流程，多走几遍，就能建立起清晰的CSS水彩画心理表征。

接下来的重点是：不要去背！不要去背！不要去背！

可能很多人是受科幻电影的影响，看到的程序员都是键子如飞，啪啪啪打完一串代码。然而，现实中完全不是这样的好吗？

背下来有什么意义呢？因为这些代码是什么，在google搜一下就有了，根本不需要背。类似于“唐太宗生于哪一年？”这样的陈述性知识，常常拿来做什么智力竞赛，背下来能默答，似乎就很聪明。可是，这就能比搜一下再答出来，更懂历史吗？