原生JS封装兼容IE8及以上浏览器的Message插件

我们知道jquery封装插件的方法有：$.fn.func=function()jqeury对插件的扩展：$…extend() , $.fn…extend()等
以上方法需要基于jquery库才能进行封装并使用
这篇文章以常见的Message提示为例封装成可复用的插件，并支持IE8和IE8以上的浏览器
话不多说，上代码：
CSS`

.paper{
	width: auto;
	height: 40px;
	padding: 0 30px;
	line-height: 40px;
	letter-spacing: 1px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 0 15px #ccc;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 30px;
	transform: translate(-50%, -10px);
	transition: all .2s ease-in-out;
}
.success{
	color: #53c216;
}
.error{
	color: #dd3e3e;
}

JS

var message = {
	IEVersion: function(){
		if (document.documentMode) return document.documentMode;
	},
	calssList: function(){
		if(this.IEVersion() > 8){
			if (!("classList" in document.documentElement)) {
				Object.defineProperty(HTMLElement.prototype, 'classList', {
					get: function() {
						var self = this;
						function update(fn) {
							return function(value) {
								var classes = self.className.split(/\s+/g),
									index = classes.indexOf(value);
								fn(classes, index, value);
								self.className = classes.join(" ");
							}
						}
						return {
							add: update(function(classes, index, value) {
								if (!~index) classes.push(value);
							}),
							remove: update(function(classes, index) {
								if (~index) classes.splice(index, 1);
							}),
							toggle: update(function(classes, index, value) {
								if (~index)
									classes.splice(index, 1);
								else
									classes.push(value);
							}),
							contains: function(value) {
								return !!~self.className.split(/\s+/g).indexOf(value);
							},
							item: function(i) {
								return self.className.split(/\s+/g)[i] || null;
							}
						};
					}
				});
			}
		}
	},
	commons: function(){
		body.appendChild(paper)
		setTimeout(function() {
			body.removeChild(paper)
		}, 2000)
	},
	success: function(opt) {
		if((this.IEVersion() && this.IEVersion() > 8) || !this.IEVersion()){
			paper.classList.remove('error')
			paper.classList.add('success')
		}
		paper.innerHTML = opt
		this.commons()
	},
	error: function(opt) {
		if((this.IEVersion() && this.IEVersion() > 8) || !this.IEVersion()){
			paper.classList.remove('success')
			paper.classList.add('error')
		}
		paper.innerHTML = opt
		this.commons()
	}
}

引用后需要初始化，解决IE8以上浏览器不支持JS的h5新属性classList

window.onload = function(){
	message.classList()
}

然后就可以在需要的地方调用了，调用如下：

if(...){
	message.success('正确信息提示')
}else{
	message.error('错误信息提示')
}

以上为本次分享的原生JS插件封装方法，感谢浏览。