插件編寫的高可配模式

在應用一組元素時，經過HTML5數據屬性能夠在單個元素級別上定製選項，而不須要實例化每一個元素讓其擁有不一樣的默認值。

好比：

html

<li class="item-a" >aa</li>
<li class="item-b" >bb</li>

js

$(".item-a").draggable({"position": "top-left"});
$(".item-a").draggable({"position": "bottom-left"});

咱們爲一組元素li編寫一個拖動插件，可是針對每一個li，咱們須要定製一些選項，這裏是position。

假設這裏有100個，那麼，咱們須要實例化100個帶有不一樣默認值的插件對象。

更好的辦法：

html

<li class="item" data-plugin-options="{'position':'top-left'}">aa</li>
<li class="item" data-plugin-options="{'position':'bottom-left'}">bb</li>

js

$("item").draggable();

是否是簡單多了，那麼，這種插件如何實現呢，請看：

;(function($,window,undefined){
	var Plugin = function(elem, options){
		this.elem = elem;
		this.$elem = $(elem);
		this.options = options;
		this.metadata = this.$elem.data("plugin-options");
	};
	Plugin.prototype = {
		defaults:{
			message:"hello world"
		},
		init : function(){
			this.config = $.extend({}, this.defaults, this.options, this.metadata);
			this.create();
			return this;
		},
		create:function(){

		}
	};
	......
})(jQuery,window)

上面構造插件的代碼跟以前規範構造插件的代碼，貌似只差了一行代碼，就是獲取了元素HTML5自定義屬性的值，也就是

this.metadata = this.$elem.data("plugin-options");

而後，在初始化時，此屬性值會覆蓋以前全部的值，所以達到了配置的效果。

此種模式，也比較重要，angularjs就是利用html的自定義屬性實現所須要的功能的。

 

 

 

 

加油！