构建前端用户系统之登录退出

(function($){
var user = window.user = {};

// 用户数据
user.data = {};

// 用户状态, 0未登录, 非0则视为已登录, 可扩展为用户等级
user.status = 0;

/**
* 初始化
* @return {object} user对象
*/
user.init = function(){
//负责从后端ajax请求用户是否登录, 如果已登录则返回用户相关信息, 否则视为未登录
//请求完成后改变用户的status状态, 并把用户信息写入到user.data上

$.get("后端url", function(res){
if(res.error === 0){//返回值同后端协定
user.status = 1;
user.data.userName = res.data.userName;//模拟用户名
} else {
user.status = 0;
user.data = {};
}

//渲染状态到页面
user._renderHTML();
}, ‘json‘);

//模拟惰性方法以防止页面多次使用
user.init = function(){
return user;
}

return user;
}

/**
* 用户登录
* @param {Function} callback 回调
* @return {object} user对象
*/
user.login = function(callback){
if("function" === typeof callback){
if(user.status !== 0){//如果用户已登录则直接运行回调, 参数为用户数据
callback.call(user, user.data);
} else {
//未登录时弹出用户登录层,让其登录, 登录完成后刷新当前页面, 当然也可以像 youku 一样不刷新页面, 但要做的工作非常多, 这里不解释
}
}

return user;
}


/**
* 渲染用户状态到页面, 当前为模拟用
*/
user._renderHTML = function(){
var html;

if(user.status !== 0){//已登录
html = ‘您好 ‘+ user.data.userName +‘ , <a href="#">退出</a>‘;
} else {
html = ‘请先登录<a href="#">登录</a>‘;
}

$("#J_bar_html").html(html);
}
}(jQuery));

页面中可以这么干:

<a href="javascript:;" id="J_set_fav">点击收藏</a>
<script type="text/javascript">
user.init();//初始化用户

$("#J_set_fav").on("click", function(){
user.login(function(){//回调必须是登录状态下使用, 如果没有登录会执行画出登录框让用户登录
alert("正在收藏");
});
});
</script>

/**
* 前端退出
* @return {object} user对象
*/
user.exit = function(){
user.status = 0;
user.data = {};
user._renderHTML();//重置下页面状态
return user;
}

/**
* 检查用户是否已经登录
* @return {boolean} true为登录, false为未登录
*/
user.check = function(){
return user.status !== 0;
}

var isReady = false,//用户是否初始完毕
readyList = [];//初始化回调列表

/**
* 渲染用户状态到页面, 当前为模拟用
*/
user._renderHTML = function(){
// ...
runList();//因为已经渲染完页面了, 可以执行ready回调事件了
}

/**
* 用户ready事件
* @param {Function} callback 初始完成后回调 
* @return {object} user对象
*/
user.ready = function(callback){
if("function" === typeof(callback)){
if(isReady){//如果已经初始完毕
callback.call(user, user.data);
} else {//没有的话则追加到回调列表
readyList.push({
callback: callback
});
}
}

return user;
}

/**
* 执行回调事件
*/
function runList (){
var i = 0,
len = readyList.length;
if(len > 0){
for(;i<len;i++){
readyList.callback && readyList.callback.call(user, user.data);
}
}

isReady = true;//设置为已经初始完毕
readyList.length = 0;//重置回调
runList = $.noop;//惰性方法
}

<a href="javascript:;" id="J_set_fav">点击收藏</a>
<script type="text/javascript">
user.init();//初始化用户

user.ready(function(){
if(user.check()){alert("已登录");} else {alert("未登录");}
$("#J_set_fav").on("click", function(){
user.login(function(){//回调必须是登录状态下使用, 如果没有登录会执行画出登录框让用户登录
alert("正在收藏");
});
});
});
</script>