【实现篇】
实现功能
实现Popush用户注册后自动登录功能。
实现思路
阅读Popush代码的前端部分,主要观察了Views中关于注册和登录两个部分向后台传递数据的方式。发现该项目前后端交互的机理是:客户端利用socket.emit发送数据到服务器端,服务器端利用socket.on进行事件响应并处理相关数据。
客户端发送数据:
1 app.socket.emit(‘register‘, { 2 name: name, 3 password: pass, 4 });
服务器端响应:
1 socket.on(‘register‘, app.Lock.detach);
了解这一基本原理对于解决自动登录的问题大有裨益。一个简单的想法是:在注册操作结束后,再次进行一次登录操作,即可达到自动登录的效果。
具体实现:在原先发送register事件代码后,加一段发送login事件的代码,将之前注册的账号、密码直接作为登录数据向后端传递。
Popush/static/js/views/register-view.js:
1 app.socket.emit(‘register‘, { 2 name: name, 3 password: pass, 4 }); 5 setTimeout(function(){app.socket.emit(‘login‘, { 6 name: name, 7 password: pass, 8 });},500)
测试
在Linux配置的Popush中进行相关测试及其结果:
1 注册账号testuser,实现了自动登录。
2 登出后登录账号testuser,成功登录。
3 再次注册testuser,提示用户已存在。
4 反复进行了多次注册测试,未发现bug。
由以上测试结果,说明我们在不破坏原有注册登录功能的基础上,基本实现了自动登录的小优化。
【探索篇】
第一次阅读并修改一个比较长的代码,有些手足无措。虽然加入的只是一句代码,但是,如果不把popush的前端部分仔细阅读并了解一些backbone框架,基本不可能正确实现。
初探Backbone
最早困扰我的就是,网站究竟是如何进行页面跳转的?阅读了backbone的官网介绍,发现该框架基于MVC——一个之前了解过,但又不完全熟悉的模型。其中心部分是Model,控制了数据的访问、转换、验证等。View不再直接呈现前端网页,而是负责监听页面事件,并传递数据。而最令人困扰的是,MVC中的“C”不再是控制页面跳转的Controller,而是Collection,作为Model的一个集合而存在。Backbone的框架又加入了Router部分,该部分才负责路由配置。
事件监听
那么,要控制注册后自动跳转到首页,就应该在router的相关代码中研究一番吧。可惜研究之后我认为,router只是设置好了路由,并没有直接设置跳转动作。也就是说,需要找到反映“监听---响应”的机制部分的代码。我由View的register页面部分代码,发现原来是使用了socket来实现这个机制。就像之前所述,socket链接了客户端和服务器端,这厢发送信号、传递数据,另一边就作响应处理,将数据验证、保存,然后更改状态、渲染页面。关于socket,我觉得自己还了解得不够深刻,有必要深入学习一番。
Js的语句执行顺序问题及解决
Popush/static/js/views/register-view.js:最初的自动登录实现方法:
1 app.socket.emit(‘register‘, { 2 name: name, 3 password: pass, 4 }); 5 app.socket.emit(‘login‘, { 6 name: name, 7 password: pass, 8 });
期待的效果是,先执行前一句话,完成注册操作后,再执行后一句话,完成登录操作。然而天不遂人愿,js中有类似预编译的执行方式,与传统的从上到下顺序执行方式完全不同。这意味着,可能会先登录,后注册,造成了bug。这个bug也是经过测试才发现的。
我想到的解决办法是加入了setTimeout函数进行流程控制。延时执行登录,从而保证登录时已经完成了注册。这个方法经实际验证,确实能够较好地解决原来的问题。
1 setTimeout(function(){app.socket.emit(‘login‘, { 2 name: name, 3 password: pass, 4 });},500)
不足:由于存在延时登录,可能会影响用户体验。这里我选择延时0.5秒。我认为可以进行一些测试,确定一个比较理想的延时时间,既能保证注册已经完成,又使用户不感到明显的延迟。或者,利用回调等更好的方法,处理语句执行顺序的问题。这些改进方法有待继续研究。
【感想】
通过本次试验,我算是又一次学习了MVC模型,当然,只是一点皮毛。如何正确利用MVC,达到各层次很好的分离,这是网站在搭建前,必须思考、设计的。
阅读他人的代码是一件比写代码更加痛苦的事情。但阅读代码能够发现自身的诸多不足,体会到他人设计模式、代码风格的精妙之处。
Backbone据说是一种轻量级的框架,它很好的完成了前端后端的逐层分离,而且还是用JS实现的——我之前一直以为JS就是前端的语言。这些发现令我惊讶无比。
【参考文献】
https://github.com/the5fire/backbonejs-learning-note
http://backbonejs.org/docs/todos.html