项目实践的引入——MD 在线编辑器
现在，到了让我们上手做个项目的时候了。
鉴于很多人还没有做项目的经验，我们决定先从一个最简单的项目开始，向大家讲述一个项目的制作流程。
就让我们做一个 Markdown 在线编辑器吧！
明确需求
首先，我们需要明确自己的需求。一个编辑器要有什么功能呢？首先肯定是要有能输入 MD 的框框，另外还要能够根据用户的输入进行实时预览，这才有个在线编辑器的基本功能。
程序设计
有了基本的需求，下一步要进行的就是程序的设计了。这个程序设计，我们按照管理分成两个部分。UI 和逻辑。UI，就是所谓的 User Interface，是直接展现给用户的部分，能够给用户看见，相当于一个外壳。逻辑呢，就是内部的操作，这些用户没法直接看见，但是给程序提供了内部的功能。两者合起来，就是一个完整的程序了。我们分别进行设计分析。
UI 侧
我们应当提供这些东西：
- 一个给用户进行输入的框
- 一个展示生成的预览效果的框
有了这个以后，我们就可以用画图软件画出大概的界面来了。左侧一个输入，右侧一个预览，各占网页的一半。
逻辑侧
我们应该有这些功能：
- 获取用户的输入
- 转换成对应的 HTML
- 将 HTML 输出到指定的地方，渲染出来
接口
你可以看到，这两个之间的相互独立的部分，可是也要有一些地方让它们联系起来。比如 UI 的输入框和输出框，以及逻辑的输入和输出，就应该联系在一起。这种联系，我们管它叫做接口。
在前端工程当中，实现接口方式很多样。最简单的应该有两种。一种是接在 HTML 上，是把对应的某些功能的块加上指定的 class 或者 id， 交给 JS 程序接管。一种是用自己的简单的 JS 程序调用别人封装好的 API，然后传给自己的网页。这两种方法应当按照实际情况灵活使用。
我们这个例子里面，UI 和逻辑部分的接口，就可以用给指定的块加上 class 的方式，来使两个结合起来。
合作
有了这些分析之后，你们也许会发现，这两个工作可以交给不同的人来完成，最后组合成一个完整的程序。事实上，这就是分工合作的基础。把大的程序拆成不同的小块，然后交给不同的人完成，最后组合起来。
所以这个程序，大家要分 2-3 人一组，自己尝试去完成。我们把这次和下次活动的时间都给大家去做。
一个示例
我自己写的一个例子。