接到个新需求，类似以下这种需求，得把它封装成一个插件
后端给返回一个这种数据
var data = [
{
key:"020506",
num:5
},
{
key:"03",
num:2
}
];
key:
02:表示第一层，0205:表示第二层，020506：第三层
如果第三层有新消息，则它本身和它上面的层级都需要显示提示，并显示数量，另外，后端将需要添加提示的元素，都加上了data-newinfo属性，里面的值是它当前的层级。
num:
消息提示的数量
一些注意点
var newinfo = document.createElement('newinfo');
原本想创建一个span元素，但想想还是不太行，因为对应的那个页面很有可能设置了span的样式，而我们是不希望这样的，因此创建了一个特别的元素。
/*
使用说明：
data:数据
setInfo():将消息提示添加到页面中
new NewInfo(data).setInfo();
------------------------------------
<div data-newinfo="020505"></div>
var data = [
{
key:"020506",
num:5
},
{
key:"03",
num:2
}
];
*/
function NewInfo(data){
this.data = data;
// 获取所有需要添加新消息提示的元素
this.newinfoDoms = Array.prototype.slice.call(document.querySelectorAll("[data-newinfo]"));
// 样式
this.sty = "padding: 2px 5px;background-color: red;border-radius: 100%;color: #fff;font-size: 12px;vertical-align: 4px;line-height:1;";
}
NewInfo.prototype = {
// 获取所需的信息
getInfo:function(){
var _this = this;
var arr = [];
this.newinfoDoms.forEach(function(item,index){
var isTrue = true;
_this.data.forEach(function(item2,index){
var isNewInfo = item2.key.substring(0,item.dataset.newinfo.length)===item.dataset.newinfo;
if(isNewInfo&&item.dataset.newinfo){
if(isTrue){
arr.push({
'item':item,
'num':item2.num
});
}else{
arr[arr.length-1].num += item2.num;
}
isTrue = false;
}
});
});
return arr;
},
// 添加到相应的页面中
setInfo:function(){
var _this = this;
var arr = this.getInfo();
arr.forEach(function(current,index){
var newinfo = document.createElement('newinfo');
newinfo.style.cssText = _this.sty;
if(current.num>0){
newinfo.innerHTML = current.num;
}else{
newinfo.style.paddingTop = '0';
newinfo.style.paddingBottom = '0';
}
current.item.appendChild(newinfo);
})
}
};
效果