今天看了《从 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 . 中移出让后开始渲染界面.
来源: http://www.jianshu.com/p/4af102929feb