Js添加消息提示数量

接到个新需求，类似以下这种需求，得把它封装成一个插件

后端给返回一个这种数据

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);
		})
	}
};

效果