站内信系统是位于个人中心的一个小模块，在用户登录之后，进入个人中心，有一个站内信的导航按钮，点击进入站内信即可查看站内通知。
站内通知的展示分为两种，一种是已读同时，一种是未读通知。
站内信的实现需要是基于用户名的，因此发送请求的时候需要加入用户名作为参数，这就是我们的接口文档，前后台分离开发时，都是按照接口文档来进行对接的。
同时，项目关于站内通知的渲染采用的是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)})}
同样需要发送用户名和通知的id作为参数。
