实现站内信通知系统

站内信系统是位于个人中心的一个小模块，在用户登录之后，进入个人中心，有一个站内信的导航按钮，点击进入站内信即可查看站内通知。

站内通知的展示分为两种，一种是已读同时，一种是未读通知。

站内信的实现需要是基于用户名的，因此发送请求的时候需要加入用户名作为参数，这就是我们的接口文档，前后台分离开发时，都是按照接口文档来进行对接的。

同时，项目关于站内通知的渲染采用的是observer的方式，这在博客的第一篇《js观察一个变量的变化》一文有介绍过。定义一个notice的变量，对其的data进行监听，只要data发生了变化，就会主动调用set的回调函数来自动渲染视图。

Object.defineProperty(notice,"data",{
    get:function(){
        return data;
    },
    set:function(value){
        notice.data=value;
        console.log("set:",data);
        updataNotice();
    }
})

下面是渲染视图的方法：

function updataNotice(){
    var str = '';
    notice.data.map((item,index)=>{
        str+=`<div class="panel ${item.read?'panel-default':'panel-info'} ">
        <div class="panel-heading">
          <h3 class="panel-title">${item.title}</h3>
        </div>
        <div class="panel-body">
            <p>From:  ${item.from}    <small class="small-gray">${item.time}</small> </p>
            <p>${item.content}</p>              
            ${item.read?'':'<button class="btn btn-info left-bottom read" οnclick="readNotice('+`${item.nid}`+')" >标记为已读</button>'}
        </div>
      </div>`
    })
    document.getElementById('notice').innerHTML=str;
}

这样可以减少许多重复的代码，提高代码的可读性，是渲染过程自动化。

下面是通知已读的请求代码：

 function readNotice(nid){
        new AjaxHandler().readNotification($.cookie('username'),nid,function(data){
            if(data.status===200){
                new Toast().showMsg(data.message,1000)
                getNotice();
            }else{
                new Toast().showMsg(data.message,1000)
            }
        },function () { 
            new Toast().showMsg('网络异常',1000)
         })
  }