码迷,mamicode.com
首页 > 其他好文 > 详细

插件的链式调用(利用当前对象)

时间:2018-07-08 16:45:23      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:pre   UNC   rand   word   turn   innerhtml   key   调用   attr   

 

(function () {
	var options = {
		splitter: ‘char‘
	}
	//获取随机颜色
	var getRandomColor = function(){
	  return ‘hsla(‘ + (Math.random() * 360) + ‘, 100%, 50%, 1)‘;
	}
    //主要功能函数
	function injector(t, splitter) {
		var text = t.textContent,
			//a = text.split(splitter),
			a,
			after,
            newText = ‘‘;
		if(splitter === ‘char‘) {
			a = text.split(‘‘);
			after = ‘‘;
		}
		else if (splitter === ‘word‘) {
			a = text.split(‘ ‘);
			after = ‘ ‘;
		}
		else if (splitter === ‘line‘) {
			var r = t.innerHTML;
			var e = document.createElement(‘div‘);
			r = r.replace(/<br>/ig, ‘eefec303079ad17405c889e092e105b0‘);
			e.innerHTML = r;
			text = e.textContent;
			a = text.split(‘eefec303079ad17405c889e092e105b0‘);
			after = ‘‘;
			e = null;//free storge
		}


		if (a.length) {
			for(var i = 0; i < a.length; i++) {
				var font_color = getRandomColor();
                newText += ‘<span style="color:‘+font_color+‘">‘ + a[i] + ‘</span>‘ + after;
			}
			//t.setAttribute(‘aria-label‘, text);
			t.innerHTML = newText;
		}
	}
	//API插件函数
	var api = {
		//配置函数
		config: function (opts) {
			if(!opts) return options;
			for(var key in opts) {
				options[key] = opts[key];
			}
			return this;
		},
        //监听函数
		listen: function listen(elem) {
			if (typeof elem === ‘string‘) {
				var elems = document.querySelectorAll(elem),
					i = elems.length;
					while (i--) {
						listen(elems[i]);
					}
					return
			}
			//调用功能
			injector(elem, options.splitter);

			return this;
		}
	}
	//暴露给全局
	this.ColorDivide = api;
})();

  

 

<script src="ColorDivide.js"></script>
	<script>
	ColorDivide.listen(‘#demo1‘);                                       //插件的链式调用(利用当前对象)
	ColorDivide.config({splitter: ‘word‘}).listen(‘#demo2‘);            //插件的链式调用(利用当前对象)
	ColorDivide.config({splitter: ‘line‘}).listen(‘#demo3‘);            //插件的链式调用(利用当前对象)
	</script>

  

 

 

 

 

插件的链式调用(利用原型链)下回析解。。。。。。。。。。。。。。。。。。

 

插件的链式调用(利用当前对象)

标签:pre   UNC   rand   word   turn   innerhtml   key   调用   attr   

原文地址:https://www.cnblogs.com/Longhua-0/p/9280098.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!