【实现篇】

实现功能

　　实现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

Popush前端小优化-邹豪风