【提高】如何通过做例子来提高自己的前端水平？

在前一篇文章《【思路】已经入门前端了，想再提升前端水平，但没有思路怎么办呢？》中，写了在已经有一些前端基础，算是已经入门的情况下，提高前端水平的思路和方向。今天再来详细说一下，做例子与提高能力之间的关系。

提高，

每个同学都明白，当你学的差不多的时候，就要尽一切可能去找实习或是初、中级前端职位。为什么要这么做？因为要挣钱嘛。但这不是全部的原因，更重要的原因在于，“你可以尽快的开始积累工作经验，提高技术水平”。可以这么说，真正有水平的前端牛人，他们的技术水平都是在实际工作中得以不断提高的。

但有许多同学，因为各种原因吧，一时找不到实习或是初级前端工程，怎么呢？大概会有二种做法，一，不断的看书、看资料、看东看西，也不确切的知道该看什么，只是觉得只要是自己不会的都要去看；二，就是不断的海投简历，然后石沉大海。

其实这二种办法都不好，第一种做法不能有针对性的提高；第二种办法更糟，那根本就是瞎猫在找死耗子。

积累，

上文说了，真正的技术都是在实际工作中不断积累的。那，目前没有找到工作，怎么通过积累来提高技术呢？答案就是，你要做一些事情，让你的处境无限接近实际工作场景。简而言之，就是做例子。

例子做多了，自然就会有心得，就会有亲身体会，心得+体会=经验。

例子在哪？

做例子，许多同学会苦恼于不知道该做什么。以前我不认为这是一个问题，大概是因为我已经在前端行业浸淫十多年了，随便一看就可以找到要做的东西，而且还可以把它扩展、深入。但自从我做了先行者课程之后，我发现在许多前端新人眼中，这确实是一个“大”问题。

时间有限啊，我给大家截一个图，

这个京东的弹出菜单，就是一个很好的实例。大家不要觉得它很简单（确实也不难），如果要把它做的很灵活，可扩展性很强，复用性强，可以跨平台，可配置数据接口，响应式，那就不是一件简单的事情了。

那么例子怎么做？怎么做例子能提高技术？怎么做例子能显出水平？也就是说，这例子我做了，那么在面试的时候拿出来能不能打动面试官？

任何行业都是要先规划好，再施工，前端开发也不例外。

第一，要有UI图，上面已经有截图了；

第二，根据UI图，把需求归纳出来。这个东西，它可能会有哪些功能点？不管要不要实现，先都列出来。

第三，根据归纳的功能点，把伪代码先写出来。这算是设计代码的结构；

第四，根据前三点，做具体的代码实现；

第五，做完之后，设想自己是用户，使用你做的这个模块，会有什么不便之处？

第六，根据第五，再更新迭代一版。

这样的一个顺序搞下来，你的水平肯定会有一个提高，因为你要使用到多个功能点，这些点之间是有关联的，而不是你自己东看西看的。这样的东西有你自己的思想在里面，所以在面试的时候，才能打动面试官。

打劫（动）面试官

面试官，“做过哪些东西？”

你，“我做过一个三级菜单模块。它可扩展、可利用、跨平台、可配置、松耦合、响应式。”

面试官，“哦？你怎么做的？”

你，“1，我先得到UI图，然后跟产品经理和设计师沟通了UI的交互流程；2、我把需求都归纳提炼出来；3、形成几个大的模块，模块之间以数据来通讯；4、具体代码用es6实现，用到了原型模式、观察者模式；”

面试官，...它会选你刚才说的4点之中的某个点深入的问下去。

前端开发的业务类型往大了说就是二种，要么交互，要么展示。

交互往大了说，要么是点击on什么什么，要么是监听addEventListen；这都是各种事件。展示呢，要么是网页、视频、图片，要么是canvas，要么是svg，或许还有flash。这都是各种资源，要么是真正down，要么是链接指向资源地址。

前端开发行业发展到现在，大家什么花样都见识过了。所以如果你想单纯的靠一个或几个例子，那你打动不了面试官。明白了吗？同学们，不需要多么大，不需要多么酷炫的例子。其实面试官并不在意你具体做了什么东西，它在意的是，“通过你提供的东西，能体现出你多少技术！！”

先行者课程，

说到这里，广告一下我的先行者课程。

这个课程就是，通过一系列的例子，解决“不会做东西、不知怎么下手做”的问题。

每个demo实例课程都包含“分析、设计、实现、迭代”四部分，也就是学会需求分析。

在这个过程中，最主要的目的，就是通过下面那些demo，学会如何去做“前端架构的设计”。

这个课程不面向前端零基础的人。