今天看了《从jQuery 平滑过渡到 vue》的浏览量对于我个人是个惊喜。先感谢大家的支持！ 真的没想到，有点哽咽，同时感觉自己责任也大了。所以也想好好地把这篇文章写好。计划今天介绍一下项目，在下集将 jquery 转换为 vue。

用 jquery 开发单页应用套路 1. 渲染视图 2 获取数据 3 绑定事件 4 更新视图，5 设计路由。在高级点就是设计一个 state 状态机持有页面的状态，然后将交互解释为 action 动作，动作更新状态，按钮点击也会根据页面状态触发不同动作。今天这里的代码我是 github 上找到，很有代表性，我就以此基础进行修改了。这是应用运行起来的效果，自己汉化了一下，其他基本没动，感谢作者的代码。

项目我是用 npm 管理的，配置好 package.json 运行一下 npm install 读取 package.json 安装所有的依赖。

然后再 index.html 中引用一下，需要在一个服务启动项目，这里我用 visual studio code ，一个非常不错做的 IDE 轻量级的，很好用推荐。

页面设计为三部分，首先是 header 部分，包含一个标题，还有创建一个任务的输入框。然后就是中间的任务列表，列表可以checkbox 表示任务结束，可以点击 x 来删除任务，底部为导航，可以切换显示全部任务，显示未完成和已完成任务列表。然后显示未完成任务列表。

这里介绍一下 handlerbars 这个库，在我刚刚入行时，接受一个任务来基于混合模式来开发 android 应用，基本思路是自己写一个 webview ，然后用 webview 来访问一个远端的单页应用。接受到这个任务我就开始搭建我们的单页应用，首先需要设计我的路由，而且视图需要模块化，也可以叫做组件化。所以需要模板来根据不同 json 来渲染视图。当时我就选中了 handlerbars 来实现这个需求。

说到 handlerbars ，我们需要懂得其实现原理，在这我们就简单地说了 complie 出一个模板，然后将一个上下文(也就是和这个模板绑定数据)传入创建生产一个 html 字符串。

工具类我就不说了，uuid 产生一个随机的 id,pluralize 不用考虑了处理英文单复数的，store 简单地对 localstorage 封装了来存储数据的

init 是初始化启动我们应用的方法，入口。这里做的都是初始化的工作，我们一一来看看，首先初始化数据库，然后就是初始化模板，绑定事件注意是事件而不是数据。最后就是路由，这里:filter 是一个参数，可以读取参数来赋值给 filter,我们的路由主要控制显示筛选过的任务。然后初始化路由为 all

这里路由管理用到了一个 director.js 库，通过路由来控制视图切换，读取路由信息来判断页面。

jQuery 是基于事件的，所以绑定事件显得至关重要。bind（this）

渲染方法，先获取数据，然后将数据传入模板中渲染出 html

渲染底部同样调用我们的在 init 创建好的 handlebar 模板。

切换所有的任务的状态，先获取 check 然后根据状态来切换每条任务的完成状态。

我们获取各种状态的列表，getFilteredTodos 获取筛选后的任务列表。

删除所有已完成的任务，也就是让 todos 列表筛选出所有未完成任务。

根据任务的 id 来获取该条任务的在列表的位置，这里先从 li 的 data-id 属性获取任务的 id 然后用 id 来查找 todo 这样我们就能操作这条任务。是删除还是更新呀。

创建一条任务，先清空新任务输入框，如果输入框有内容，将现有的任务添加到任务列表。

通过该方法来切换该任务的状态。

编辑模式，我们为任务条目添加编辑样式，让他成为焦点。

编辑的快捷键，如果输入是回车键表示退出编辑模式，如果输入 ESC 键在退出之前为记录添加 abort 属性。

更新条目，先获取任务的 dom ,如果任务记录中包含 abort 属性，将属性赋值 false , 如果没有任务没有内容就清楚该任务。如果有任务有内容就更新 todos 列表中该任务的内容。

删除一条任务，将该任务从 todos .中移出让后开始渲染界面。