【物件導向】javascript 物件導向概念 API (範例可玩)

javascript 物件導向 api

pratnket 2017-02-15 00:48:38 ‧ 32251 瀏覽

分享至

物件導向系列
PHP系列
【物件導向】PHP 物件導向簡易分頁實作
javascript系列
【物件導向】javascript 物件導向概念 API (範例可玩)

####閒話專區 Start####

老闆喜歡金色
我又不想一直開PS CS6 來改圖...
就開發插件渲染了...

上傳2D圖片，自動上色
http://paintschainer.preferred.tech/
上色前
上色後
我畫的爛的，別嫌了...

嗯...就這樣...這張不是系統上色唷...

####閒話專區 End####

置頂關鍵字說明

hsla(hue 值, saturation 值, lightness 值, alpha 值)
rgba(red 值, green 值, blue 值, alpha 值)
---------------------------------------------------------
閉包
(function () {
})();
---------------------------------------------------------
物件 = {}
陣列 = [] 
---------------------------------------------------------
element.querySelector(CSS 选择器)
---------------------------------------------------------
var api = {} //物件
this.ColorDivide = api; //API對外呼叫名稱

API構成
1.全域變數
2.方法
3.程式入口

思維程式入口->設定->執行方法 = 改變網頁樣式

物件 = {}
陣列 = []

閉包(函式內的物件)
(function () {

})();

全域變數

	var options = {
		splitter: 'Default',
		color_bsdic:{ H:30,S:50,L:50 }
	}

變數用途說明
t = 尋找到的 CSS or ID
splitter = 字串目的用於切換模板
color_bsdic = 設定的基礎顏色

function injector(t, splitter , color_bsdic) {}

API說明
一.
element.querySelector(CSS 选择器)

二.
var api = {} //物件
this.ColorDivide = api; //API對外呼叫名稱

三.

//預設顏色
ColorDivide.listen('#demo1');

//自訂顏色
ColorDivide.
config({color_bsdic:{ H:10,S:100,L:50 }}).
listen('#demo2');

看出差異了嗎...
ColorDivide.config 不設定也可以
config用於改變全域變數

	var options = {
		splitter: 'Default',
		color_bsdic:{ H:30,S:50,L:50 }
	}

這2個看你們習慣用哪個噜...
hsla(hue 值, saturation 值, lightness 值, alpha 值)
rgba(red 值, green 值, blue 值, alpha 值)

var getRandomColor = function(Offset,color){
  return 'hsla(' + (  color.H + ( Offset * 2 )  ) + ', ' + ( color.S + ( Offset* 4 ) ) + '%, ' + ( color.L + ( Offset * 2 )  ) + '%, 1)';
}

呼叫他->改變全域 ->ColorDivide.listen->也是叫全域變數
下面他在幹嗎你懂了吧

//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 , options.color_bsdic);
        return this;
    }

要做什就看你要對網頁幹嗎了...

輪播、進度條、AJAX等，如果你很閒...老闆有給你時間...就去開發吧...

###程式碼複製區###
###A頁###

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ColorDivide.JS</title>
	<style>
	* {margin:0; padding:0;}
	body {background: #CCC;}
	::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
	::selection { background:#FF5E99; color:#fff; text-shadow: none; } 
	.wrapper {
		width: 710px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		background: #FFFFFF;
		padding: 50px;
	}
	.code {
		background: #f8f8f8;
		border: 1px solid #ccc;
		margin-bottom: 2em;
		padding: 10px;
	}
	</style>
</head>
<body>
	<div class="wrapper">
		<header>
			<h1>ColorDivide.js</h1>
			<h4>作者:pratnket</h4>
			<h4>版本:2017_Var1</h4>
			<br>
			<p>A simple plug to divide something by JavaScript,no need jQuery.</p>
			<p>一個輕量級的JavaScript插件，可以通過這個插件對字母，單詞或句子進行染色，無需依賴jQuery。</p>
			<br>
		</header>
		
		<article>
			
			<h1 align=center>預設顏色</h1>
			<div class="code" align=center>
				
				<h1 id="demo1">ColorDivide.listen('#demo1')</h1>
			</div>
			
			<h1 align=center>自訂顏色</h1>
			<div class="code" align=center>
				
				<h1 id="demo2">ColorDivide.</h1>
				<h1 id="demo2">config({color_bsdic:{ H:60,S:90,L:30 }}).</h1>
				<h1 id="demo2">listen('#demo2');</h1>
			</div>

		</article>
	</div>
	<script src="ColorDivide.js"></script>
	<script>
		//預設顏色
		ColorDivide.listen('#demo1');
		//自訂顏色
		ColorDivide.
		config({color_bsdic:{ H:10,S:100,L:50 }}).
		listen('#demo2');
	</script>
</body>
</html>

###JS頁###

(function () {
	var options = {
		splitter: 'Default',
		color_bsdic:{ H:30,S:50,L:50 }
	}
	//helper
	var getRandomColor = function(Offset,color){
	  return 'hsla(' + (  color.H + ( Offset * 2 )  ) + ', ' + ( color.S + ( Offset* 4 ) ) + '%, ' + ( color.L + ( Offset * 2 )  ) + '%, 1)';
	}

	function injector(t, splitter , color_bsdic) {
		var text = t.textContent,
			//a = text.split(splitter),
			a,
			after,
			inject = '';
		if(splitter === 'Default') {
			a = text.split('');
			after = '';
		}
		
		if (a.length) {
			var Offset = 0;
			for(var i = 0; i < a.length; i++) {
				
				( (i*2) > a.length )?(Offset--):(Offset++);	
				var font_color = getRandomColor(Offset,color_bsdic);
				inject += '<span style="color:'+font_color+'">' + a[i] + '</span>' + after;
			}
			t.setAttribute('aria-label', text);
			t.innerHTML = inject;
		}
	}
	//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 , options.color_bsdic);
			return this;
		}

		
	}
	this.ColorDivide = api;
})();